0

After upgrade to jQuery UI 1.10.0 the tabs are not working correctly anymore. Sometimes clicking on the tab results in refreshed window with the content of the ajax call to MVC action. So it looks like the anchor event is called before the ui-tabs event???

HTML code:

...
<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>
...

My javascript code:

    $(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();
   ...
}

After reading jQuery UI 1.10 Upgrade Guide carefully I could fix some minor bugs in my code but the bug described above still remains.

My questions: - Does anyone experience the same problems after upgrading to jQuery UI 1.10? - Does anyone have a solution or ideas to get this problem fixed?

4

2 回答 2

1

你不是一个人。使用 NuGet 包升级到 JQuery 1.9.1 和 JQuery UI 1.10.0 后，我遇到了同样的问题。所以，至少你知道这个问题不是你的项目所独有的。选项卡正确呈现，但单击时它们直接将 url 启动到浏览器中，而不是通过 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>
于 2013-02-27T15:41:28.067 回答
0

对我来说，答案在其他一些依赖的 javascript 库中。依赖库代码中的错误导致页面上的 JQuery 执行短路。我相信之后需要升级的是“Microsoft JQuery Unobtrusive Ajax”包。

于 2013-03-28T18:43:58.770 回答