AJAX Hotlinking/back/refresh capability using .load

Question

Below is my AJAX code loading a DIV from an external HTML file into a target DIV onto another HTML page, can anyone suggest how to make the page with the content loaded have back/refresh/hotlinking capabilities keeping the DIV loaded in the page?

$(document).ready(function(){
    $(document).on('click', '#about2', function() {
        $("#content").load("content.html #about", function() {
        $.getScript("slides.js", function() {
        $(window).scrollTop(0);
        });
        });
    });

    $(document).on('click', '#process2', function() {
        $("#content").load("content.html #process", function() {
        $(window).scrollTop(0);
        });
    });

    $(document).on('click', '#materials2', function() {
        $("#content").load("content.html #materials", function() {
        $(window).scrollTop(0);
        });
    });   

    $(document).on('click', '#radio2', function() {
        $("#content2").load("content.html #radiofriendly", function() {
        $(window).scrollTop(0);
        });
    });
    });

Basically, i'd like:

http://crookedcartoon.co.uk/print.html#process

To link straight to the page with the #process DIV loaded, allowing for refresh, back, forward browser functions. Any suggestions? At the minute it just links to http://crookedcartoon.co.uk/print.html with the original DIV loaded.

Thanks in advance, having real trouble with JQuery.

EDIT**

$(document).ready(function(){
$(document).on('click', '#about2',function ParseURL() {
    switch(location.hash.split("&")[0]) {
        case '#about':
            $("#content").load("content.html #about", function() {
                $(window).scrollTop(0);
            });
            break;

$(document).on('click', '#process2',function ParseURL() {
    switch(location.hash.split("&")[0]) {
        case '#process':
            $("#content").load("content.html #process", function() {
                $(window).scrollTop(0);
            });
            break;

$(document).on('click', '#materials2',function ParseURL() {
    switch(location.hash.split("&")[0]) {
        case '#process':
            $("#content").load("content.html #materials", function() {
                $(window).scrollTop(0);
            });
            break;

$(document).on('click', '#pricing2',function ParseURL() {
    switch(location.hash.split("&")[0]) {
        case '#process':
            $("#content").load("content.html #pricing", function() {
                $(window).scrollTop(0);
            });
            break;

         default:
    }
}

$(window).bind("pageshow", function(event) {
    if (event.originalEvent.persisted) {
        ParseURL();
    }
});

$(document).ready(function ($) {
    ParseURL();
});

This is how it works, when you load content dynamically on events, that content is gone when you navigate away from the site. There are ways to keep persistent storage, but to keep track of all the dynamic changes you're making, and make them reappear on page reload is going to be a rather daunting task. — adeneo

wilsotc wilsotc · Accepted Answer · 2014-04-04T20:16:13

Use the hashchange event to detect the URL modification. This will allow you to update the DIV after your loads. When you use back and forward, there will be an event. Use that to look at the hash, and load the content DIV appropriately.

Here's a great jQuery plugin that supports the functionality you want with examples: Ben Alman Hashchange plugin

As it currently is, you page is updating correctly when you select a link from the left column but NOT updating when using history.

ADD THESE TO the javascript associated with print.html NOT in content.html!!! I believe you call it core.js?

//You will need one entry in this switch statement for *each* hash value: #process, #materials, #pricing, etc
function ParseURL() {
    switch(location.hash.split("&")[0]) {
        case '#materials':
            $("#content").load("content.html #materials", function() {
                $(window).scrollTop(0);
            });
            break;
        case '#process':
            $("#content").load("content.html #process", function() {
                $(window).scrollTop(0);
            });
            break;
         default:
    }
}

//This should update on history button use
$(window).bind("pageshow", function(event) {
    if (event.originalEvent.persisted) {
        ParseURL();
    }
});

//Using ParseURL inside your ready function will allow linking directly to a sub page
//This allows those going to the URL:
// http://crookedcartoon.co.uk/print.html#pricing directly will should display the 
// pricing information in the content DIV.
$(document).ready(function ($) {
    ParseURL();
});

AJAX Hotlinking/back/refresh capability using .load

1 Answers