Hash tag, query string, and Ajaxified search resul

Question

I have a search form that automatically sends POST data my web application whenever something in the form changes. The web application (written in PHP/CodeIgniter) accepts POST or GET and returns the proper results and displays it on the page. Everything works fine.

Now, my concern is that the URL does not reflect the query parameters needed to get the current search results. So, if someone copied the address and shared it, the people clicking on that URL won't see the intended data. Same problem with book marking, etc.

It's possible to update the query string in jQuery, but that forces the browser to redirect to the new URL (which when it does, the page shows the correct search results because the web application was actually originally written to work non-JS). That redirecting means the Ajaxifying efforts were wasted.

Seems like hash # can be used to update the address without making the browser redirect, but I can't seem to use that information in non-JS situation (I can't access that info via GET).

What approach should I be using for this problem?

Answer 1

HTML5 browsers support History pushState which can update the browser's url without refreshing the page.

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

You can add support for browsers that do not support it with history.js