title: JQuery History.js plugin not replacing state of one page in both HTML4 and HTML5 browsers
body: <p>I am using <a href="https://github.com/browserstate/history.js/" rel="noreferrer">JQuery History.js plugin</a> to enable History API in HTML5 browsers and emulate in HTML4 browsers. I am using <a href="https://github.com/browserstate/ajaxify" rel="noreferrer">Ajaxify script</a> to implement this plugin. I changed this script a little as shown:</p>
  
  <pre><code>var History, $, document;
  function PrepareVariables() {
      History = window.History,
      $ = window.jQuery,
      document = window.document;
  }
  
  function InitHistory() {
      // Prepare Variables
      var
      /* Application Specific Variables */
      //contentSelector = '#content,article:first,.article:first,.post:first',
      contentSelector = '#navcontent';
      $content = $(contentSelector), //.filter(':first'),
      //contentNode = $content.get(0),
      $menu = $('#menu,#nav,nav:first,.nav:first').filter(':first'),
      activeClass = 'active selected current youarehere',
      activeSelector = '.active,.selected,.current,.youarehere',
      menuChildrenSelector = '&gt; li,&gt; ul &gt; li',
      completedEventName = 'statechangecomplete',
      /* Application Generic Variables */
      $window = $(window),
      $body = $(document.body),
      rootUrl = History.getRootUrl(),
      scrollOptions = {
          duration: 800,
          easing: 'swing'
      };
  
      // Ensure Content
      if ($content.length === 0) {
          $content = $body;
      }
  
      // Internal Helper
      $.expr[':'].internal = function (obj, index, meta, stack) {
          // Prepare
          var
          $this = $(obj),
              url = $this.attr('href') || '',
              isInternalLink;
  
          // Check link
          isInternalLink = url.substring(0, rootUrl.length) === rootUrl || url.indexOf(':') === -1;
  
          // Ignore or Keep
          return isInternalLink;
      };
  
      // HTML Helper
      var documentHtml = function (html) {
          // Prepare
          var result = String(html)
              .replace(/&lt;\!DOCTYPE[^&gt;]*&gt;/i, '')
              .replace(/&lt;(html|head|body|title|meta|script)([\s\&gt;])/gi, '&lt;div class="document-$1"$2')
              .replace(/&lt;\/(html|head|body|title|meta|script)\&gt;/gi, '&lt;/div&gt;');
  
          // Return
          return $.trim(result);
      };
  
      // Ajaxify Helper
      $.fn.ajaxify = function () {
          // Prepare
          var $this = $(this);
  
          // Ajaxify
          //$this.find('a:internal:not(.no-ajaxy)').click(function (event) {
          $this.find("a[data-isnav='0']").click(function (event) {
              // Prepare
              var
              $this = $(this),
                  url = $this.attr('href'),
                  title = ($this.attr('title') || null);
  
              // Continue as normal for cmd clicks etc
              if (event.which == 2 || event.metaKey) {
                  return true;
              }
  
              // Ajaxify this link
              History.pushState(null, title, url);
              event.preventDefault();
              return false;
          });
  
          // Chain
          return $this;
      };
  
      // Ajaxify our Internal Links
      $body.ajaxify();
  
      // Hook into State Changes
      $window.bind('statechange', function () {
          // Prepare Variables
          var
          State = History.getState(),
              url = State.url,
              relativeUrl = url.replace(rootUrl, '');
  
  
          // Start Fade Out
          // Animating to opacity to 0 still keeps the element's height intact
          // Which prevents that annoying pop bang issue when loading in new content
          $content.animate({
              opacity: 0
          }, 800);
  
          // Ajax Request the Traditional Page
          callAjax("GetContent", {
              URL: url /*typeOfHeader: contentType, argsdata: argdata*/
          },
          false,
  
          function () {
              var ops = $('#ops');
              if (ops != null) ops.html('');
              ShowProgress('');
              //var now = (new Date()).getTime();                    //Caching
              //if (headerCache.exist(url)) {
              //    tDiff = now - headerCacheTime;
              //    if (tDiff &lt; 3000) {
              //        setContentData(headerCache.get(url));
              //        return true;
              //    }
              //}
          },
  
          function (d) {
              //headerCache.set(url, d, null);
              //cacheName = url;
              HideProgress();
              setContentData(d);
          }, null);
  
          // end ajax
  
      }); // end onStateChange
  }
  (function (window, undefined) {
  
      // Prepare our Variables
      PrepareVariables();
  
      // Check to see if History.js is enabled for our Browser
      if (!History.enabled) {
          return false;
      }
  
      // Wait for Document
      $(function () {
          InitHistory();
      });
      // end onDomLoad
  
  })(window); // end closure
  function UpdateHistory() {
      var title = (document.title.trim().length &gt; 0 ? document.title : null);
      var url = window.location.href.replace(/^.*\/\/[^\/]+/, '');
      var History = window.History;
      History.replaceState(null, title, url);
      $('a[data-isnav="0"').click(function () {
          // Prepare
          var
          $this = $(this),
              url = $this.attr('href'),
              title = ($this.attr('title') || null);
  
          // Continue as normal for cmd clicks etc
          if (event.which == 2 || event.metaKey) {
              return true;
          }
  
          // Ajaxify this link
          History.pushState(null, title, url);
          event.preventDefault();
          return false;
      });
  }
  
  function setContentData(d) {
      var data = d.data;
  
      // Fetch the scripts
      //$scripts = $dataContent.find('.document-script');
      //if ($scripts.length) {
      //    $scripts.detach();
      //}
  
      // Fetch the content
      contentHtml = data;
      if (!contentHtml) {
          document.location.href = url;
          return false;
      }
  
      // Update the menu
      //$menuChildren = $menu.find(menuChildrenSelector);
      //$menuChildren.filter(activeSelector).removeClass(activeClass);
      //$menuChildren = $menuChildren.has('a[href^="' + relativeUrl + '"],a[href^="/' + relativeUrl + '"],a[href^="' + url + '"]');
      //if ($menuChildren.length === 1) { $menuChildren.addClass(activeClass); }
  
      // Update the content
      $content.stop(true, true);
      $content.html(contentHtml).ajaxify().css('opacity', 100).show(); /* you could fade in here if you'd like */
  
      //Intialize other content
      initContent();
  
      // Update the title
      //document.title = $data.find('.document-title:first').text();
      //try {
      //    document.getElementsByTagName('title')[0].innerHTML = document.title.replace('&lt;', '&amp;lt;').replace('&gt;', '&amp;gt;').replace(' &amp; ', ' &amp;amp; ');
      //}
      //catch (Exception) { }
  
      // Add the scripts
      //$scripts.each(function () {
      //    var $script = $(this), scriptText = $script.text(), scriptNode = document.createElement('script');
      //    if ($script.attr('src')) {
      //        if (!$script[0].async) { scriptNode.async = false; }
      //        scriptNode.src = $script.attr('src');
      //    }
      //    scriptNode.appendChild(document.createTextNode(scriptText));
      //    contentNode.appendChild(scriptNode);
      //});
  
      // Complete the change
      if ($body.ScrollTo || false) {
          $body.ScrollTo(scrollOptions);
      } /* http://balupton.com/projects/jquery-scrollto */
      $window.trigger(completedEventName);
  
      // Inform Google Analytics of the change
      if (typeof window._gaq !== 'undefined') {
          window._gaq.push(['_trackPageview', relativeUrl]);
      }
  
      // Inform ReInvigorate of a state change
      if (typeof window.reinvigorate !== 'undefined' &amp;&amp; typeof window.reinvigorate.ajax_track !== 'undefined') {
          reinvigorate.ajax_track(url);
          // ^ we use the full url here as that is what reinvigorate supports
      }
  }
  </code></pre>
  
  <p>It is working fine and the content added on page using Ajax is added to previous state using <code>UpdateHistory()</code> function. On some pages the state is updated successfully but on one page it is not updating the content when the page is accessed for the second time. I searched SO for all the similar questions but unable to get any solution. First I thought the problem is with Internet Explorer but then I tried it on Firefox but it didn't work. Please tell me what can be the reason?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>It's working for URLs like:</p>
  
  <blockquote>
    <p><a href="http://localhost:13956/AppStore/App/2012/Install" rel="noreferrer">http://localhost:13956/AppStore/App/2012/Install</a></p>
  </blockquote>
  
  <p>But not for:</p>
  
  <blockquote>
    <p><a href="http://localhost:13956/AppStore" rel="noreferrer">http://localhost:13956/AppStore</a></p>
  </blockquote>