2013-06-21 42 views
0

我有使用jquery選項卡功能的MVC 2項目。以下版本正在用於jquery和選項卡。在IE瀏覽器中緩存jquery選項卡9

的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; 
    } 
+0

問題是每次你離開標籤頁然後回去,它會重新向標籤頁的href請求頁面。 IE9然後緩存結果。我只是不會使用動態加載的標籤內容。 –

+0

如果是這種情況,那麼它應該從數據庫中提取信息並顯示正確的信息。本部分由數據庫驅動,功能分爲多個選項卡。 –

+0

如果IE取而代之將其從緩存中取出,則不行。 :) –

回答

0

暫且,我已經到位以下,現在正在工作。由於隨機值的變化,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); 
      } 
     } 
    },