Javascript: window.location.search does not update?

Question

I need to update search (query) parameters in URL if user enters those in search panel (on a page). I'm trying this:

$( document ).ready(function() {
    if ($('.o_website_license_search_panel').length) {
        $('.o_website_license_search_panel .o_search_submit').click(function () {
            var search = $.deparam(window.location.search.substring(1));
            console.log('before update')
            console.log(window.location.search)
            search.license_key = $(".o_website_license_search_panel input[name='license_key']").val();
            console.log('new obj ', search, $.param(search))
            window.location.search = $.param(search);
            console.log('after update')
            console.log(window.location.search)
        });
    }
});

And I get this output:

before update
web.assets_frontend.js:1254 ?license_state=cancel
web.assets_frontend.js:1255 new obj  {license_state: "cancel", license_key: "test2"} license_state=cancel&license_key=test2
web.assets_frontend.js:1256 after update
web.assets_frontend.js:1257 ?license_state=cancel

As you can see window.location.search stays the same. Is there something I miss, or it is intended this way?..

score 6 · Accepted Answer · answered Jan 13 '18 at 12:06

6

Setting search (or any of the other properties on location other than hash) causes a reload of the page. The property will continue to have its previous value until that happens, which is why you see the previous value in your logging statements. After the old value is logged, unless code on your page is preventing it from happening, the page will be reloaded with the new query string, at which point location.search would reveal the new string.

More: window.location's properties on MDN

answered Jan 13 '18 at 12:06

T.J. Crowder

1,031,962
187
1,923
1,875

1

Thanks for explanation. Yes it was problem on my end. I had `form` with method `post` (for that same input `license_key`), which would trigger page reload too. So it looks like that one have taken priority and it would override JS part and I would not see `window.location.search` being updated. Once I disabled that form, `window.location.search` started being updated properly. – Andrius Jan 13 '18 at 12:12
1

This was my problem. I didn't know setting `location.search` would automatically reload the page, so I was doing it manually by calling `location.reload()`. Removing the call fixed the problem and it works perfectly now. – F1Krazy Apr 18 '19 at 10:00

Ezekiel · Answer 2 · 2018-01-13T13:04:13.370

0

You can use the history api provided by javascript also to help out, but to also let you know it won't refresh the page but change the browser url in the url pane, Cleverly done you can achieve what you want

Visit this link for more details

https://developer.mozilla.org/en-US/docs/Web/API/History_API

Note

Sometimes people use this method for ajax purpose, thereby enabling them to store history data and also for bookmarking

edited Jan 13 '18 at 13:04

answered Jan 13 '18 at 12:22

Ezekiel

671
5
13

Well I actually needed to have page refreshed, because it triggers controller's route which would do actual search by using query in `window.location.search`, but thanks for useful link anyway. – Andrius Jan 13 '18 at 12:24
Alright, this method, is usually widely used when you don't want to refresh but rather ajaxify to get a query and enable bookmarking and history at the same time. Such as the window.location.search parameters through a new ajax request – Ezekiel Jan 13 '18 at 13:01

Javascript: window.location.search does not update?

2 Answers2