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 screen where tab content will load is completley empty. Is there a way I can show some message like 'loading....' until the content loads?

My code is:

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

            <div id="tabs">
                <ul>
                    <li><a href="/failedPrescreenReport.jsp</a></li>
                    <li><a href="/failedverificationreport.jsp</a></li>
                    <li><a href="VerificationReport.action</a></li>
                </ul>
            </div>

I have tried using the spinner option of this plugin but that does not seem to work for me...(maybe my css is messed up)

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

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 3

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

Answer 4

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

Answer 5

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.