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?..

Glamorize

Answer 1

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

Caseate

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. – Glamorize

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. – Mansard

Answer 2

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

Rectal

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. – Glamorize

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 – Rectal