如何在选项卡内容完全加载 AJAX 之前显示加载消息？答案

【问题标题】：How to display a loading message until the tab content is fully AJAX loaded?如何在选项卡内容完全加载 AJAX 之前显示加载消息？
【发布时间】：2013-05-31 13:05:31
【问题描述】：

我正在使用 jQuery UI 1.10 和具有 AJAX 功能的 jQuery UI Tab 小部件。我使用的 JavaScript 代码如下所示（基本简单）：

$('.selector').tabs({
  beforeLoad: function (event, ui) {
    ui.panel.html('Loading...');
  }
});

单击选项卡“标题”时，我想在选项卡“正文”中显示加载消息（文本消息），直到选项卡内容完全加载 AJAX，之后加载消息应替换为 AJAX 检索数据。我怎样才能做到这一点？

【问题讨论】：

stackoverflow.com/questions/1730154/…

标签： javascript jquery ajax jquery-ui jquery-ui-tabs

【解决方案1】：

它不工作吗？

$('.selector').tabs({
  beforeLoad: function (event, ui) {
    //show msg
  },
  load: function (event, ui) {
    //hide msg
  }
});

【讨论】：

【解决方案2】：

您可以这样做：

定义将通过 AJAX foreach 选项卡加载数据的函数。
在show 和create 的标签回调中，您调用一些函数来管理调用哪个AJAX 函数来加载正确的内容。
最后，在您的 AJAX 函数中，您首先更改您的 html 以显示加载消息，然后在请求完成后您可以将其删除。

它很长，但它让您可以更好地控制自己想要做什么。

【讨论】：

【解决方案3】：

我所做的最好的事情就是针对 ajax 驱动的标签...希望你会喜欢这个答案

$("#facilityTabContainer").tabs({ panelTemplate:"Loading...", selected : 0, scrollable : true, cache : false });

您甚至可以修改 jquery.ui.tabs 中的 panelTemplate，这样您应用程序中的所有选项卡都会自动获取“正在加载文本或图像”。猜猜它也解决了你的第一个标签加载问题..

【讨论】：