2013-02-27 45 views
0

升級到jQuery UI 1.10.0後,選項卡不再正常工作。有時點擊選項卡會導致刷新窗口中的ajax調用MVC操作的內容。 所以它看起來像錨事件之前調用ui-tabs事件?帶有ASP.NET MVC 4的jQuery UI 1.10.0選項卡:有時選項卡被激發爲定位點

HTML代碼:

... 
<div id="rightTabsPanel"> 
    <ul> 
     <li class="tab-shadow"><a href="@Url.Action("Agenda", "Home")">Agenda</a></li> 
     <li class="tab-shadow"><a href="@Url.Action("Twitter", "Home")">Twitter</a></li> 
     <li class="tab-shadow"><a href="@Url.Action("Buienradar", "Home")">Buienradar</a></li> 
     <li class="tab-shadow"><a href="@Url.Action("FileKaart", "Home")">File kaart</a></li> 
    </ul> 
</div> 
... 

我的javascript代碼:

$(document).ready(function(){ 
    ... 
    $("#rightTabsPanel").tabs({ 
     //Replacement for cache:false 
     beforeLoad: function(event, ui) { 
      if (ui.tab.data("loaded")) { 
       event.preventDefault(); 
       return; 
      } 

      ui.jqXHR.success(function() { 
       ui.tab.data("loaded", true); 
      }); 
     }, 
     beforeActivate: function (event, ui) { 
      if (ui.oldTab.text() == "Twitter" || ui.oldTab.text() == "Yammer") { 
       $("#slider-code", ui.oldTab).empty(); 
      } 
      else if (ui.oldTab.text() == "File kaart") { 
       fileKaartDeInitialize(ui.oldPanel); 
      } 
     } 
    }).bind('tabsload',function(event, ui){ 
      if (ui.tab.text() == "Agenda") { 
       var $this = $('#slider-code', ui.panel); 

       $this.tinycarousel({ axis: 'y', interval: true, controls: false, intervaltime: 7000 }) 
      } 
      else if (ui.tab.text() == "Twitter") { 
      var $this = $('#slider-code', ui.panel); 

      $this.tinycarousel({ axis: 'y', interval: true, controls: false, intervaltime: 5000 }) 
     } 
      else if (ui.tab.text() == "Buienradar") { 
      var $this = $('#slider-code', ui.panel); 
     } 
      else if (ui.tab.text() == "File kaart") { 
       fileKaartInitialize($('.fileKaartPage')); 
     } 
    }); 

    $("#rightTabsPanel .ui-tabs-nav li").unbind(); 
    ... 
} 

閱讀jQuery UI 1.10 Upgrade Guide小心我能解決一些小錯誤在我的代碼,但上述錯誤仍然之後。

我的問題: - 升級到jQuery UI 1.10後有沒有人遇到同樣的問題? - 有沒有人有解決方案或想法解決這個問題?

回答

1

你並不孤單。使用NuGet包升級到JQuery 1.9.1和JQuery UI 1.10.0後,我遇到同樣的問題。所以,至少你知道這個問題並不是你的項目所特有的。這些選項卡可以正確呈現,但點擊後直接將其發送到瀏覽器中,而不是通過Ajax檢索內容。我對JQuery相對來說比較新,所以我還沒有調試背景去了解它的底部。

代碼示例(因爲它得到明顯這裏一樣簡單):

<div id="tabs"> 
<ul> 
    <li><a href="/AllWorkTab">All Work</a></li> 
    <li><a href="/MyWorkTab">My Work</a></li> 
    <li><a href="/PhotoTab">Photos</a></li> 
    <li><a href="/WeatherTab">Weather</a></li> 
</ul> 

<script type="text/javascript"> 
    $(function() { 
     $("#tabs").tabs(); 
    }); 
</script> 
0

對我來說,答案是其他一些相關的JavaScript庫。依賴庫代碼中的錯誤使頁面上的JQuery執行變短。我相信這是「微軟JQuery Unobtrusive Ajax」包,需要升級後。

相關問題