Jquery/javascript detect and capture page refresh events?

Question

I have an AJAXed page, but I also offer a query string to the user so that he/she may type in the query string to the url to see the same page again. (Think google maps and its "share link" feature).

When the AJAX request occurs I update the query string presented to the user, but the actual URL does not change. The problem is, if a user refreshes the page, all the DOM elements created from AJAX disappear.

What I want to do is have javascript capture the refresh event, and instead of refreshing the page, redirect the user to the page plus the query string.

ie if query string is: ?data=blah&stuff=bleh

then instead of refreshing page back to www.example.com, refreshing would lead the user to www.example.com/?data=blah&stuff=bleh

Answer 1

You can't change the querystring...without the browser actually leaving the page and fetching a new one (kind of killing the point of AJAX).

You can go to a hash though, like this: www.example.com/#data=blah&stuff=bleh

In your script just set the window.location.hash, e.g.:

window.location.hash = "data=blah$stuff=bleh";

When your page loads, you'll need to actually use the hash...for example: using it as the data parameter to do the same AJAX call you made before.