Way to change the browser’s address bar without refreshing the page

address-barurl

I'm developing a web app. In it I have a section called categories that every time a user clicks one of the categories an update panel loads the appropriate content.

After the user clicked the category I want to change the browser's address bar url from

www.mysite.com/products

to something like

www.mysite.com/products/{selectedCat}

without refreshing the page.
Is there some kind of JavaScript API I can use to achieve this?

Best Solution

With HTML5 you can modify the url without reloading:

If you want to make a new post in the browser's history (i.e. back button will work)

window.history.pushState('Object', 'Title', '/new-url');

If you just want to change the url without being able to go back

window.history.replaceState('Object', 'Title', '/another-new-url');

The object can be used for ajax navigation:

window.history.pushState({ id: 35 }, 'Viewing item #35', '/item/35');

window.onpopstate = function (e) {
  var id = e.state.id;
  load_item(id);
};

A fallback sollution: https://github.com/browserstate/history.js

Related Solutions

Javascript – Change the URL in the browser without loading the new page using JavaScript

If you want it to work in browsers that don't support history.pushState and history.popState yet, the "old" way is to set the fragment identifier, which won't cause a page reload.

The basic idea is to set the window.location.hash property to a value that contains whatever state information you need, then either use the window.onhashchange event, or for older browsers that don't support onhashchange (IE < 8, Firefox < 3.6), periodically check to see if the hash has changed (using setInterval for example) and update the page. You will also need to check the hash value on page load to set up the initial content.

If you're using jQuery there's a hashchange plugin that will use whichever method the browser supports. I'm sure there are plugins for other libraries as well.

One thing to be careful of is colliding with ids on the page, because the browser will scroll to any element with a matching id.

Javascript – How to modify the URL without reloading the page

This can now be done in Chrome, Safari, Firefox 4+, and Internet Explorer 10pp4+!

See this question's answer for more information: Updating address bar with new URL without hash or reloading the page

Example:

 function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
 }

You can then use window.onpopstate to detect the back/forward button navigation:

window.onpopstate = function(e){
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};

For a more in-depth look at manipulating browser history, see this MDN article.

Best Solution

Related Solutions

Javascript – Change the URL in the browser without loading the new page using JavaScript

Javascript – How to modify the URL without reloading the page

Related Question