changing page url without refreshing page

Question

Is this even possible?

Here's the problem:

I have a keyword search with this URL(after searching) : http://localhost/thi/search?keyword=key

Then I have a slider search which uses the AjaxForm plugin (jquery)...

when I perform a slider search, obviously I will still be in the keyword search URL (because the request is sent via ajax)

Is there a way to change the current url to something like http://localhost/thi/search?price=100 (the slider submits via GET with price as a GET variable)

I wish to do so because I want the search results from the slider to be bookmarked...or is there any alternative way of doing this?

Answer 1

The best thing I can suggest for this would be to use the hash in the url. This will allow users to bookmark the url and still keep state when they come back. The other benefit is that you can change the hash without refreshing the page.

So your url would look something like...http://localhost/thi/search?keyword=key#price=100

The JQuery Address plugin would work really well for this.

http://www.asual.com/jquery/address/

Answer 2

You can use hash urls (search#price=100) with window.location.hash methods. These will get bookmarked and user can navigate through these with back and forward buttons.

Usage sample:

<a href="#">100</a>

$('a').click(function() {
    window.location.hash = 'price='+$(this).html();
    return false;
});

Will set the url to search#price=100 without refreshing.