Vyshnavi Samudrala Vyshnavi Samudrala - 4 months ago 6
Ajax Question

Modify specific parameter value in the URL without reloading the page

I have a URL

http://localhost/revamp/search.php?city=chennai&V&locality=mylapore&sort_val=sort_price


In this URL, I just need to update the
sort_val=sort_distance
in the URL on selecting the distance option without reloading the page.

<select name="sort_val" class="sort_select">
<option value="sort_distance">Sort by Distance</option>
<option value="sort_price">Sort by Price</option>
<option value="sort_ratings">Sort by Ratings</option>
</select>

Answer

Hi you can use below solution, I hope it will helps to you.

$(document).ready(function(){
    var queries = {};
    $.each(document.location.search.substr(1).split('&'), function(c,q){
        var i = q.split('=');
        queries[i[0].toString()] = unescape(i[1].toString()); // change escaped characters in actual format
    });
    $(".sort_select").change(function(){
       queries[$(this).attr('name')]=$(this).val();
     history.pushState({}, '', "?"+$.param(queries));
    });
})

Thanks :)