jquery ajax navigation within ajax navigation

Question

I'm using this code for my main site navigation which loads each page via ajax and has fallback.

$(function() {
    var newHash = '',
        $contentWrap = $("#content-wrap");
    $("nav").on("click", "a", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });
    $(window).on('hashchange', function() {
        newHash = window.location.hash.substring(1);
        $contentWrap.load(newHash + " #content");
    });
    $(window).trigger('hashchange');
});

this works fine but when i load in the content from another page for example about.html i am also loading in some more buttons for navigation within #content-wrap.

so #content-wrap now contains a data box and some more buttons for navigation. when i click on the new navigation it needs to load new data in the data box.

first i tried just pretty much copying the script above but with new anchors however i get a conflict.

i figure i need some sort of if statement, i have looked into something like if (function !== undefined) but cannot figure out what to do.

I'm not sure how well i have explained myself, i'm confused explaining it but basically i want to combine the code above with basically the same code below without a conflict.

$(function() {
    var newHash = '',
        $contentWrap = $("#content-wrap"),
        $aboutWrap = $("#a-wrap");
    $("#content-wrap").on("click", "a", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });
    $(window).on('hashchange', function() {
        newHash = window.location.hash.substring(1);
        $aboutWrap.load(newHash + " #a-content");
    });
    $(window).trigger('hashchange');
});

Update: kind of works a bit but changed my plan

$(function() {

var newHash = '',
        $nav = $("nav a"),
        $boxBtn = '',
        $aboutWrap = '',
        $contentWrap = $("#content-wrap");

$("nav").on("click", "a", function() {

    $(this).addClass("nav-click");

    window.location.hash = $(this).attr("href");

    return false;
});

$contentWrap.on("click", "a", function() {

    $(this).addClass("btn-click");

    window.location.hash = $(this).attr("href");

    return false;
});

$(window).on('hashchange', function() {

    var     $aboutWrap = $("#a-wrap"),
                $boxBtn = $("div.btn a");

    newHash = window.location.hash.substring(1);


    if ($nav.hasClass("nav-click")){

    $contentWrap.load(newHash + " #content");
    $nav.removeClass("nav-click");
    };

    if ($boxBtn.hasClass("btn-click")){

        $aboutWrap.load(newHash + " #a-content");
        $boxBtn.removeClass("btn-click");
    };
});

$(window).trigger('hashchange');


}); /*/end*/

score 0 · Accepted Answer · answered Apr 18 '12 at 19:04

0

I had a similar problem, basically in most cases the problem is with conflicting element ID's. In the DOM you can use an ID only once. You can workaround that by using classNames and ID's for only unique elements like wrappers.

answered Apr 18 '12 at 19:04

Opi

1,218
1
10
14

hi, thanks for reply. i know that can sometimes be an issue but i don't think that is the case here. i think '$(window).on('hashchange', function() {' being called twice is the problem but i don't know how to place an if statement to prevent this. – thom Apr 18 '12 at 20:41
Oh yeah I see, since you fire the event manually and also you change the hash manually. But you can also set a variable when you change the hash via a link and then check that variable inside the function. If that is false then you know it wasn't checked from inside the a clickevent handler – Opi Apr 19 '12 at 09:10
hi, yeah i had a play around with that idea, i got to a stage where it works (posted above) but the back button does not work as i am now only loading content in an if statement so going back needs more work. i don't really have time so going to just load the whole main content each time, also makes it bit more simple for fallback if highly inefficient. – thom Apr 19 '12 at 09:20

jquery ajax navigation within ajax navigation

1 Answers1