JQuery History.js plugin not replacing state of one page in both HTML4 and HTML5 browsers

Question

I am using JQuery History.js plugin to enable History API in HTML5 browsers and emulate in HTML4 browsers. I am using Ajaxify script to implement this plugin. I changed this script a little as shown:

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 = '> li,> ul > 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(/<\!DOCTYPE[^>]*>/i, '')
            .replace(/<(html|head|body|title|meta|script)([\s\>])/gi, '<div class="document-$1"$2')
            .replace(/<\/(html|head|body|title|meta|script)\>/gi, '</div>');

        // 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 < 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 > 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;').replace('>', '&gt;').replace(' & ', ' &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' && typeof window.reinvigorate.ajax_track !== 'undefined') {
        reinvigorate.ajax_track(url);
        // ^ we use the full url here as that is what reinvigorate supports
    }
}

It is working fine and the content added on page using Ajax is added to previous state using UpdateHistory() 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?

UPDATE

It's working for URLs like:

http://localhost:13956/AppStore/App/2012/Install

But not for:

http://localhost:13956/AppStore

Answer 1

It's look like first page is not saved. Try to call UpdateHistory() or History.pushState(null, title, url) inside InitHistory().