modifying query string in url without reloading

Question

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.

So why even append to the url ? Can you not store your selected values in local variables and then make the ajax call ? — Ravi Y
– Ravi Y, Commented Jan 1, 2013 at 7:24
a link to your web page is not a substitute for posting the relevant code in your question. There can be many scripts in a page and in the future the url may change rendering your post useless for future visitors with similar problems — charlietfl
– charlietfl, Commented Jan 1, 2013 at 7:36

Wolf · Accepted Answer · 2013-01-01 08:14:47Z

4

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

answered Jan 1, 2013 at 8:14

Wolf

2,1351 gold badge15 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Karthik Peddi Over a year ago

besides i want to bookmark the url of the filtered stuff. i think these way passing query sting to ajax and returning the result. am passing to browser url. for reference see filpkart link above and let me confirm does flipkart funcationality happens by said method. thanking you

Wolf Over a year ago

For this you can use some URL hash/fragment based techniques. In th e URL, put a # and save your data after that. Checkout jQuery BBQ. This can be used for processing the URL values. deparam.fragment() can be used for this

Karthik Peddi Over a year ago

how to push the state with same keys for different values. for ex: design=1 and design=2 but the problems is that its replacing the value of design while i was pushing another value from design key. because i need both design=1&design=2 in the querystring so that i can filter accordingly please help me with these

Wolf Over a year ago

It is not good idea to use same keys more than once. Instead you could use design=1#2 or something similar to this.

Fabio Nolasco · Accepted Answer · 2013-10-09 17:57:58Z

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

Collectives™ on Stack Overflow

modifying query string in url without reloading

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related