JQuery Tabs: How to display a 'Loading...' message' on waiting an AJAX HTTP request response?

I am using jQuery UI 1.8.12 and I am implementing Content via AJAX tabs. I would like to show a "Loading..." message in the meantime the content is loaded (then, of course, the content retrieved with the AJAX HTTP request is displayed).

How can I do that?

Maybe I can use the tabTemplate option but I don't know how to accomplish how I can do that.

P.S.: I would like to do not use the solution used in开发者_JS百科 this question but I would like to add dynamically (in the DOM) the "Loading..." message via jQuery.

You could use BlockUI. Then it's just a case of adding this to your script:

$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);

Every time an AJAX request starts, the UI will be blocked by the loading message, and when it stops, the block will fade out and the UI will be usable again.

Try:

$('#example').tabs({
    select: function(event, ui) {
        if ($(ui.panel).text() == '')
            $(ui.panel).html('Loading...');
        return true;
    },
});