Three level panel menu using Javascript, Can't get content to load properly

Question

I've got a small problem with the navigation framework I'm trying to implement on my site. Coded as follows:

HTML

<div class="panel1">
    first navigation ul li set
</div>
<div class="panel2" id="subnav">
    AJAX loaded navigation ul li set
</div>
<div class="panel3" id="content">
    content loaded by AJAX
</div>

Javascript

$(document).ready(function () {
    $('a.ajax-link-top').click( function( event ) {
        set_ajax_link( $(this), event );
    });
});

function set_ajax_link( el, event ){
    event.preventDefault();
    var url = el.attr("href");
    load_menu_content( url );
}

function load_menu_content( url ){
    $("#subnav").load( url, { 'ajax': 'true' }, function(){
        $('#subnav a.ajax-link').click( function( event ) {
            set_ajax_link_sub( $(this), event );
        });
    });
}

function set_ajax_link( el, event ){
    event.preventDefault();
    var url = el.attr("href");
    load_page_content( url );
}

function load_page_content( url ){
    $("#content").load( url, { 'ajax': 'true' }, function(){
        $('#content a.ajax-link').click( function( event ) {
            set_ajax_link_sub( $(this), event );
        });
    });
}

The fix is as follows:

HTML: same Javascript:

$(document).ready(function () {
    var panel2 = $(".panel2");
    var panel3 = $(".panel3");

    $(".panel1").click(function (e) {
        e.preventDefault();

        var url = e.target.href;
        $(".panel2").load(url);
    });

    $(".panel2").click(function (e) {
        e.preventDefault();

        var url_2 = e.target.href;
        panel3.load(url_2);
        });
});

The goal is to get links of the class ajax-link-top to load a subnav menu in the #subnav div, and to get links of the ajax-link class to load page content into the #content div, from either the top nav panel or the subnav panel.

The result I'm getting right now is that anytime any of the links are clicked, they load the content, menu or otherwise, into the #content div. I'm sure I just have something off in my JS code somewhere, but I can't see it.

Any and all help appreciated! M

innov8d innov8d · Accepted Answer · 2012-08-05T15:10:07

This assumes you're using jQuery.

I would take a somewhat different approach, instead of tying event handlers to each individual link you can target the panel div's themselves - the click events will bubble up. It'll save you a lot of repetitive binding. You should add check to make sure what was clicked on in the container was actually a link if there are more elements than just a series of links in the containers otherwise you'll get spurious events if non-link elements are clicked. This way you're only binding two events.

I've added a faked out load to simulate the AJAX load to illustrate. There's a fiddle at http://jsfiddle.net/WFb8a/.

HTML

<div class="panel1">
    <ul>
        <li><a id="subnav1" href="#link1">Link 1</a></li>
        <li><a id="subnav2" href="#link2">Link 2</a></li>
    </ul>        
</div>
<div class="panel2" id="subnav">
    AJAX loaded navigation ul li set
</div>
<div class="panel3" id="content">
    content loaded by AJAX
</div>

<script id="subnav1-content">
    <ul>
        <li><a id="subnav1-link1" href="#link1">Subnav1 Link 1</a></li>
        <li><a id="subnav1-link2" href="#link2">Subnav1 Link 2</a></li>
    </ul>        
</script>

<script id="subnav2-content">
    <ul>
        <li><a id="subnav2-link1" href="#link1">Subnav2 Link 1</a></li>
        <li><a id="subnav2-link2" href="#link2">Subnav2 Link 2</a></li>
    </ul>        
</script>

<script id="subnav1-link1-content">
    <h1>Content 1</h1>
</script>

<script id="subnav1-link2-content">
    <h1>Content 2</h1>
</script>

<script id="subnav2-link1-content">
    <h1>Content 3</h1>
</script>

<script id="subnav2-link2-content">
    <h1>Content 4</h1>
</script>

Javascript

$(document).ready(function () {
    var $panel2 = $(".panel2");
    var $panel3 = $(".panel3");

    $(".panel1").click(function (e) {
        e.preventDefault();
        e.stopPropagation();

        $panel2.html($("#" + e.target.id + "-content").html());
    });

    $(".panel2").click(function (e) {
        e.preventDefault();
        e.stopPropagation();

        $panel3.html($("#" + e.target.id + "-content").html());
    });
});

Three level panel menu using Javascript, Can't get content to load properly

2 Answers