如何在标签内容完全AJAX加载之前显示加载消息？

Question

I am using jQuery UI 1.10 and the jQuery UI Tab widget with AJAX functionalities. The JavaScript code that I am using is stated as-like the following (basic simple):

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

When a tab "header" is clicked then I would like to display a loading message (a text message) in the tab "body" until the tab content is fully AJAX loaded, after which the loading message should be replaced with the AJAX retrieved data. How can I make that?

Answer 1

Isn't it working?

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

Answer 2

You can do this by:

1. Define function that 'll load the data via AJAX foreach tab.
2. In the tabs callback for show and create you call some function that 'll manage which AJAX function to call to load the right content.
3. Finally inside your AJAX function you first change your html to show the loading message and then when the request is done you can remove it.

it's quite long but it gives you more control on what you want to do.

Answer 3

Best Thing I did was just this for ajax driven tabs...Hope you will love this answer

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

and you can even modify the panelTemplate in jquery.ui.tabs also so that all the tabs in you application will automatically get the 'loading text or image'. and guess what it also solves your first tab loading problem too..