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

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.