IE 9 中的 jquery 选项卡缓存

Question

我有使用 jquery 选项卡功能的 MVC 2 项目。以下版本用于 jquery 和选项卡。

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

我在每个选项卡上都有表单控件。在 IE 9 中，当我单击特定选项卡上的保存按钮时

1. 该选项卡中的信息将被发布到数据库中
2. 保存后，新信息停留在页面上，这里没有什么奇怪的事情发生
3. 当我单击其他选项卡然后返回到我更改信息的选项卡时。它不显示我的更改，而是显示标签首次加载到页面时的信息。
4. 当我刷新页面时，选项卡显示正确的信息（并且不像#3 中描述的那样旧）。

所以缓存不会保留标签点击之间的变化。如何解决上面 #3 中所述的问题？

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

目前，我已将以下内容放在适当的位置，并且现在正在运行。由于随机值的变化，IE 9 现在也触发了动作。我仍在寻找更好的解决方案，并会在找到后立即更新。

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);
            }
        }
    },