How to use jquery to manipulate the querystring

Question

I have a select dropdown with id\'s mapped to values. On the onChange event I want to redirect to the same url but with \'id=value\' appended to the querystring.

How do

Answer 1

Based on CoffeeMonster's answer:

There is a problem when the location.href contains a hash part:

www.example.com#hash becomes www.example.com#hash?id=whatever which results in ?id=whatever not being interpreted by the server.

Fixed it by removing the hash part of the url: url.split("#")[0];

// put function into jQuery namespace
jQuery.redirect = function(url, params) {

    url = url || window.location.href || '';
    url = url.split("#")[0];
    url =  url.match(/\?/) ? url : url + '?';

    for ( var key in params ) {
        var re = RegExp( ';?' + key + '=?[^&;]*', 'g' );
        url = url.replace( re, '');
        url += ';' + key + '=' + params[key]; 
    }  
    // cleanup url 
    url = url.replace(/[;&]$/, '');
    url = url.replace(/\?[;&]/, '?'); 
    url = url.replace(/[;&]{2}/g, ';');
    // $(location).attr('href', url);
    window.location.replace( url ); 
};

Now www.example.com#hash becomes www.example.com?id=whatever

Answer 2

This works like a charm:

jQuery.redirect = function( url ) {
   window.location.replace( url );  
};
$( "#selector" ).change( function() {
    var href = window.location.href.substring( 0, window.location.href.indexOf( '?' ) );
    $.redirect( href + '?id=' + $( this ).val() );
} );

Answer 3

setting window.location.search will update the url's query string (and overwrite a value if it already exits)

$('#selector').change(function(){  
  window.location.search = "id=" + $(this).val();
}); 

Answer 4

I ended up going with a RegExp match to override the options. jQuery.param takes a hash and serialises it to a query_string but it doesn't provide the inverse (breaking up a query_string).

// put function into jQuery namespace
jQuery.redirect = function(url, params) {

    url = url || window.location.href || '';
    url =  url.match(/\?/) ? url : url + '?';

    for ( var key in params ) {
        var re = RegExp( ';?' + key + '=?[^&;]*', 'g' );
        url = url.replace( re, '');
        url += ';' + key + '=' + params[key]; 
    }  
    // cleanup url 
    url = url.replace(/[;&]$/, '');
    url = url.replace(/\?[;&]/, '?'); 
    url = url.replace(/[;&]{2}/g, ';');
    // $(location).attr('href', url);
    window.location.replace( url ); 
};

Then in the html

$('#selector').change(function(){ 
   $.redirect( location.href, { id : $(this).val() })
})

Thanks to everyone that responded.

Answer 5

I suspect the alleged solution is not working with specific variable names. Especially the line:

RegExp( ';?' + key + '=?[^&;]*', 'g' )

If key is a character sequence present elsewhere within the querystring, that occurrence will be mistakenly replaced also (try one letter, e.g. 'a'). This is because the regex leaves the string boundaries open (leading ';' and trailing '=' are both optional). Maybe the epxression better be something like:

RegExp( '[;&]' + key + '=?[^&;]*', 'g' )

Though I haven't tested it yet.

Answer 6

Try using the split function:

var url = location.href.split('?')[0] + '?;id=' + $(this).val();

split returns a list made up of the string split up by the string (like '?'), with that string removed.