0

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.

Colin Brock
  • 21,267
  • 9
  • 46
  • 61
Steven Grant
  • 1,236
  • 3
  • 15
  • 32

3 Answers3

1

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.

Kristian
  • 21,204
  • 19
  • 101
  • 176
1

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.

Prasenjit Kumar Nag
  • 13,391
  • 3
  • 45
  • 57
0

The Jquery BlockUI plugin is perfect for your needs.

Ayush
  • 41,754
  • 51
  • 164
  • 239