How to display a loading message until the tab content is fully AJAX loaded?

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?

http://stackoverflow.com/questions/1730154/jquery-ui-tabs-loading-message — Roar, May 31 '13 at 13:10

score 0 · Answer 1 · answered May 31 '13 at 13:10

0

Isn't it working?

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

answered May 31 '13 at 13:10

A. Wolff

74,033
9
94
155

score 0 · Answer 2 · answered May 31 '13 at 13:17

You can do this by:

Define function that 'll load the data via AJAX foreach tab.
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.
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.

score 0 · Answer 3 · answered May 22 '14 at 12:33

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..

How to display a loading message until the tab content is fully AJAX loaded?

3 Answers3