Display a processing label on a jQueryUI Tab while loading the tabs content

Question

I am using the jQueryUI Tabs Widget with the content loading via Ajax.

While the content is loading I'd like to display a 'loading...' label or gif inside that tabs content while the server processes the request as the content can take some time to load.

Answer 1

You can use the beforeLoad event of the jQueryUI tab widget.

Use the following code when setting up the tabs.

$("#tabs").tabs(
   beforeLoad: function (event, ui) {
     ui.panel.html("Loading, please wait...");
   }
});

You can use this to add any html you want into that tabs content panel before the content is loaded.