Add parameters to url without refresh

Question

I want to add parameters to url without refreshing the page. I have used history.pushState and history.replaceState. I put a debugger on the function in javascript, when I debug history.pushState, it replaces the url, but then it changes again to the previous.

What I want to is, e.g. below is my url

.../?id=1

Now I will click on one of my filters and the url must be as follows

.../?id=1,2

Then I will click on Search button to apply filter. What should be the best practices?

Best practice is to not try and make the browser do something it's designed not to do. Change the Url when the search button is clicked. — Reinstate Monica Cellio, Jun 22 '17 at 13:39
Possible duplicate of [Appending parameter to URL without refresh](https://stackoverflow.com/questions/32828160/appending-parameter-to-url-without-refresh) — Sandman, Jun 22 '17 at 13:40

score 1 · Answer 1 · edited Jan 07 '19 at 20:49

1

You can use the following code to add parameters without refresh:

window.history.replaceState(null, null, "?param1=value");

edited Jan 07 '19 at 20:49

סטנלי גרונן

2,740
21
43
62

answered Jan 07 '19 at 18:48

Santosh Ulbetti

19
3

score 0 · Answer 2 · answered Jun 22 '17 at 14:01

0

here is a good example to follow:

https://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/

You can use in filters comands like: onchange, onclick etc. for instant modification of URL

answered Jun 22 '17 at 14:01

Sergiu Costas

480
4
7
24

score -2 · Answer 3 · answered Jun 22 '17 at 13:38

-2

Better don't change your URL before you apply your filter. Save your filter parameters in some object, and change URL after user clicks submit

answered Jun 22 '17 at 13:38

Winni

75
6

This should be a comment. – Sandman Jun 22 '17 at 13:39

Add parameters to url without refresh

3 Answers3