jquery tabs caching in IE 9

Question

I have MVC 2 project that uses jquery tabs feature. Following versions are being used for jquery and tabs.

jquery-1.4.4.min.js jquery.tools.min.js 1.2.5

I have form controls on each tab. In IE 9, when I click the save button on a specific tab

1. the information from that tab gets posted to the DB fine
2. After the save, the new information stays on the page, nothing weird happening here
3. When i click some other tab and then go back to tab on which i changed the information. It doesn't show my changes, instead it shows the info when the tab first got loaded on page.
4. When i refresh the page, the tab shows correct information (and not old as described in #3).

So caching is somehow not keeping the changes between the tab clicks. How can i fix the issue as described in #3 above?

html

<script type="text/javascript">

    $(document).ready(function () {

            JSGlobalVars.TabsAjaxCall('');

        });
</script>

<div class="inside">
            <div class="indentmenu">
                <ul class="tabs">
                    <li><a id="GeneralInfo" href="/ProfileEditor/GeneralInfo?fice=XXXXXX&random=68564868">General Info</a></li>
                    <li><a id="Academics" href="/ProfileEditor/Academics?fice=XXXXXX&random=68564868">Academics</a></li>
                    <li><a id="Admission" href="/ProfileEditor/Admission?fice=XXXXXX&random=68564868">Admission</a></li>
                    <li><a id="CampusLife" href="/ProfileEditor/CampusLife?fice=XXXXXX&random=68564868">Campus Life</a></li>
                    <li><a id="CostAid" href="/ProfileEditor/CostAndAid?fice=XXXXXX&random=68564868">Cost & Aid</a></li>
                    <li><a id="Athletics" href="/ProfileEditor/Athletics?fice=XXXXXX&random=68564868">Athletics</a></li>
                    <li><a id="AutomatedOnlineSearch" href="/ProfileEditor/AutomatedOnlineSearch?fice=XXXXXX&random=68564868">Automated Online Search</a></li>
                </ul>

            </div>
            <div class="insideContent">
                <div class="panes">
                    <div style="display: block">
                    </div>
                </div>
            </div>
        </div>
        <div class="reset"></div>
    </div>

JSGlobalVars

/* tabs handling*/
    //pass tab only on load when displaying a specific tab
    TabsAjaxCall: function (tabToDisplay) {
        //$("ul.tabs").tabs("div.panes > div", { effect: 'ajax' });

        $("ul.tabs").tabs("div.panes > div", { effect: 'ajax', history: true,
            onBeforeClick: function (event, tabIndex) {
                var $tabProgress = $("#tabProgress");

                var $currentTab = $("ul.tabs").children('li').eq(tabIndex).children("a");
                jLoaderShow($currentTab);

                var tabPanes = this.getPanes();
            },
            onClick: function (event, tabIndex) {
                jLoaderHide();
                //to display specific tab on load
                if (tabToDisplay != "" && typeof tabToDisplay != "undefined") {
                    JSGlobalVars.TabOnLoadIndexPerPassedValue(tabToDisplay);
                    //remove tab, we only need it during load and not on subsequest loads
                    tabToDisplay = "";
                }
                var tabPanes = this.getPanes();
            }
        });
    },
    TabCurrentRefreshCall: function (currentTabIndex) {
        if (currentTabIndex == "" || typeof currentTabIndex == "undefined" || currentTabIndex == "undefined" || currentTabIndex <= 0) {
            JSGlobalVars.TabsAjaxCall();
        } else {
            var $currentTab = $("ul.tabs").children('li').eq(currentTabIndex).children("a");
            var id = $currentTab.attr("id");
            if (id != "")
                JSGlobalVars.TabsAjaxCall(id);
            else {
                //go the tab index route
                JSGlobalVars.TabsAjaxCall();
                var tabsApi = $("ul.tabs").data("tabs");
                tabsApi.click(currentTabIndex);
            }
        }
    },
    TabIndexForSelected: function () {
        var tabsApi = $("ul.tabs").data("tabs");
        var currentTabIndex = tabsApi.getIndex();
        return currentTabIndex;
    },
    TabOnLoadIndexPerPassedValue: function (myTab) {
        var tabIndex = "";

        if (myTab != '' && typeof myTab != "undefined") {
            var isTabIndex = false;
            $("ul.tabs").children('li').children("a").each(function (index) {
                if (myTab.toLowerCase() == $(this).attr("id").toLowerCase()) {
                    tabIndex = index;
                    isTabIndex = true;
                    return;
                }
            });
            if (isTabIndex) {
                var tabsApi = $("ul.tabs").data("tabs");
                tabsApi.click(tabIndex);
            }
        }
    },
    TabOnloadIndexPerHash: function () {
        var tabIndex = "";
        var hash = JSGlobalVars.GetHash();
        if (hash != '' && hash != 'undefined') {
            var isTabIndex = false;
            $("ul.tabs").children('li').children("a").each(function (index) {
                if (hash.toLowerCase() == $(this).attr("id").toLowerCase()) {
                    tabIndex = index;
                    isTabIndex = true;
                    return;
                }
            });
            if (isTabIndex) {
                var tabsApi = $("ul.tabs").data("tabs");
                tabsApi.click(tabIndex);
            }
        }
    },
    GetHash: function () {
        var hash = document.location.hash;
        if (hash != '') {
            hash = document.location.hash.substr(1, document.location.hash.length);
        }
        return hash;
    }

Answer 1

For the time being, I have put the following in place and it is working now. Due to changing of the random value, IE 9 now hits the action as well. I am still looking for a better solution and will update as soon as i have found one.

TabsAjaxCall: function (tabToDisplay, isAppendJsRandom) {
        //$("ul.tabs").tabs("div.panes > div", { effect: 'ajax' });

        $("ul.tabs").tabs("div.panes > div", { effect: 'ajax', cache: false, ajaxOptions: { cache: false }, history: true,
            onBeforeClick: function (event, tabIndex) {
                var $tabProgress = $("#tabProgress");

                var $currentTab = $("ul.tabs").children('li').eq(tabIndex).children("a");

                //IE 9 fix
                JSGlobalVars.TabsHrefWithJsRandom($currentTab, isAppendJsRandom);

                jLoaderShow($currentTab);

                var tabPanes = this.getPanes();
            },
            onClick: function (event, tabIndex) {
                jLoaderHide();
                //to display specific tab on load
                if (tabToDisplay != "" && typeof tabToDisplay != "undefined") {
                    JSGlobalVars.TabOnLoadIndexPerPassedValue(tabToDisplay);
                    //remove tab, we only need it during load and not on subsequest loads
                    tabToDisplay = "";
                }
                var tabPanes = this.getPanes();
            }
        });
    },
    TabsHrefWithJsRandom: function ($currentTab, isAppendJsRandom) {
        //ie 9 issue fix
        if (isAppendJsRandom == "" || typeof isAppendJsRandom == "undefined" || isAppendJsRandom == "undefined" || isAppendJsRandom == null)
            isAppendJsRandom = false;
        if (isAppendJsRandom) {
            var href = $currentTab.attr("href");
            var radomVerb = "random";
            if (href != '' && href != '#') {
                var indexRandom = href.indexOf(radomVerb);
                if (indexRandom > 0) {
                    //remove random
                    href = href.substring(0, indexRandom);
                    //remove last index of & and ?
                    var nAnd = href.charAt(indexRandom - 1);
                    if (nAnd == "&" || nAnd == "?") {
                        href = href.substring(0, href.length - 1);
                    }
                }

                //get and append random to href
                var random = Math.random();
                if (href.lastIndexOf("?") != -1)
                    href += '&'+ radomVerb + '=' + random;
                else
                    href += '?'+ radomVerb + '=' + random;
                $currentTab.attr("href", href);
            }
        }
    },