CODEWITHSUNDEEP
jqueryajaxmagento
Ranjit
Ranjit

Reputation: 1724

loader in ajax form jquery

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

Answers (2)

Sergio
Sergio

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

Ketan
Ketan

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

Related Questions