CODEWITHSUNDEEP
phpjqueryajax
yretuta
yretuta

Reputation: 8091

changing page url without refreshing page

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?

Upvotes: 1

Views: 6270

Answers (3)

Fedir RYKHTIK
Fedir RYKHTIK

Reputation: 9974

With HTML5 it's 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/

Upvotes: 3

Tatu Ulmanen
Tatu Ulmanen

Reputation: 124768

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.

Upvotes: 8

Chris Gutierrez
Chris Gutierrez

Reputation: 4755

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/

Upvotes: 3

Related Questions