How to refresh a page with jQuery by passing a parameter to URL

Question

I am refreshing my page using jQuery:

location.reload();

This is working great but I want to refresh the same page by passing a parameter to URL.

How can I do this by using jQuery?

Ex:

If my url is www.myweb.com, I want to refresh this by passing a parameter like this

  www.myweb.com?single

Thank you

If this is literally what you want, most of the answers here will work. But if what you actually want is to reload the page with altered request parameters, refer to my answer: http://stackoverflow.com/a/33361578/1450294 — Michael Scheper, Oct 27 '15 at 06:54

score 62 · Accepted Answer · edited May 10 '21 at 10:24

62

You should be able to accomplish this by using location.href

if(window.location.hostname == "www.myweb.com")
   window.location.href += "?single";

edited May 10 '21 at 10:24

Jean Pierre

3
3

answered Mar 08 '11 at 13:24

Mark Coleman

40,542
9
81
101

Thank You this is working great. But i am getting problem from the next refresh. – KillerFish Mar 08 '11 at 13:28
1

First time url is : www.myweb.com/?single second time url is : www.myweb.com/?single?single How can i avoid repeated parameters ? – KillerFish Mar 08 '11 at 13:30
1

`if(window.location.hostname == "www.myweb.com" && window.location.search != '?single')` ? – karim79 Mar 08 '11 at 13:32
instead of using `.hostname` you could try to use `href` as it will be the full url. other options on the location object are found here : https://developer.mozilla.org/en/DOM/window.location – Mark Coleman Mar 08 '11 at 13:33
@KillerFish: A less hackish solution: http://stackoverflow.com/a/33361578/1450294 – Michael Scheper Oct 27 '15 at 06:54

Rui Seixas Monteiro · Answer 2 · 2012-08-25T16:11:05.127

57

I would use REGEX with .replace like this:

window.location.href = window.location.href.replace( /[\?#].*|$/, "?single" );

edited Aug 25 '12 at 16:11

answered Aug 25 '12 at 03:14

Rui Seixas Monteiro

679
5
4

1

This method is very good because it does not append a parameter to an existing parameters! – Benny Code Apr 21 '13 at 00:22
1

@BennyNeugebauer: Sometimes, though, you'll want to keep the existing parameters. For those cases, see this: http://stackoverflow.com/a/33361578/1450294 – Michael Scheper Oct 27 '15 at 06:56
Elegant solution! I've searched far and wide to find this. – Paintoshi Sep 02 '16 at 12:40

Fábio Nicolau de Lima · Answer 3 · 2019-07-31T17:07:00.580

28

You can use Javascript URLSearchParams.

var url = new URL(window.location.href);
url.searchParams.set('single','');
window.location.href = url.href;

[UPDATE]: If IE support is a need, check this thread:

SCRIPT5009: 'URLSearchParams' is undefined in IE 11

Thanks @john-m to talk about the IE support

edited Jul 31 '19 at 17:07

answered Mar 07 '18 at 00:56

Fábio Nicolau de Lima

1,484
15
12

If IE support is a need, check this thread: https://stackoverflow.com/questions/45758837/script5009-urlsearchparams-is-undefined-in-ie-11 – Fábio Nicolau de Lima Jul 31 '19 at 17:03

score 3 · Answer 4 · edited Dec 30 '14 at 21:18

You could simply have just done:

var varAppend = "?single";
window.location.href = window.location.href.replace(".com",".com" + varAppend);

Unlike the other answers provided, there is no needless conditional check. If you design your project properly, you'll let the interface make the decision making and calling that statement whenever an event has been triggered.

Since there will only be one ".com" in your url, it will just replace .com with .com?single. I just added varAppend just in case you want to make it easier to modify the code in the future with different kinds of url variables.

One other note: The .replace works by adding to the href since href returns a string containing the full url address information.

score 3 · Answer 5 · answered Nov 13 '14 at 14:47

if window.location.hash is empty, you cant assign to location.href a new value without using a correct function (at least tested in chrome).

try the window.location.replace:

if (!window.location.hash) 
    {
        window.location.replace(window.location.href + "?single")
    }

score 3 · Answer 6 · edited May 23 '17 at 11:47

Click these links to see these more flexible and robust solutions. They're answers to a similar question:

With jQuery and the query plug-in: window.location.search = jQuery.query.set('single', true);
Without jQuery: Use parse and stringify on window.location.search

These allow you to programmatically set the parameter, and, unlike the other hacks suggested for this question, won't break for URLs that already have a parameter, or if something else isn't quite what you thought might happen.

score 3 · Answer 7 · answered Mar 08 '11 at 13:26

3

Concision counts: I prefer window.location = "?single"; or window.location += "?single";

answered Mar 08 '11 at 13:26

Ori

4,132
1
25
27

Kris Ivanov · Answer 8 · 2011-03-08T13:41:38.343

1

var singleText = "single";
var s = window.location.search;

if (s.indexOf(singleText) == -1) {
    window.location.href += (s.substring(0,1) == "?") ? "&" : "?" + singleText;
}

edited Mar 08 '11 at 13:41

answered Mar 08 '11 at 13:24

Kris Ivanov

10,476
1
24
35

score 0 · Answer 9 · answered Apr 29 '14 at 00:28

I'm using Jquery Load to handels this, works great for me. check out my code from my project. I need to refresh with arguments to put Javascript variable into php

if (isset($_GET['language'])){
    $language = $_GET['language'];
}else{
    echo '<script>';    
    echo '  var userLang = navigator.language || navigator.userLanguage;';
    echo '  if(userLang.search("zh") != -1) {';
    echo '      var language = "chn";';
    echo '  }else{';
    echo '      var language = "eng";';
    echo '  }';
    echo '$("html").load("index.php","language=" + language);';
    echo '</script>';
    die;
}

Or just add the url into the dom and then use jquery to pull it from the parameter. No need for an entire javascript code — ProfileTwist, Mar 10 '15 at 10:14

score 0 · Answer 10 · answered May 07 '21 at 12:29

I used this exact thing before, I have a custom function that I used for the if statement like mentioned by Mark Coleman aswell as submitted a shorter version of his answer but just for the kicks, here is my version

function isOfType(sParam) {
   var sPageURL = window.location.search.substring(1);
   var sURLVariables = sPageURL.split('&');
   var sParameterName = sURLVariables[0];
   return (sParameterName.toLowerCase() == sParam)
}

once you have that function you will use it like this

if(!isOfType('single'))
    window.location.href += '?single';

In 2021 there's not much point to this answer. Every modern browser now supports URLSearchParam.has() --> https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/has — Bart Jolling, May 07 '21 at 15:37

How to refresh a page with jQuery by passing a parameter to URL

10 Answers10

Linked