Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use jquery to manipulate the querystring

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 I check that this 'id' option isn't already in the querystring (I don't want multiple values) and replace / append as necessary.

How do I check if '?' is already in the querystring and append to the url if its not.

Is there an easy way with jquery to do this?

It must do something similar under the hood for $().ajax(url, {options}) calls. I was hoping I could just do $().redirect( url, { id : $(this).val() }) or somesuch.

Thanks in advance.

Note: This page may or may not have a few different query options passed in (which set defaults on other form options) so replacing the whole querystring is not an option.

<html>
<head><script type="text/javascript" src="/jquery-1.3.2.min.js"></script></head>
<body>
  <script>
    $(function(){                                                                                                                                         
        $('#selector').change(function(){                                                                                                                 
            // problem if 'id' option already exists
            var url = location.href + '?;id=' + $(this).val();                                                                                            
            location.assign( url );
        });                                                                                                                                               
    });                                                                                                                                                   
  </script>

  <a href="#" onclick="location.assign( location.pathname )">reset</a>                                                                                      
  <form>                                                                                                                                                    
    <select id='selector' name='id'>                                                                                                                      
        <option value='1'>one</option>                                                                                                                    
        <option value='2'>two</option>                                                                                                                    
        <option value='3'>three</option>                                                                                                                  
    </select>                                                                                                                                             
  </form>
</body>
</html>
like image 452
CoffeeMonster Avatar asked Jan 12 '10 23:01

CoffeeMonster


People also ask

How to get query string from URL using jQuery?

I need to get the value of location from the URL into a variable and then use it in jQuery code: var thequerystring = "getthequerystringhere" $('html,body'). animate({scrollTop: $("div#" + thequerystring).


2 Answers

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.

like image 96
CoffeeMonster Avatar answered Sep 22 '22 17:09

CoffeeMonster


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();
}); 
like image 21
Alpha Codemonkey Avatar answered Sep 25 '22 17:09

Alpha Codemonkey