CODEWITHSUNDEEP
jqueryjquery-ui
Omnipresent
Omnipresent

Reputation: 30374

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

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)

Upvotes: 8

Views: 12015

Answers (6)

Satishchandra Pandey
Satishchandra Pandey

Reputation: 93

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

Upvotes: 0

Khashayar
Khashayar

Reputation: 1351

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.

Upvotes: 10

Nathan Bubna
Nathan Bubna

Reputation: 6933

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

Upvotes: 0

Kris Erickson
Kris Erickson

Reputation: 33834

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

Upvotes: 0

serg
serg

Reputation: 111265

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.

Upvotes: 0

Karmic Coder
Karmic Coder

Reputation: 17949

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(); });
 });

Upvotes: 9

Related Questions