Change page URL without page refresh

Question

Is it possible?

Here's the problem:

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

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

when I do a slider search, it’s obvious that 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 is sent via GET with the price as a GET variable)

I want to do this because I want the search results from the slider to be bookmarked ... or is there an alternative way to do this?

Answer 1

You can use the hash URL (search # price = 100) using the window.location.hash methods. They will receive bookmarks, and the user will be able to navigate through them using the back and forward buttons.

Usage example:

 <a href="#">100</a> $('a').click(function() { window.location.hash = 'price='+$(this).html(); return false; }); 

Sets the URL search#price=100 without updating.

Answer 2

The best I can offer for this is to use a hash in the url. This will allow users to add a URL and maintain status when they return. Another advantage is that you can change the hash without refreshing the page.

So your url will look something like this: http: // localhost / thi / search? Keyword = key # price = 100

The jQuery Address plugin works great for this.

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

Answer 3

With HTML5, this is possible. Use window.history.pushState ().

Example:

 if(currentHref!=window.location){ window.history.pushState({path:currentHref},'',currentHref); } 

Details and explanations: http://tinywall.info/2012/02/22/change-browser-url-without-page-reload-refresh-with-ajax-request-using-javascript-html5-history-api-php- jquery-like-facebook-github-navigation-menu /