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

score 6 · Accepted Answer · answered Mar 16 '16 at 07:59

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 '16 at 07:59

T.J. Crowder

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'. – Sebastian Corneliu Vîrlan Mar 16 '16 at 08:11
1

@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).. – T.J. Crowder Mar 16 '16 at 08:11

1 Answers1