CODEWITHSUNDEEP
jqueryhtmlajaxweb-frontend
Steven Grant
Steven Grant

Reputation: 1326

showing 'loading content message'

I'm using this to load events dynamically without a page refresh, but there's a bit too much time on the load so for better UX I thought we should add 'loading events' or similar but my attempts have been in vain so far.

function calendarAjax () {

    $('#month_nav a').live('click', function() {
        $('#events_container').animate({ opacity: "0" }, 200 ).load($(this).attr('href')+' #events_content' , function(){
            $(this).animate({ opacity: "1" }, 600 );
        });
        return false;
    })

};

Any assistance very much appreciated.

Thanks.

Upvotes: 0

Views: 162

Answers (3)

Prasenjit Kumar Nag
Prasenjit Kumar Nag

Reputation: 13461

There are couple of ways, here's a global loading image/text code using $ajaxStart and $.ajaxStop

$('#loadingDiv')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    });

Assuming your loading div's ID is loadingDiv which contains either text or loading image.

Update

$.load is a jQuery Shorthand method which like several others e.g. $.post, $.get, $getJSON, $.getScript uses the $.ajax function under the hood.

$.ajaxStart is a way to register a callback to be executed when the first ajax request starts and $.ajaxStop is used the same way to register a callback to be executed when all ajax request completes

So if you use the above code to show and hide a loading div, it will automatically show that loading text/image when your $.load function's ajax request starts and hide when the ajax request completes, assuming you have only one $.ajax or $.ajax shorthand method in that page.

Upvotes: 1

Kristian
Kristian

Reputation: 21810

You need 3 things:

A loader:

<div id="loader">
I'm loading something
</div>

CSS for your loader:

#loader {
   /* some design */
}

THen you need to make a javascript method that will toggle its visibility:

var loader = {
    show: function() {
        $('#loader').show();
    },
    hide: function() {
        $('#loader').hide();
    }
};

Then you can simply just say loader.show() whenever you want something to be loading, and loader.hide() when you want to dismiss that message.

Upvotes: 1

Ayush
Ayush

Reputation: 42440

The Jquery BlockUI plugin is perfect for your needs.

Upvotes: 0

Related Questions