title: AJAX + JS + Window.History — Using Back-Forward Navigation
body: <p><strong>GOAL</strong></p>
  
  <ol>
  <li>To use Ajax to fetch pages</li>
  <li>Use JS to update the window url</li>
  <li>Use Window History to save Ajax page for forward-backward navigation without reloading the page</li>
  <li><strong>Change the Navigation bar attributes (color by changing class) with the click and back-forward clicks.</strong></li>
  </ol>
  
  <p><strong>FUNCTIONING</strong></p>
  
  <p>1, 2, and 3 are working.</p>
  
  <p><strong>PROBLEM + QUESTION</strong></p>
  
  <p>How to make #4 work?
  Namely, how to change the nav bar list item's class attributes when using back-forward clicks to match the pages being shown?</p>
  
  <p><strong>JAVASCRIPT CODE — with JQuery</strong></p>
  
  <pre><code>&lt;script&gt;
              $(function(){
                  $("a[RAJAX='RAJAX']").click(function(e){
                      e.preventDefault(); 
                      // if comment-uncomment the above line, html5 nonsupported browers won't change the url but will display the ajax content; if commented, html5 nonsupported browsers will reload the page to the specified link.
  
                      //get the link location that was clicked
                      pageurl = $(this).attr('href');
                      clickItem = $("header .navbar #menu-main-menu .dropdown-menu").find($(this)).parent(".menu-item").parent(".dropdown-menu").parent();   //BSR
  
                      //to get the ajax content and display in div with id 'content'
                      $.ajax({url:pageurl+'?RAJAX=RAJAX',success: function(data){
                          $('#content').html(data);
                      }});
  
                      //to change the browser URL to 'pageurl'
                      if(pageurl!=window.location){
                          window.history.pushState({path:pageurl},'',pageurl);    
                      }
  
                      $(".dropdown").removeClass("activate-color");
                      clickItem.addClass("activate-color");
  
                      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+'?RAJAX=RAJAX',success: function(data){
                      $('#content').html(data);
                  }});
              });
      &lt;/script&gt;
  </code></pre>
  
  <p><strong>HTML CODE — with Bootstrap.css</strong></p>
  
  <pre><code>&lt;header&gt;        
          &lt;div class="navbar navbar-default navbar-fixed-top"&gt;
              &lt;ul id="menu-main-menu" class="nav navbar-nav"&gt;
  
                  &lt;li class="dropdown"&gt;
                      &lt;a href=""&gt;Nav Bar Item&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                          &lt;li class="menu-item"&gt;&lt;a RAJAX='RAJAX' href="http://www.example.com/Link1"&gt;Link-1&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="menu-item"&gt;&lt;a RAJAX='RAJAX' href="http://www.example.com/Link2"&gt;Link-2&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="menu-item"&gt;&lt;a RAJAX='RAJAX' href="http://www.example.com/Link3"&gt;Link-3&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
  
                  &lt;li class="dropdown"&gt;
                      &lt;a href=""&gt;Nav Bar Item&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                          &lt;li class="menu-item"&gt;&lt;a RAJAX='RAJAX' href="http://www.example.com/Link4"&gt;Link-4&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="menu-item"&gt;&lt;a RAJAX='RAJAX' href="http://www.example.com/Link5"&gt;Link-5&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="menu-item"&gt;&lt;a RAJAX='RAJAX' href="http://www.example.com/Link6"&gt;Link-6&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
  
                  &lt;li class="dropdown"&gt;
                      &lt;a href=""&gt;Nav Bar Item&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                          &lt;li class="menu-item"&gt;&lt;a RAJAX='RAJAX' href="http://www.example.com/Link7"&gt;Link-7&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="menu-item"&gt;&lt;a RAJAX='RAJAX' href="http://www.example.com/Link8"&gt;Link-8&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="menu-item"&gt;&lt;a RAJAX='RAJAX' href="http://www.example.com/Link9"&gt;Link-9&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="menu-item"&gt;&lt;a RAJAX='RAJAX' href="http://www.example.com/Link10"&gt;Link-10&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
  
  
              &lt;/ul&gt;
          &lt;/div&gt; &lt;!-- end .navbar --&gt;
      &lt;/header&gt; &lt;!-- end header --&gt;
  
  
      &lt;div class="container body-container"&gt;
          &lt;div id="content" class="clearfix row custom-homepage" style="padding:10px;"&gt;
              AJAX CONTENT SPACE
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>