Question

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

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

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

时

该选项卡中的信息会被发布到数据库正常
保存后，新信息保留在页面上，没有什么奇怪的事情发生在这里
当我点击其他选项卡然后返回到我更改了信息的选项卡。它不显示我的更改，而是显示首次在页面上加载选项卡时的信息。
当我刷新页面时，选项卡显示正确的信息（而不是＃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);
            }
        }
    },

IE 9中的jquery标签缓存

1 个答案: