how to display 'loading' before content from jquery tabs is loaded

Question

I am using jquery UI tabs and content loaded into the tab is on another page. so it is loading via ajax. There is some lag between the page loading during which the part of the

Answer 1

I would recommend listening to the jquery ajaxStart, ajaxStop, and ajaxError events, showing your "loading" popup on ajaxStart, hiding it on AjaxStop and ajaxError. This way, your loading popup will display whenever an ajax request is pending without any additional programming.

For example:

$(function() {
  $(this).ajaxStart(function() {
    $("#ajaxLoading").show(); });
  $(this).ajaxStop(function() {
    $("#ajaxLoading").hide(); });
 });

Answer 2

There's no need to do extra stuff, just add span tag insdie your anchors. i think it's missed in jQuery's documentation.

example:

<script type="text/javascript">
    $(function(){
        $("#tabs").tabs();
    });
</script>

<div id="tabs">
    <ul>
        <li><a href="/failedPrescreenReport.jsp"><span>Tab 1</span></a></li>
        <li><a href="/failedverificationreport.jsp"><span>Tab 2</span></a></li>
        <li><a href="VerificationReport.action"><span>Tab 3</span></a></li>
    </ul>
</div>

span tags are the important part.

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

Answer 4

blockUI is great, but i'd wager http://plugins.jquery.com/project/loading is a better fit for the situation.

Answer 5

Just wrote jquery plugin recently that might be helpful. It puts a mask with a spinner over an element, so for your ajax calls you can display the mask before your calls and unmask it in a callback function for example.

Answer 6

The jquery blockui is perfect for this. A very quick, elegant solution.