Technology Powered Knowledge Base
Click Here To Make FREE Audio & Video Call From Web Browser!

Change Browser URL and Web Page Content Without Page Reload

VN:F [1.9.22_1171]
Rating: +19 (from 19 votes)
VN:F [1.9.22_1171]
Rating: 10.0/10 (19 votes cast)

When we click on anchor tag the new page opens with page reloading. Sometime we need solution like page content or a portion of page must load with new content with browser URL must change. Please note, We know that in such cases we can use AJAX to load new page content. But we have few major issues for such cases,
 
1) We can change hash tag but not full URL, so that this is not SEO friendly.
2) User will not get different page URL, So user can’t bookmark or remember it.
3) Sometime this is difficult to use AJAX in existing unstructured web app.

We have a solution to avoid such big issues. This is possible with HTML5 History API. In such way we don’t need to use Has Tag(#) in browser URL to identify the actual webpage what did by Gmail. But if you using Facebook or Github you must watched the thing happens there. Content will be loaded via ajax driven content block and at the same time browser URL also change and you can easily book mark any URL and can visit that any time. 🙂
Please note that all HTML5 supported browsers FF 4.0, Chrome 12.0, IE 10.0, Opera 9.5, Safari 4.0 and above versions are compatible with such solution.
  
I have described the thing with an example, Please note I have used HTML, CSS, Jquery and PHP to build such demo.
CLick Here To Download Asynchronous URL Change Example Demonstration
 
Please remember one thing, you can’t use simple Javascript or Jquery event attachment in dynamic content which is placed by Ajax request. As example,
We have a ‘ul’-‘li’ structure in dynamic content, as written in below:


<ul id="clickme">
  <li>One</li>
  <li>Two</li>
</ul>

Now we like to show an alert message after click on ‘li’, then simple event attachment will not work in dynamic content. Code snippet for simple Jquery event attachment is written in below:


<script type="text/javascript">
$(function(){
  $("ul#clickme li").click( function(){
    var text=$(this).text();
    alert(text);
  });
});
</script>

You should use ‘.on’ event attachment in such cases to work you code properly, as code snippet written in below:


<script type="text/javascript">
$(function(){
  $('body').on('click', "ul#clickme li", function(){
    var text=$(this).text();
    alert(text);
  });
});
</script>

Please note that, ‘body’ is used as top level DOM element as ‘body’ is not replacing by dynamic content.

Change Browser URL and Web Page Content Without Page Reload, 10.0 out of 10 based on 19 ratings



Sign Up     Sign In