Change URL in address bar after click on DOM element with javascript/jquery

Question

is there any way to change the URL in browser without reloading page after click a DOM element?

    $('#filter_form').on('change', function () {
        $.ajax(options);
        //change the browser URL
    });

Ex:

Before: http://somepage.com/filters

After: http://somepage.com/filters?type=apartment

T.J. Crowder · Accepted Answer · 2016-03-16 07:59:01Z

6

Yes, this is possible with the history API. Both history.pushState and history.replaceState let you specify a new URL, e.g.:

history.pushState(null, null, "filters?type=apartment");

The URL is resolved in the usual way.

Browser support is good, other than IE9 and earlier.

answered Mar 16, 2016 at 7:59

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sebastian Corneliu Vîrlan Over a year ago

Does this work on a local file? Or only on a server? Failed to execute 'pushState' on 'History': A history state object with URL 'Desktop/form_submit.html?type=apartment' cannot be created in a document with origin 'null' and URL 'Desktop/form_submit.html'.

T.J. Crowder Over a year ago

@IonVasile: I've never tried it with a local file. A lot of things either don't work, or work differently, with resources loaded via the file:// protocol; and that list varies by browser (famously, Chrome and Firefox have very different interpretations of the SOP wrt file:// resources, for instance)..

Collectives™ on Stack Overflow

Change URL in address bar after click on DOM element with javascript/jquery

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related