Modify a parameter in url with page reload using js/jquery

Question

I have a url like result?graphType=default&product=xyzzzz&shop=11

I just want to change value of graphType, when user clicks a button. On click of that button i store some value in a variable, and i want to replace graphType=default with graphType=my_new_value in my url without reload. I don't understand how to split url at graphType= . and even if I am able to split to url at graphType, how can I replace default (which can be something else as well depending on user options) with my variable

You could start with window.location.search to return any url parameters... — NewToJS
– NewToJS, Commented Aug 4, 2016 at 6:10
url without reload : as soon as you change the URL; browser will reload it. Its a part of URL which you are going to change and hence reload. Its not in your hand. — vijayP
– vijayP, Commented Aug 4, 2016 at 6:15

Haresh Vidja · Accepted Answer · 2016-08-04 06:24:32Z

7

I think your solution should be like this

$(document).ready(function(){
    var queries = {};
    $.each(document.location.search.substr(1).split('&'), function(c,q){
        var i = q.split('=');
        queries[i[0].toString()] = unescape(i[1].toString()); // change escaped characters in actual format
    });

    // modify your parameter value and reload page using below two lines
    queries['your key']='your value';

    document.location.href="?"+$.param(queries); // it reload page
    //OR
    history.pushState({}, '', "?"+$.param(queries)); // it change url but not reload page
});

answered Aug 4, 2016 at 6:24

Haresh Vidja

8,4713 gold badges29 silver badges44 bronze badges

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

5 Comments

Ishita Over a year ago

Thanks heaps. Exactly what I was looking for

Haresh Vidja Over a year ago

Glad to hear from you.. dont forget to give up vote and mark as correct.. I strangly like heaps word :D

Haresh Vidja Over a year ago

please do up vote also, now you have enough repuaions 15+, thanks

iconique Over a year ago

Thanks for ur good answer. just a question. is it possible to make the browser work with the pushed state on history back? when I click the history back button of browser, pushed states don't work... only after a refresh, those are applied to page content. anyways, thanks a lot!

Haresh Vidja Over a year ago

@TaiJinYuan , I think You need to use pop method for history back, hope it will be work.

Collectives™ on Stack Overflow

Modify a parameter in url with page reload using js/jquery

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related