CODEWITHSUNDEEP
javascriptjqueryappend
Fuego DeBassi
Fuego DeBassi

Reputation: 3017

Append a param onto the current URL

I'd like to have a little easter egg button in the corner of a project site. When clicked, it just drops a string onto the current url and reloads the page.

So if I'm on: http://test.com/projects/view/134

The button is clicked

Page reload on: http://test.com/projects/view/134?ts=true

Not really sure how I might go about doing so though.

Upvotes: 28

Views: 89034

Answers (10)

Malik Zahid
Malik Zahid

Reputation: 745

HTML5 introduced the history.pushState(page, caption, replace_url) that should not reload your page. OR if you want to modify while page load you can do this.

var currentURL = www.getitsol.com;
window.location.replace(currentURL + "?data=" + data.result, "_self");

Upvotes: 0

harttle
harttle

Reputation: 98

Make full use of the location DOM API, and count in hash:

location.protocol + '//' + location.hostname + location.pathname + 
    (location.search ? location.search + '&a=b' : '?a=b') +
    location.hash;

Upvotes: 6

Babacar Diop
Babacar Diop

Reputation: 21

See the documentation of the history API :

https://developer.mozilla.org/en-US/docs/Web/API/History_API

Example of usage:

var obj = { Title: title, Url: url }; history.pushState(obj, obj.Title, obj.Url);

Upvotes: 1

Vianney Bajart
Vianney Bajart

Reputation: 8270

Using:

Example:

var url = new URL("http://foo.bar/?x=1&y=2");

// If your expected result is "http://foo.bar/?x=1&y=2&x=42"
url.searchParams.append('x', 42);

// If your expected result is "http://foo.bar/?x=42&y=2"
url.searchParams.set('x', 42);

// Build result
url.toString();

Upvotes: 17

Envil
Envil

Reputation: 2727

An improvement from @Bobbzorzen answer, with ability to delete param by passing its name only:

function AlterQueryString(param, val) {
    var queryString = window.location.search.replace("?", "");
    var parameterListRaw = queryString == "" ? [] : queryString.split("&");
    var parameterList = {};
    for (var i = 0; i < parameterListRaw.length; i++) {
        var parameter = parameterListRaw[i].split("=");
        if (typeof val != 'undefined') {
            parameterList[parameter[0]] = parameter[1];
        } else if (param != parameter[0]) {
            parameterList[parameter[0]] = parameter[1];
        }
    }
    if (typeof val != 'undefined') {
        parameterList[param] = val;
    }

    var newQueryString = Object.keys(parameterList).length > 0 ? "?" : "";
    for (var item in parameterList) {
        if (parameterList.hasOwnProperty(item)) {
            newQueryString += item + "=" + parameterList[item] + "&";
        }
    }
    newQueryString = newQueryString.replace(/&$/, "");
    return location.origin + location.pathname + newQueryString;
}

gist: https://gist.github.com/envil/bc1832503bef55ffdabb0cde32bb06f1

Upvotes: 0

Bobbzorzen
Bobbzorzen

Reputation: 101

I found the previous answers lacking and as such here is a method that better handles other parameters in current querystring

appendToQueryString = function (param, val) {
    var queryString = window.location.search.replace("?", "");
    var parameterListRaw = queryString == "" ? [] : queryString.split("&");
    var parameterList = {};
    for (var i = 0; i < parameterListRaw.length; i++) {
        var parameter = parameterListRaw[i].split("=");
        parameterList[parameter[0]] = parameter[1];
    }
    parameterList[param] = val;

    var newQueryString = "?";
    for (var item in parameterList) {
        if (parameterList.hasOwnProperty(item)) {
            newQueryString += item + "=" + parameterList[item] + "&";
        }
    }
    newQueryString = newQueryString.replace(/&$/, "");
    return location.origin + location.pathname + newQueryString;
}

You have to use location.href = appendToQueryString(ts, true) to actually reload the page.

Upvotes: 3

Chamika Sandamal
Chamika Sandamal

Reputation: 24302

try this code,

var separator = (window.location.href.indexOf("?")===-1)?"?":"&";
window.location.href = window.location.href + separator + "ts=true";

EDITS: to avoid duplicated parameter or very large string in your url, you need to replace the old param it already exists.

var url=window.location.href,
    separator = (url.indexOf("?")===-1)?"?":"&",
    newParam=separator + "ts=true";
    newUrl=url.replace(newParam,"");
    newUrl+=newParam;
    window.location.href =newUrl;

Upvotes: 34

fabiangebert
fabiangebert

Reputation: 2623

If you want to account for the potential existence of a hash "#" in the URL, proceed as follows:

var href = location.href;
var hasQuery = href.indexOf("?") + 1;
var hasHash = href.indexOf("#") + 1;
var appendix = (hasQuery ? "&" : "?") + "ts=true";
location.href = hasHash ? href.replace("#", appendix + "#") : href + appendix;

Upvotes: 3

Adam Rackis
Adam Rackis

Reputation: 83358

You can assign location.href to the value it currently has, plus your new querystring:

(edited to be friendly to existing querystrings) 

$("#yourButtonId").click({
    var loc = location.href;
    if (loc.indexOf("?") === -1)
       loc += "?";
    else
       loc += "&";
    location.href = loc + "ts=true";
});

Or to be more succinct:

$("#yourButtonId").click({
    var loc = location.href;        
    loc += loc.indexOf("?") === -1 ? "?" : "&";

    location.href = loc + "ts=true";
});

Upvotes: 27

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

Do you mean:


$(document).ready(function() {
    $("#yourButtonId").click(function() {
       var currentUrl = window.location.pathname + "?ts=true";
    });
});

Upvotes: 2

Related Questions