jQuery/Javascript - reload current page with an appended querystring?

Question

I\'ve got a dropdown menu on my form, which when something is selected I need to reload the current page, but with an appended querystring.

How would I go about doing th

Answer 1

If you want a really simple way to preserve the query string and possibly append to it, use window.location.search; here's a snippet:

var search = window.location.search + (window.location.search ? "&" : "?");
                search += "param1=foo&param2=bar";
                window.location.href = window.location.protocol + "//" + window.location.host + window.location.pathname + search;

You can, of course, use a more sophisticated way of building the rest of your query string, as found in the other examples, but the key is to leverage Location.search.

Answer 2

If you have an existing querystring that you'd like to keep then this version does that and adds your new params to any existing ones. The keys are converted to lowercase so that duplicates are not added. Maintaining the quersytring does make the solution more complicated, so I'd only do this if you need to.

$("#sortby").change(function () {

    var queryString = getQueryStrings();
    // Add new params to the querystring dictionary
    queryString["sortby"] = $("#sortby").val();

    window.location.href =
        window.location.protocol + "//" +
        window.location.host +
        window.location.pathname +
        createQueryString(queryString);
});


// http://stackoverflow.com/questions/2907482
// Gets Querystring from window.location and converts all keys to lowercase
function getQueryStrings() {
    var assoc = {};
    var decode = function (s) { return decodeURIComponent(s.replace(/\+/g, " ")); };
    var queryString = location.search.substring(1);
    var keyValues = queryString.split('&');

    for (var i in keyValues) {
        var key = keyValues[i].split('=');
        if (key.length > 1) {
            assoc[decode(key[0]).toLowerCase()] = decode(key[1]);
        }
    }

    return assoc;
}

function createQueryString(queryDict) {
    var queryStringBits = [];
    for (var key in queryDict) {
        if (queryDict.hasOwnProperty(key)) {
            queryStringBits.push(key + "=" + queryDict[key]);
        }
    }
    return queryStringBits.length > 0
        ? "?" + queryStringBits.join("&")
        : "";
}

Answer 3

I was having a requirement to open a particular tab after reloading. So I just needed to append the #tabs-4 to the current url. I know its irrelevant to current post but it could help others who come to this just like I did.

Using the code

window.location = window.location.pathname 
            + window.location.search + '#tabs-4';

did'nt work for me but below code did.

location = "#tabs-4";
location.reload(true);

Answer 4

If you go with the top rated answer, you may want to replace

http://

in the code with

window.location.protocol

so that it works for other protocols, like https or file. So

window.location.href = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + params.join('&');

Answer 5

This is an old question but it came up first in google search results.

The solution I went with is similar to jAndy's.

window.location.pathname gives me the page's url without the query string. I'm then able to build the query string with "?"+$.param({'foo':'bar','base':'ball'}) which I then append to the pathname and set to window.location.href.

window.location.href = window.location.pathname+"?"+$.param({'foo':'bar','base':'ball'})

Answer 6

var params = [
    "foo=bar",
    "base=ball"
];

window.location.href =
    "http://" +
    window.location.host +
    window.location.pathname +
    '?' + params.join('&');

That code within your change event handler will do the trick.

For instance:

$('#my_dropdown_id').bind('change', function(){
    var params = [
        "foo=bar",
        "base=" + $(this).val()
    ];

    window.location.href = "http://" + window.location.host + window.location.pathname + '?' + params.join('&');
});