如何在標簽內容完全AJAX加載之前顯示加載消息？

Question

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

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

單擊選項卡的“頁眉”時，我想在選項卡的“正文”中顯示加載消息 （文本消息），直到選項卡的內容完全AJAX加載為止，然后應將加載消息替換為AJAX檢索到的數據。 我該怎么做？

Answer 1

不行嗎

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

Answer 2

您可以通過以下方式做到這一點：

1. 定義將通過AJAX foreach選項卡加載數據的函數。
2. 在show和create的選項卡回調中，您調用一些函數，該函數將管理調用哪個AJAX函數以加載正確的內容。
3. 最后，在AJAX函數中，首先更改html以顯示加載消息，然后在完成請求后將其刪除。

它很長，但是它可以讓您更好地控制自己想做什么。

Answer 3

我做的最好的事情就是使用ajax驅動的標簽...希望你會喜歡這個答案

$（“＃facilityTabContainer”）。tabs（{ panelTemplate：“ Loading ...” ，selected：0，scrollable：true，cache：false））;

您甚至還可以在jquery.ui.tabs中修改panelTemplate，以便應用程序中的所有選項卡都將自動獲取“正在加載文本或圖像”。 並猜測它還能解決您的第一個標簽加載問題。