1

我正在使用 ajax 在选项卡选择上呈现用户控件。

$("#tabs").tabs({
        ajaxOptions: { cache: true },
        spinner: 'Loading ...',
        cache: true,
        select: function(event, ui) {
            var text = $(ui.tab).text();

            $.ajax({
                    type: "POST",
                    url: "abc.aspx/GetData",
                    data: "{'tabType':'" + text + "'}",
                    cache: true,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(response) {
                           $('#tabsResult').html(response.d);
                          },
                    failure: function(msg) {

                    }
                });
        }
    });

如何防止选项卡在每次单击选项卡时再次加载远程内容。

4

5 回答 5

1

取决于您是要停止 ajax 加载周期还是仅在内容更改时。下面是一个仅加载新内容的示例，否则只需替换为var检查该函数之前是否已被调用的 JS，而不使用散列：

您可以散列结果并将其存储在本地，并在您的成功处理程序中进行检查：

JavaScript MD5

var __lastHash = "";
$("#tabs").tabs({
    ajaxOptions: { cache: true },
    spinner: 'Loading ...',
    cache: true,
    select: function(event, ui) {
        var text = $(ui.tab).text();
        __lastHash = MD5Hash(test); //call a hashing API, 
                              //several to choose from, see link above  
        $.ajax({
                type: "POST",
                url: "abc.aspx/GetData",
                data: "{'tabType':'" + text + "'}",
                cache: true,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(response) {
                        if(__lastHash != MD5Hash(response)) //load if different
                        { 
                            $('#tabsResult').html(response.d);
                        }
                      },
                failure: function(msg) {

                }
            });
    }
});
于 2012-07-26T12:41:49.237 回答
1

最简单的方法是使用标志让标签知道它是否已加载。例如，使用 $('#tabsResult').html()。

$("#tabs").tabs({
        ajaxOptions: { cache: true },
        spinner: 'Loading ...',
        cache: true,
        select: function(event, ui) {
            var text = $(ui.tab).text();
            if(!$('#tabsResult').html())
            {
              $.ajax({
                    type: "POST",
                    url: "abc.aspx/GetData",
                    data: "{'tabType':'" + text + "'}",
                    cache: true,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(response) {
                           $('#tabsResult').html(response.d);
                          },
                    failure: function(msg) {

                    }
                });
            }
});
于 2012-07-26T12:42:58.423 回答
0

我没有使用带有 jQ​​ueryUI Ajax 东西的 jQueryUI 选项卡，我使用 MS Ajax 加载作为选项卡控件窗格的更新面板。所以我的建议可能没有直接帮助，我不能轻易地为你检查。然而...

jQueryUI 选项卡已经有一个标志，它告诉您该选项卡是否已加载。标志位于每个选项卡的 DIV 上，状态为“false”、“loaded”、“loading”、“error”等。您可以在 HTML 中看到它，或者使用下面这样的内容将其拉出。我使用这些标志将标签重新标记为“脏”之类的东西。第一次加载选项卡时状态为“加载”，之后为“加载”。

show: function (event, ui) {
   var $target = $('#tabs > div:eq(' + ui.index + ')');
   console.log('tab id=' + $target.attr('id') + ' loaded=' + $target.attr('loaded'));
}
于 2012-07-26T13:36:45.270 回答
0

如果您只想加载选项卡内容一次 - 那么我建议您立即将其包含在 HTML 中，而不是通过 Ajax 加载它。

于 2012-07-26T12:39:15.107 回答
0

我喜欢这样做，只是为了代码的可读性......你可以直接打开 ui.index，但是你必须去记住“哪个索引是 XXX 选项卡？”。这可能会稍微慢一些，但在我看来可以显着提高代码的可读性

tabM = $('#tabs-detail').tabs({
    'select': function (event, ui) {
      var tabId = $($('>ul li a', this)[ui.index]).attr('href');
      switch (tabId) {
        case '#tabs-detail-sales':
          //no action needed
          break;
        case '#tabs-detail-activities':
          //need to populate a table with related activities
          if ($('#table-activities tbody tr').length === 0) {
              //load code goes here
          }
       }
    }
});
于 2012-07-26T13:49:34.403 回答