Change url and update content of page without reload

Question

it is concerning my final year project on web development. i want to change the contents of my page without reloading the page- i know this can be achieve using css /ajax or jquery but that would be only by hide and show or replaceWith() in jquery. i want the url to be change as well. i want to achieve something like this page https://www.khanacademy.org/computing/computer-programming - when the user clicks on INTRO TO JS:Drawing and animation you will see the url and content of page changes but page does not reload.

a GUIDE will be appreciated. thank you

a small draft:

**MY header.php**

<script language="javascript" src="jquery-1.4.4.min.js"></script>
<script>
$(function(){
 $("a[rel='tab']").click(function(e){
  //e.preventDefault(); 
  /* 
  if uncomment the above line, html5 nonsupported browers won't change the url but will display the ajax content;
  if commented, html5 nonsupported browers will reload the page to the specified link. 
  */
  
  //get the link location that was clicked
  pageurl = $(this).attr('href');
  
  //to get the ajax content and display in div with id 'content'
  $.ajax({url:pageurl+'?rel=tab',success: function(data){
   $('#content').html(data);
  }});
  
  //to change the browser URL to 'pageurl'
  if(pageurl!=window.location){
   window.history.pushState({path:pageurl},'',pageurl); 
  }
  return false;  
 });
});
/* the below code is to override back button to get the ajax content without reload*/
$(window).bind('popstate', function() {
 $.ajax({url:location.pathname+'?rel=tab',success: function(data){
  $('#content').html(data);
 }});
});
</script>
<div id='menu'>
 <a rel='tab' href='http://localhost/html5-history-api/menu1.php'>menu1</a> | 
 <a rel='tab' href='http://localhost/html5-history-api/menu2.php'>menu2</a> | 
 <a rel='tab' href='http://localhost/html5-history-api/menu3.php'>menu3</a></div>

my menu1.php (menu2 and 3 are of same code)

<?php 
if($_GET['rel']!='tab'){
 include 'header.php';
 echo "<div id='content'>";
}
?>
menu1 content in menu1.php
<?php 
if($_GET['rel']!='tab'){
 echo "</div>";
 include 'footer.php';
}?>

i want when i click on the link - the link disappear and it displays only teh content like "menu1 content in menu1.php" only and nothing else on the page

you want to change the url and it will not reload the entire page? — Jrey, Nov 02 '15 at 05:08
check this http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page — Salah, Nov 02 '15 at 05:09
Check out Angular JS and more specifically, the concept called `Single page applications (SPA)` . Gmail, facebook etc all are using the same architecture now — AdityaParab, Nov 02 '15 at 05:30
@JohnReyM.Baylen : Yes, the states can pushed on to the URL without having to reload the page. — AdityaParab, Nov 02 '15 at 05:32
@JohnReyM.Baylen yes john it changes the url and change content of page without reload — Neha, Nov 03 '15 at 04:15
@AdityaParab i tried the html5 history API but it is not llike i want .please look at the code i just updated — Neha, Nov 03 '15 at 04:16

score 0 · Answer 1 · answered Nov 02 '15 at 05:25

0

If you are using a chrome browser, just right clik on that div and use option "inspect element". These are handy tools for web developers. The link you mentioned is just a hyperlink and since it is very simple static page under same domain, using same resources (css,js), its loading very fast and you are getting an impression that there is no page load.

answered Nov 02 '15 at 05:25

Valath

880
3
13
35

yes this is what confuses me- i did try the inspect element i don't see any ajax or jquery they are just simple divs – Neha Nov 03 '15 at 03:57

score 0 · Answer 2 · answered Nov 02 '15 at 05:42

I believe this script which I copy pasted from the linked site explains how they replace the url. To track location they are using localStorage to track page location and other stuff. Go to the page and navigate to the link you referred to. Then open up console and type localStorage. When you press Banana you will see what I am saying.

You can do this by

localStorage.setItem( "itemName", item )
localStorage.getItem( "itemName" )

Below is the sourced code

<script type="text/javascript">
(function() {
        // If we arrived via a Facebook callback, it might have appended #_=_
        // to our URL. This can confuse our Backbone routers, so get rid of it.
        // http://stackoverflow.com/questions/7131909/facebook-callback-appends-to-return-url
        if (window.location.hash === "#_=_"){
            if (history.replaceState) {
                history.replaceState(null, null,
                        window.location.href.split("#")[0]);
            } else {
                window.location.hash = "";
            }
        }
    })();
</script>

True true, it was just an example off their page. The important info is in how this version of what they did was accomplished. Those methods allow storing info and recalling info from the localStorage of the users computer. You then use that info to remember stuff. Inject a page.html into the view with an ajax call and edit the window.location with the FB looking code. Also dynamically inject the DOC. Its a group of functions not 1. I am going to post a github repo with a js / jquery set of methods to accomplish this but am uber busy. will message it you when up.Point is what you need is there — ALFmachine, Nov 04 '15 at 02:33

Change url and update content of page without reload

2 Answers2