jQuery load() with ajax site refreshes

Question

I have an ajax site using jQuery, and I am wondering how to go about allowing the user to refresh the page, and have the appropriate content loaded.

I have it so that when a user clicks on an element with an href attribute with my website domain, that page's content is loaded into the main div. The loaded html content is just an entire html document, so I am not loading page fragments. I am using History.js to keep the URL and hashchanges in check. But when I refresh the page, only the static content is loaded (unstyled), and not with the containing header and footer of the main, home page. The other problem is that I need to clear the existing hash to avoid a GET 404 error. What I obviously would like is for the entire page to load normally.

Here is my code so far:

jQuery(document).ready(function() {
    // Prepare
    var History = window.History; // Note: We are using a capital H instead of a lower h
    if ( !History.enabled ) {
        console.log("History is not enabled.");
         // History.js is disabled for this browser.
         // This is because we can optionally choose to support HTML4 browsers or not.
        return false;
    }
    else {
        console.log("History is enabled");
    }

    //vars for history
    var changes = 0;
    // Bind to StateChange Event
    History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
        var State = History.getState(); // Note: We are using History.getState() instead of event.state
        History.log(State.data, State.title, State.url);
    });

    $("a").click(function(e) {
        e.preventDefault();
        $("#content").load(this.href, function() {
            // Change our States
            changes++;
            History.pushState({state:changes}, "State " + changes, "#" + this.href); // logs {state:1}, "State 1", "?state=1"
        });
});

score 1 · Answer 1 · answered Jun 15 '12 at 15:59

Are you using HTML5? You could use a local persistence method to maintain the items that have been loaded via ajax, or store any specific keys, ids required to populate the content you require when you load, or refresh the page.

Without HTML5 there is the option of jQuery.data, but I do not think you'll be able to catch/store the persistent items before the page refreshes, so this is unlikely to be a feasible solution - so the only other option I can think of is to use cookies (in-memory, created via JavaScript(jQuery))- which as a solution would be a little bit of a nightmare (potentially) with lots of different points to synchronise all the state so that the refreshes/reloads populate the right things....but if designed well it could work for you.

Thanks. I may try the localstorage idea. But what I'm actually wondering now is whether another method might work: check for the specific header elements and the calls for the scripts in the html header, and if there are none, then perform getScript and load required CSS via jQuery. That would solve the refresh issue, but would not work for browsers with javascript disabled... — user1429980, Jun 18 '12 at 17:48

jQuery load() with ajax site refreshes

1 Answers1