HTML 5 - Ajax popstate and pushstate

Question

I am trying to figure out how to use this pushstate and popstate for my ajax applications. I know there are some plug ins but i am trying to learn how to use it in it's raw form at the moment. I am also aware that in the raw form it is not supported by IE. All that aside, I need some help understanding how to use it.

the pushstate portion of it is pretty simple. Right now i have:

function loadForm(var1,var2){ 
    string = "xyz="+var1+"&abc="+var2;
        history.pushState("", "page 1", string);
 }

This changes my url just fine and adds it to my url stack. I have another function that looks like the following:

function loadForm2(var1,var2, var3){ 
    string = "xyz="+var1+"&abc="+var2+"&123="+var3;
        history.pushState("", "page 2", string);
}

The second function also changes the url when called. Now that i have that part i am trying to figure out how to use the popstate. Right now i have it as follows

window.popState = ajax;

function ajax(){
   jQuery.ajax({               
     type: "get",
     url: "../html_form.php",
     data: string,
     dataType: "html",
     success: function(html){
       jQuery('#Right_Content').hide().html(html).fadeIn('slow');
       validate();
       toolTip();   
     }  
   })
}

So if you can image my page with two links, one calls the loadForm function and the other link calls loadForm2 function. When i click each of the links the forms loads via ajax just fine and the url changes as it should. When I hit the back button, the url will roll back to the previous page's url BUT the page content loads the current form again instead of the previous form. When i hit the back button it is making an ajax call (firebug) as if it is trying to load the previous form but instead of running the previous ajax call it runs the current ajax call. So my url goes back to the previous url but the form that is loaded or the ajax call that is called is the same as the most recent page load (not the previous page load).

I am not sure what i am doing wrong and any help would be much appreciated.

Answer 1

You are doing something weird.

window.popState = ajax;

I am even surprised that ajax() gets even called.

The normal way of doing it is to register an event handler.

$(window).bind('popstate', function(event) {
    var state = event.originalEvent.state;
}

See How to trigger change when using the back button with history.pushstate and popstate?

EDIT:

Basically you need to know which form to load when your state is changed. .originalEvent.state will contain this information which you can then pass on to your ajax call. It should also contain the respective string.

The problem in your approach is that string, always remained the one of the last newly loaded page. You need to read that string in event.orginalEvent.state. use console.log() to find it in that object.

EDIT 2:

Is there a way you can give me an example of what my code should look like. I think you understand what i am trying to accomplish.

Everytime the back button (or forward button) of the browser is clicked, you need to load the page from AJAX.

You have attempted to do this by saying:

window.popState = ajax;

This is dangerous as you are replacing a system function.

Instead you should register an event handler for when the state changes.

jQuery(window).bind('popstate', ajax);

Now everytime the back button is pressed, your ajax() function (should) get called.

So far this will only improve your approach to it, but not fix your problem.

The problem is that your original ajax() function refers to a global variable called string. This global variable has no memory of the previous states. Therefore everytime the original form gets loaded again and again.

But you already are correctly storing string in the state by doing:

history.pushState("", "page 1", string);

So when ajax is called, the browser will give it an event object, which contains all this information.

So all you need to do now is change your ajax() as follows:

function ajax(){
   jQuery.ajax({               
     type: "get",
     url: "../html_form.php",
     data: document.location.search.substr(1),
     dataType: "html",
     success: function(html){
       jQuery('#Right_Content').hide().html(html).fadeIn('slow');
       validate();
       toolTip();   
     }  
   })
}

Finally you should also stop using string as a global variable by using the var keyword and make sure the string contains a "?":

function loadForm(var1,var2){ 
    var string = "?xyz="+var1+"&abc="+var2;
        history.pushState("", "page 1", string);
 }

This will reduce any future confusion about something almost working, but not working properly.