0

私はjQuery ajaxが初めてです。Magento で ajax フォームを作成しました。そしてそれはうまくいきます。しかし、今はその中にローダーイメージを追加したいと思っています。フォームのコードが書かれています

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

  });
});
4

2 に答える 2

2

これはさまざまな方法で実行できます。私の好ましい方法は、要素自体の ajaxStart/Stop イベントに関数をアタッチすることです。

$('#loadingDiv')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;

ajax 呼び出しを行うたびに、ajaxStart/Stop 関数が起動します。

于 2013-08-03T08:50:39.543 に答える
0

まあ、基本的には、ローダーを の上に配置する必要があります。ajax post element何らかの絶対配置を使用するか、他の方法で行うことができます。その例は、次のjsFiddleです。(ボタンをクリックしてからローダーをクリックすると、ボタンが再び表示されます)。

ajaxリクエストで行うことは、コントロール要素を非表示にしてローダーを表示することです。successもちろん、error関数ハンドラーでは、コントロール要素を表示してローダーを非表示にします。それだけです、とても簡単です:)

于 2013-08-03T08:51:10.117 に答える