CODEWITHSUNDEEP
javascriptjquerywordpress
Ryan
Ryan

Reputation: 37

window.location.href appends instead or redirecting

I'm trying to redirect the browser to the current page but with new parameters when the user selects and option from a drop down.

From debugging i can see the url i'm trying to go to is exactly as i want it but when i do window.location.href (i've also tried replace() etc.) it just appends the new arguments to the current url instead of replacing it.

I've tried for two days now to fix this and it's driving me crazy, i've tried every solution i've found online and so far nothing has worked. Hoping someone can help me out here.

an example address i'm trying to achieve and the the script creates is 'http://localhost/wordpress/showroom/?page=2&orderby=price&order=asc'

but instead i get 'http://localhost/wordpress/showroom/?page=2&orderby=price&order=asc&orderby=price&order=dsc'

event though the script produces 'http://localhost/wordpress/showroom/?page=2&orderby=price&order=dsc'

this is my select

<select id="post-sort">
 <option value="orderby=price&order=desc">Price - Highest First</option>
 <option value="orderby=price&order=asc">Price - Lowest First</option>
 <option value="orderby=year&order=desc">Age - Newest First</option>
 <option value="orderby=year&order=asc">Age - Lowest First</option>
</select>

and this is my javascript function

$(document).ready(function () {
    $("#post-sort").on('change', function (event) {

        var sortValue = this.value;
        var url = JSON.parse(JSON.stringify(window.location.href));

        //get param string
        var urlParamsSection = url.split('?')[1];

        //If has params
        if (urlParamsSection) {
            //Split params
            var urlParams = urlParamsSection.split('&');
            //Loop all params
            urlParams.forEach(urlParam => {
                //if param contains order var => remove
                if (urlParam.indexOf('order') > -1) {
                    url.replace('&' + urlParam, '');
                }
            });

            url += '&' + sortValue;
        } else {
            url += '?' + sortValue;
        }

        console.log(url);
        window.location.href = url;
        return false;
    });
});

Upvotes: 2

Views: 2532

Answers (3)

Pedram
Pedram

Reputation: 16575

Use URL object, and use params.set() method to append parameters

$("#post-sort").on('change', function(e) {

  let url = new URL('https://stackoverflow.com'); // new URL(window.location.href)
  let params = url.searchParams;
  let orderby = $('option:selected', this).data('orderby');
  let order = $('option:selected', this).data('order');

  params.set('orderby', orderby);
  params.set('order', order);

  console.log(url);
  //window.location.href = url;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="post-sort">
  <option data-orderby="price" data-order="desc" value="1">Price - Highest First</option>
  <option data-orderby="price" data-order="asc" value="2">Price - Lowest First</option>
  <option data-orderby="year" data-order="desc" value="3">Age - Newest First</option>
  <option data-orderby="year" data-order="asc" value="4">Age - Lowest First</option>
</select>

And also do not use params in value, one option you can use as data attribute.

Upvotes: 1

vadivel a
vadivel a

Reputation: 1794

Hope this help you.

window.history.pushState("http://example.ca", "Sample Title", "/example/path.html");

Upvotes: 1

harsh_apache
harsh_apache

Reputation: 443

Use window.location = url instead of window.location.href

  console.log(url);
  window.location = url;

Upvotes: 1

Related Questions