Reputation: 1724
I am new in jQuery ajax. I have created a ajax form in magento. and it works fine. But now i want to add the loader image in that. My code for the form is written
jQuery(function () {
var checkurl = URL + "customer/account/signupformpopup/";
jQuery('#alogin').click(function () {
jQuery('.cc-register-form').hide(600);
jQuery('.cc-signup-form').show("slow");
jQuery.ajax({
url: checkurl,
success: function (data) {
var $signupForm = jQuery('<div class="cc-signup-form">'+data+'</div>');
if (jQuery('#tinybox-wrap').children().hasClass('cc-signup-form')) {
return false;
}
else {
jQuery('#tinybox-wrap').append($signupForm);
}
}
})
});
});
Upvotes: 0
Views: 763
Reputation: 6948
Well, basically you need to put your loader on top of ajax post element
, using some kind of absolute positioning or w/e else you can do. An example of that is following jsFiddle.
(You can click on a button and after click on a loader to make button apear again).
What you do on ajax request is hide control element and show loader, in success
and of course error
function handlers you show control element and hide loader. That's it, so simple :)
Upvotes: 0
Reputation: 428
You can do this in many ways.My preferred way is to attach a function to the ajaxStart/Stop events on the element itself.
$('#loadingDiv')
.hide() // hide it initially
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
})
;
The ajaxStart/Stop functions will fire whenever you do any ajax calls.
Upvotes: 2