Question

我正在使用ajax选择选项卡上的usercontrol。

$("#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) {

                    }
                });
        }
    });

如何阻止标签在每次标签点击时再次加载远程内容。

Answer 1

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

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

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) {

                }
            });
    }
});

Answer 2

最简单的方法是使用一个标志让标签知道它是否已被加载。例如，使用$（'＃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) {

                    }
                });
            }
});

Answer 3

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

Answer 4

我没有使用jQueryUI标签和jQueryUI Ajax的东西，我使用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'));
}

Answer 5

我喜欢这样做，只是为了代码的可读性....你可以直接打开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
          }
       }
    }
});

我如何缓存jquery ui标签数据？

5 个答案: