Press the Back Browser button loosing the previous page state

Question

I am creating a .net application where on the main page I am creating some text boxes dynamically.

<div>
Enter how much pets you have : <input type="text" id="amount" />
<input type="button" value="Submit" id="btn" />
 <script type="text/javascript">
 $(document).ready(function()
{
   $("#btn").click(function()
   {
      var i = 0;
      for(i = 0; i <= $("#amount").val(); i++)
      {
         $("#Names").append("<p>Name " + i.toString() + ":<input id='name" + i.toString() + " type='text' class='nameInput'/>");
      }
   });

   $("#SubmitNames").click(function()
   {
      $.getJSON("names.aspx",$(".nameInput"),function(data)
      {
          if(data.Status == "Success")
          {
              window.location.href = "step2.aspx";
          }
      });
   });
});
</script>
</div>

When the user is clicking the submit names it is redirected to step2.aspx

Till here everything is working fine!

The problem starts when the user will go back ("clicks the back browser button") the whole previous status is lost.

The user must enter all again all names.

I think I am missing something. I need to do the data transmittion via AJAX.

Can you help me? What do you suggest?

I am using .NET c# VS2008

Thanks

Answer 1

I don't think this is going to work. When you click the back button, it reloads the page from cache. That cache does not include changes you have made via javascript. So it's reloading the base page, then re-executing the javascript, creating a brand new set of empty controls.

Your best is to save the values submitted to a hidden field (probably using json) then have a "go back" button on your next form, then reloading your controls state if the hidden field contains data.

EDIT:

Since you're not submitting anything, perhaps you can modify your "names.aspx" to return the names entered if you do not pass any data. Then in your first step you can do an ajax call to retrieve any names that might be set, doing nothing if no names are returned.

I should note, however, that using GET in this manner is highly unusual, and according to the HTTP specification get should not change the state of an object (which you seem to be doing).

Answer 2

This is because you add a input field by ajax.. The browser dont know what you post For example when you POST and you get to the next page and go back you will get all given information in the fields before you post it..

I think even when you cache it, it doenst work.. because for the browser the amount of input field doesnt exists..

So what you can try is is instead off using $.getJSON try it with $.ajax({ cache: true }) little example here ..

if thats not working i would suggest to set a cookie and check it if there is a cookie when loading the page.

goodluck

Answer 3

Did you inspect the HTTP header's expiration/caching settings that the server sends to the client?

This usually has an influence on whether the page is reloaded or being pulled from the cache when user clicks the "Back" button.

Answer 4

Try Ben Almans BBQ plugin . It is very good. It utilises the hash tag to persist changes into the browser history cache. UI tabs demo here .