Modify Query String Without new HTTP Request

Question

Is it possible to manipulate the query string without actually submitting a new HTTP request?

For example, I have a page that allows the user to make a bunch of changes to some configuration options. When they first go to the page it will be the following URL:

www.mysite.com/options

As they click certain elements on the page, a link here or a radio button there, the URL would be changed to something like:

www.mysite.com/options?xkj340834jadf

This way the user can copy the URL and later go to the same page and have the configuration be exactly how it was before, but I don't want to submit new requests as they click the options.

Is this something that is possible using javascript/jquery?

Jquery BBQ accomplishes this, but I don't know the mechanism, so only a comment. — Cory Kendall, Oct 27 '11 at 16:08
You might consider using a hash instead of a query string, which already does what you want. — Blazemonger, Oct 27 '11 at 16:08
possible duplicate of [how to change url in browser url box?](http://stackoverflow.com/questions/7372571/how-to-change-url-in-browser-url-box) and many other questions. — JJJ, Oct 27 '11 at 16:09

score 2 · Accepted Answer · edited May 23 '17 at 12:12

2

I don't think this is possible.

Your best solution would be to add an anchor tag to the end of the URL, which can then be read by jquery to determine a HTTP redirect.

I believe google also indexes when you use #! for this purpose.

What's the shebang/hashbang (#!) in Facebook and new Twitter URLs for?

edited May 23 '17 at 12:12

Community

1
1

answered Oct 27 '11 at 16:08

Curtis

101,612
66
270
352

score 0 · Answer 2 · answered Oct 27 '11 at 16:45

The best solution is by using hash. As Curt stated, #! is the way you tell Google that this is a webapp but if you don't need crawling, don't worry.

You can use then something like this:

var hash = location.hash; //or window.location.hash
hash = hash.replace(/^.*#!/, ''); // strip #! from the values
//do something with the values you got stored in `hash` var

If you need other things to happen, like everytime the hash changes, you do something, you can bind the 'hashchange' event.For example:

I use jQuery hashchange event by Ben Alman for that:

$(window).hashchange( function(){
    var hash = location.hash;
    hash = hash.replace(/^.*#!/, '');

    // do something with 'hash' everytime it changes
    // EXAMPLE:Set the page title based on the hash.
    document.title = 'The hash is '+hash+'.';

    return false; //this prevent browser from following the # after doing what you wanted
});

Modify Query String Without new HTTP Request

2 Answers2