9

I am creating a script for listening to browser back button and loading the previous page. I am new to jquery and javascript (a php person). Before re inventing this, I have searched the whole web for a library. But as I am using a lot of parameters in my ajax links, I cant use those libraries. I admit its my mistake, because I dont know how to use such complex systems. So I am thinking if creating a system as follows.

// get the contents of a particular div and save as an object/associative array 
// { hash : pageNumber, html : content}
function save_history(div){
    var content = $(div).html();
    // increment the page number and add hash tags to the URL
}   

// Listen to the browser hash value change
$(window).bind('hashchange', function () {
    hash = window.location.hash;
    if(hashValue){
        load_history(hashValue);
    }   
}); 

// Load data from history
function load_history(id){
    // fetch the content based on the hashvalue
    $(div).html(content);
}

Is there any problem in using this? Will this make the pages unresponsive or crash the browser, when a lot of contents are saved as objects? I dont want to waste my time if it causes such problems.

Mic
  • 337
  • 1
  • 5
  • 14
  • Why are the default browser implementations unacceptable? Are you making a very AJAX heavy web app? I mean browsers these days do all sort of caching, warn you when you are trying to go back to a POST request etc, etc. – thatidiotguy Sep 10 '12 at 21:44
  • @thatidiotguy:yes, the whole system is ajaxified. I am not planning to cache the form submissions. Just all the views. – Mic Sep 10 '12 at 21:44
  • Then you get an upvote, as I do not know best practices for this either. – thatidiotguy Sep 10 '12 at 21:45
  • @thatidiotguy : thanks for the upvote. Looking for advices from the gurus regarding any browser issues, memory problems etc.. – Mic Sep 10 '12 at 21:47
  • 1
    Good, or bad; I can not say; cross browser friendly it is not. – iambriansreed Sep 10 '12 at 21:54
  • If I'm understanding you correctly, you could use the History API. Browse through the GitHub page of this relevant project (click on the links and look at your location bar) to see basically how it works: https://github.com/balupton/History.js – Blender Sep 10 '12 at 21:55
  • @anonymousdownvotingislame : why its not cross browser friendly? – Mic Sep 10 '12 at 22:04
  • @Blender : Thanks for the link. But I have seen that earlier. My pages are created with a lot of parameters. So I am not sure of how to use that system. – Mic Sep 10 '12 at 22:05
  • You're probably too far along at this point - but have you considered using Backbone.js or a similar library? With backbone you define models and views and routes (a # followed by a path to a view/action) - and it handles the history aspect of it for you, no matter how many parameters you're using for a view (well, within reason). – Joe Dyndale Sep 11 '12 at 19:32

3 Answers3

2

Seems like pjax is the library you're looking for: https://github.com/defunkt/jquery-pjax

Vanusa
  • 31
  • 2
0

If you plan to use HTML5 then take a look at the History API. It allows for use of native browser controls on AJAX Web Apps. Take a look!

http://diveintohtml5.info/history.html

howderek
  • 2,192
  • 12
  • 23
  • Thanks for the link. But I have seen that earlier. My pages are created with a lot of parameters. So I am not sure of how to use that system – Mic Sep 10 '12 at 22:05
0

The History API is the way to go. It doesn't matter if your pages are created with lots of parameters - if they're tracked via URL params, then updating your history (which updates the URL) should restore the page state. If you're not using URL params (i.e. you're using POST or some custom solution) then history.pushState() accepts three parameters: state, which can be any object (for example, the serialization of your form data), then Title, then the URL of the "new" page. Then, when you hit back, you do history.popState(), which returns all the same parameters, and you can then parse those parameters to restore the "previous" state of your page.

Seriously, read the article howderek linked to more closely, or check out this other question that has links to many other tutorials on using the history API: Good tutorial for using HTML5 History API (Pushstate?)

Community
  • 1
  • 1
Isochronous
  • 1,015
  • 9
  • 23