CODEWITHSUNDEEP
jqueryasp.net
Karthik Peddi
Karthik Peddi

Reputation: 1

modifying query string in url without reloading

am filtering the products by passing the querystring. but problem is that every time i select a filter querysting is appending to url and reloading the page. i don't want to reload the page just pass the querystring and filter the products by making the ajax call. just like flipkart is doing

this is my page

please let me help with these.

Upvotes: 0

Views: 1002

Answers (2)

Fabio Nolasco
Fabio Nolasco

Reputation: 7492

Some HTML5 compatible web browsers has implemented an History API that can be used for something similar to what you want:

if (history.pushState) {
    var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?myNewUrlQuery=1';
    window.history.pushState({path:newurl},'',newurl);
}

I tested, and it worked fine. It does not reload the page, but it only allows you to change the URL query. You would not be able to change the protocol or the host values.

For more information:

http://diveintohtml5.info/history.html

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

Upvotes: 0

Wolf
Wolf

Reputation: 2150

You can use jquery ajax. It is too simple

You need to create an ashx/asmx page which will return the results based on the url parameters passed. I suggest to return a JSON as the result.

jQuery ajax can be used as below. jQuery API

$.ajax({
  url: "GetItems.ashx?design=1";
}).done(function() { 
  alert("Got the results");
});

Then you can use jQuery templates to render the JSON data. jQuery API

Upvotes: 4

Related Questions