CODEWITHSUNDEEP
javascriptjquery
Mathematics
Mathematics

Reputation: 7618

Ok, I got my query string now how to remove it without page refreshing

I got my query string in document. ready but then I want to remove it and save value in a global variable without refreshing the page, but it just never happens..

var globalVar = null;

$(document).ready(function () {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    results == null ? null : decodeURIComponent(results[1].replace(/\+/g, " "));

    if (results != null)
        globalVar = results[1];

     window.location.search = '';
});

This code keeps reloading page forever

Edit

Here is what is happening,

User gets email to a link, to select right row in table on the site, we are using querystring as using hash doesn't work (TMG server removes it), so once user gets on the site, we don't need query string anymore as we are using hash (because hash don't refresh page on change.)

Edit 2

Why don't want to keep query string and hash ?

because I can update hash without refresh whereas updating querystring refreshes the page :(, so i don't want it to be like

www.example.com/sites/fruitstore?fruitid=123#fruitid=432

Upvotes: 1

Views: 134

Answers (5)

Bergi
Bergi

Reputation: 664425

window.location.search = '';

This code keeps reloading page forever

Yeah, obviously. Instead, use

if (location.search != '')
    location.search = '';

once user gets on the site, we don't need query string anymore as we are using hash (because hash don't refresh page on change.)

You also might want to try the history API, so that you always have a copy-and-pastable querystring URL in the location bar.

Upvotes: 0

J David Smith
J David Smith

Reputation: 4810

Use the history API for this:

window.history.replaceState({}, document.title,
                            window.location.href.split('?')[0]);

replaceState replaces the current history entry with the given values. The first parameter is a data parameter, which is not used in this example. The second parameter is the window title. The final parameter is the new URL. The split takes everything before the beginning of the query parameters. If you need things that follow a #, then you'll have to use a more complicated URL re-building function.

replaceState does not add a new entry to history, which keeps you from filling the history with useless values.

See this answer for more information.

Upvotes: 0

benzkji
benzkji

Reputation: 1867

you'll need the history API of modern browsers, to concrete, pushState will do it.

reference

and you'll probably want to use a library, as f.e. history.js, as handling different browsers can be very tricky...

Upvotes: 0

dweeves
dweeves

Reputation: 5605

I think your "reloading" problem comes from this line:

window.location.search = ''

This SO answer will give you the good method to handle browser URL history:

Upvotes: 0

Fresheyeball
Fresheyeball

Reputation: 30015

You need to use the history api instead of just setting the location to something new.

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

pushstate or replaceState will allow you to change the url displayed in the browser without a page refresh.

This script could also help you out: https://github.com/browserstate/history.js/

Upvotes: 4

Related Questions