loader in ajax form jquery

Question

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

  });
});

similar question [stackoverflow](http://stackoverflow.com/questions/68485/how-to-show-loading-spinner-in-jquery) — Daniele, Aug 03 '13 at 08:40

score 2 · Answer 1 · answered Aug 03 '13 at 08:50

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.

score 0 · Answer 2 · answered Aug 03 '13 at 08:51

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 :)

loader in ajax form jquery

2 Answers2