Question

So I’m using the History.js plugin to load pages in my WordPress theme via AJAX. I’ve been successful in doing so and have the entire loading feature working fine. However, I have many scripts working in the same file and they of course do not get loaded on the state change.

Here’s (a very brief) version of my functions.js file to explain:

(function($){})(window.jQuery);

$(document).ready(function() {
    /* THIS IS CODE RELATIVE TO MY HOME PAGE ONLY */
    $projects = $("#projects");
    $projects.append($(".contact"));

    $projects.isotope({
        itemSelector : '.item',
        layoutMode : 'masonry'
    });
    /* END PREVIOUS BLOCK */

    /* BEGIN HISTORY.JS IMPLEMENTATION */

    var History = window.History,
        State = History.getState();

    $('.nav a, .leftHold a').on('click', function(event) {
        event.preventDefault();
        var path = $(this).attr('href');
        var title = $(this).text();
        History.pushState('ajax', title, path);
    });

    History.Adapter.bind(window, 'statechange', function() {
        load_site_ajax();
    });

    function load_site_ajax() {
        State = History.getState();
        $('body, html').animate({ scrollTop : 0 }, 250, function() {
            $("#article").animate({ left : -1*$(window).width() }, 250, function() {
                $(this).load(State.url + ' #article', function() {
                    $(".nav li").each(function() {
                        $(this).removeClass("current_page_item").removeClass("current_page_parent").removeClass("current_page_ancestor");
                    }).promise().done(function() {
                        $(".nav a").each(function() {
                            if(State.title.indexOf($(this).text()) != -1) {
                                $(this).parent().addClass('current_page_item');
                                return false;
                            }
                        });
                    });
                }).promise().done(function() { $(this).css("left", $(window).width()).animate({ left : 0 }, 250); });
            });
        });
    }

    /* END HISTORY.JS */
});

I load this functions.js file at the end of my document, just before the closing body tag. I can tell that whenever I change browser states, the code in $(document).ready(); doesn’t run again, therefore Isotope and none of my other Javascripts load again.

QUESTION:

How should I ensure that the code in functions.js runs every time the pushstate is initiated by History.js?

Answer 1

It sounds like you’ll need to execute the ready code again. Wrap your initialization code in a function:

$(document).ready(initializePage);

function initializePage() {
    /* THIS IS CODE RELATIVE TO MY HOME PAGE ONLY */
    ... 
}

And then, when "statechange" fires, you can call initializePage() again.

You will also need to make sure the History code only runs once, so put that code in a separate function:

$(document).ready(setupHistory);

function setupHistory() {
    /* BEGIN HISTORY.JS IMPLEMENTATION */

    var History = window.History,
        State = History.getState();
    });
    ....
}