jQuery how to load content when back button is clicked

Question

I am using jQuery to load page content when a link is clicked,

$(document).on('click', 'nav a', function (e) {
    e.preventDefault();

    var url = $(this).attr("href");
    window.history.pushState('', '', url);
    url += " #main_wrapper > *";

    $('#main_wrapper').load(url);

});

The problem is when i click on the Back button, URL changes and nothing happens.. How can i load the content again when the back button is clicked?

And how can i stop/cancel existing Load when a new link is clicked?

Thanks.

EDIT:

This is how i implemented this, You can easily modify this to your needs.

window.onpopstate = function(event) {

    $('aside nav a').removeClass('active');
    $('a[href="' + document.location + '"]').addClass('active')

    $('#main_wrapper').load(document.location +" #main_wrapper > *");

};

raina77ow · Accepted Answer · 2012-12-24T21:36:00.187

How can i load the content again when the back button is clicked?

You need to assign event handler to popstate event to handle 'Back' button pressing, like described here. With this handler you can analyze the current history state and augment your page accordingly.

And how can i stop/cancel existing Load when a new link is clicked?

Unfortunately, you can't do this with .load, as it returns the 'originator' jQuery object. But if you transform it into more low-level $.ajax call (which success function should load the response into the element with .html(), you can call .abort on the returned jqXHR object.

Thanks, Worked like a charm. – Dhruv Kumar Jha Dec 25 '12 at 11:23 — Dhruv Kumar Jha, Dec 25 '12 at 11:23

jQuery how to load content when back button is clicked

1 Answers1