Using hashchange to load dynamic pages not working with secondary nav

Question

Any ideas on why this won't work. I am using the tutorial from CSS-Tricks using AJAX to load pages dynamically. This works fine up until I introduced a secondary navigation on some pages which caused pages to load normally.

This is the code I am using. I am using classes to style the different nav areas.

$(function() {

var newHash      = "",
    $mainContent = $("#main-content"),
    $pageWrap    = $("#page-wrap"),
    baseHeight   = 0,
    $el;

$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $mainContent.height();

$("nav").delegate("a", "click", function() {
    window.location.hash = $(this).attr("href");
    return false;
});

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

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

    if (newHash) {
        $mainContent
            .find("#guts")
            .fadeOut(200, function() {
                $mainContent.hide().load(newHash + " #guts", function() {
                    $mainContent.fadeIn(200, function() {
                        $pageWrap.animate({
                            height: baseHeight + $mainContent.height() + "px"
                        });
                    });
                    $("nav a").removeClass("current");
                    $("nav a[href="+newHash+"]").addClass("current");
                });
            });
    };

});

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

});

Website: http://darynjohnson.com/Medical%20Futures/about.php

score 0 · Accepted Answer · answered Sep 02 '12 at 22:09

0

Those new created links do not have any events bound to them because u set delagate function on the the object which is not changed. New added objects with the same tag ("nav" here) won't get delagation.

Use:

$('#page').delegate("nav a", "click", function() {
  window.location.hash = $(this).attr("href");
  return false;
});

Also I recommend you to upgrade jQuery to the newest version and replace delegate() with on()

answered Sep 02 '12 at 22:09

Eru

645
4
8

Thank you so much! That's been bugging me for ages – jshjohnson Sep 02 '12 at 22:42
I'm assuming it's not possible for the page titles to change when switching between pages is it? – jshjohnson Sep 03 '12 at 10:56
It's possible. You can use pushState method (History.js plugin for crossbrowers functionality) or do it manually by setting `document.title` attribute – Eru Sep 03 '12 at 14:16
I tried to do it manually but as the source code doesn't change between pages (it just keeps the source code from the page first loaded) it doesn't work. See: http://darynjohnson.com/Medical%20Futures/about.php – jshjohnson Sep 03 '12 at 16:42
The source code won't change. It displays what was rendered from the server. Why do you want to change the source code? – Eru Sep 04 '12 at 20:13
Maybe I am just doing it wrong but if you go to http://darynjohnson.com/Medical%20Futures/gallery.php - The title is correct but then if you navigate to this http://darynjohnson.com/Medical%20Futures/gallery.php#about.php - the title doesn't change. Even though I have added to the code – jshjohnson Sep 05 '12 at 13:11
I'm not sure what you want to achieve but if I understand you correctly setting `document.title` within hashchange handler should do the work – Eru Sep 05 '12 at 20:41
I just want the titles to change like they would if I wasn't using Ajax to load content. At the moment it just loads the title of the first page you go to then it doesn't change. – jshjohnson Sep 06 '12 at 10:43
change the title in `.load()` function's callback – Eru Sep 06 '12 at 21:12
i am loading a view in asp.net mvc on menu button click using the css tricks code in my view jquery charts are used to display chart, page loads fine but chart is not drawn i have written chart drawing code in that view in document.ready function why chart is not drawing? – Ehsan Sajjad Dec 20 '13 at 10:56
It's probably not drawing because loading the view dynamically do not trigger document.ready function – Eru Dec 20 '13 at 14:23

Using hashchange to load dynamic pages not working with secondary nav

1 Answers1