In Prototype I can show a "loading..." image with this code:
var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars,
onLoading: showLoad, onComplete: showResponse} );
function showLoad () {
...
}
In jQuery, I can load a server page into an element with this:
$('#message').load('index.php?pg=ajaxFlashcard');
but how do I attach a loading spinner to this command as I did in Prototype?
For jQuery I use
jQuery.ajaxSetup({
beforeSend: function() {
$('#loader').show();
},
complete: function(){
$('#loader').hide();
},
success: function() {}
});
You can just use the jQuery's .ajax function and use its option beforeSend and define some function in which you can show something like a loader div and on success option you can hide that loader div.
jQuery.ajax({
type: "POST",
url: 'YOU_URL_TO_WHICH_DATA_SEND',
data:'YOUR_DATA_TO_SEND',
beforeSend: function() {
$("#loaderDiv").show();
},
success: function(data) {
$("#loaderDiv").hide();
}
});
You can have any Spinning Gif image. Here is a website that is a great AJAX Loader Generator according to your color scheme: http://ajaxload.info/
$('#message').load('index.php?pg=ajaxFlashcard', null, showResponse);
showLoad();
function showResponse() {
hideLoad();
...
}