0

jquery タブ機能を使用する MVC 2 プロジェクトがあります。jqueryとtabsは以下のバージョンを使用しています。

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

各タブにフォーム コントロールがあります。IE 9 で、特定のタブの保存ボタンをクリックすると

  1. そのタブからの情報がDBにうまく投稿されます
  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;
    }
4

1 に答える 1