By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,479 Members | 1,245 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,479 IT Pros & Developers. It's quick & easy.

After clicking on back button, URL is changing but content is loaded in History api

P: 1
My doubt is regarding history api feature of html5 which is using ajax script.

In my code after loading index.html, i have tried to open html content using link in central section of page. Upto this is done but when i click to back button then url is changing but content was of previous page.

following is my js code :
Expand|Select|Wrap|Line Numbers
  1. function supports_history_api() 
  2. {
  3. return !!(window.history && history.pushState);
  4. }
  5.  
  6. function page_cal(href)
  7.     var page_request = false;
  8.     if (window.XMLHttpRequest) // if Mozilla, Safari etc
  9.     page_request = new XMLHttpRequest();
  10.     else if (window.ActiveXObject) // if IE
  11.         {
  12.             try 
  13.             {
  14.             page_request = new ActiveXObject("Msxml2.XMLHTTP");
  15.  
  16.             } 
  17.         catch (e)
  18.             {
  19.                 try{
  20.                 page_request = new ActiveXObject("Microsoft.XMLHTTP");
  21.                 }
  22.             catch (e){}
  23.             }
  24.         }
  25.  
  26.     page_request.open("GET","../PA-20/pages/"+href.split("/").pop(),false);
  27.     page_request.send(null);
  28.     if (page_request.readyState==4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)) 
  29.     {
  30.     document.getElementById("opencontent").innerHTML = page_request.responseText;
  31.     return true;
  32.     }     
  33.     return false;
  34. }
  35.  
  36.  
  37. function addClicker(link) 
  38. {
  39.  //alert(link+"1st");
  40.  link.addEventListener("click", function(e) 
  41.   {//alert(link+"2nd");
  42.     if (page_cal(link.href)) 
  43.     {  
  44.       alert(link.href+" Clicked !");
  45.     //var url = link.href;
  46.  
  47.     var linksElement = document.getElementById('id');
  48.     var pathname =  link.href;
  49.     var stateObj = { first: "home",
  50.                      second: "products",
  51.                      third:    "promoters",
  52.                      fourth: "aboutus",
  53.                      fifth: "contact",
  54.                     };
  55.  
  56.      history.pushState(pathname, null, link.href);
  57.      alert(history.state);
  58.          e.preventDefault();
  59.         }  
  60.    }, true);
  61.   }
  62.  
  63.  
  64.  
  65. function setupHistoryClicks()
  66. addClicker(document.getElementById("home"));
  67. addClicker(document.getElementById("products"));
  68. addClicker(document.getElementById("promoters"));
  69. addClicker(document.getElementById("aboutus"));
  70. addClicker(document.getElementById("contact"));
  71. addClicker(document.getElementById("kalonji"));
  72. addClicker(document.getElementById("chilli"));
  73. addClicker(document.getElementById("jaiphal"));
  74. addClicker(document.getElementById("jeera"));
  75. addClicker(document.getElementById("elaichi"));
  76. addClicker(document.getElementById("malkingini"));
  77.  
  78. }
  79.  
  80.  
  81.  
  82. window.onload = function(e) 
  83. {
  84.   if (!supports_history_api()) 
  85.   {return;}
  86.    setupHistoryClicks(); 
  87.    e.preventDefault();
  88.   window.setTimeout(function() 
  89.   {
  90.     window.addEventListener("popstate", function(e) 
  91.     { 
  92.     alert( " Back button is cliecked ! " + "location: " + document.location + ", state: " + e.state);
  93.  
  94.         location.reload();    
  95.  
  96.     page_cal(document.location);
  97.  
  98.     }, false);
  99.  
  100.       }, 1); 
Thanks in advance !

Regards,
Swappy
Feb 20 '12 #1
Share this Question
Share on Google+
1 Reply


acoder
Expert Mod 15k+
P: 16,027
I think the following may help:

Manipulating the browser history
History.js (linked from above article)
Feb 27 '12 #2

Post your reply

Sign in to post your reply or Sign up for a free account.