Change url without reloading-refresh page – HTML5 jQuery JavaScript

Change browser url without reload or refresh page solution. You can change url using HTML5 pushState feature and small jQuery JavaScript function.

Change url without reloading-refresh page - HTML5 jQuery JavaScript
Change url without reloading-refresh page – HTML5 jQuery JavaScript

Change url without reloading-refresh page use cases

In web development many process require to change or update browser url without reload page. e.g.,

Listing autoload with pagination

For manage autoload and pagination need to update browser url when new or next page load using ajax. So when user refreshes page last viewed page display on screen.

Multi step process using ajax

For multi-step process using ajax need to update browser url when new or next step load using ajax. So when user reloads page last step display on screen.

Also there are many more cases where developer needs to change url without reloading-refresh page.

Code for change url without reloading-refresh page

<script type="text/javascript">
function updateUrl(title, url) {
    if (typeof (history.pushState) != "undefined") {
        var obj = { Title: title, Url: url };
        history.pushState(obj, obj.Title, obj.Url);
    } else {
        alert("Your browser doesn't support HTML5.");
    }
}
</script>
<input type="button" value="/page/1/" onclick="updateUrl('MyPage1', '/page/1/');" />
<input type="button" value="/page/2/" onclick="updateUrl('MyPage2', '/page/2/');" />
<input type="button" value="/page/3/" onclick="updateUrl('MyPage3', '/page/3/');" />

<input type="button" value="/page1.html" onclick="updateUrl('MyPage1', '/page1.html');" />
<input type="button" value="/page2.html" onclick="updateUrl('MyPage2', '/page2.html');" />
<input type="button" value="/page3.html" onclick="updateUrl('MyPage3', '/page3.html');" />