Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Change Browser URL without Reloading (Refreshing) Page using HTML5 Pushstate Function

Apr 29, 2015
Introduction

Here I will explain how to change browser url without reloading or refreshing page using HTML5 history api in
JavaScript and jQuery. By using pushState function in HTML5 history API we can change browser url without reload or refresh page in jQuery and JavaScript.

Description:
  
In previous articles I explained jQuery remove() and empty() function example, jQuery check whether div element is empty or not, disable mouse right click using jQuery and JavaScript,
jQuery add multiple markers to google map from database, jQuery check file size before upload in asp.net and many articles relating to jQuery, JSON, JavaScript and asp.net. Now I will explain how to change browser url without reloading or refreshing page using HTML5 history api pushState function in JavaScript and jQuery.

Syntax for HTML5 pushState function


history.pushState(pageobject or string, pageTitle, pageUrl);

If you want to check it in complete example write the code like as shown below


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Change Browser URL without reloading page in jQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {
$('#samplemenu1').click(function () {
RefreshPageUrl('Menu1', 'Menu1.html');
})
$('#samplemenu2').click(function () {
RefreshPageUrl('Menu2', 'Menu2.html');
})
$('#samplemenu3').click(function () {
RefreshPageUrl('Menu3', 'Menu3.html');
})
})
function RefreshPageUrl(title, url) {
if (history.pushState) {
history.pushState(null, title, url);
} else {
alert("Your Browser will not Support HTML5");
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" value="Menu1" id="samplemenu1"/>
<input type="button" value="Menu2" id="samplemenu2" />
<input type="button" value="Menu3" id="samplemenu3" />
</div>
</form>
</body>
</html>

Demo

jQuery Change Browser URL without Reloading (Refreshing) Page using HTML5 Pushstate Function


If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

0 comments :

Give your Valuable Comments

Other Related Posts

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.