のAjaxスピナー

Question

私は、Ajaxリクエストをjqueryのを使用して作られているときに表示されるスピナーがあります。要求は、実際にこのケースではkeyUpイベントで行われ

$(document).bind("ajaxStart", function() { 

    $('#myloader').show(); 

}); 

$(document).bind("ajaxStop", function() { 

    $('#myloader').delay(1000).fadeOut('fast'); 

}); 

を、私は仕事にしようとしています複数のフィールドでこのスピンナーを使用する方法を説明しているので、スピンナーは各フィールドの隣に表示されます。

スピナーイメージを配置することは問題ではありませんが、イメージを各フィールドに接続することは難しいと感じています。それが理にかなっていれば？

--UPDATE--

答えは非常に有用ですが、私は探して何イムと思ういけません。

<div class="form_element"> 
    <%= f.label :email, :class=>"field_hint", :title=>"Email" %> 
    <%= f.text_field :email %> 
    <div class="myloader" style="display:none;"> 
    <p> 
    validating... 
    </p> 
    </div> 
</div> 

<div class="form_element"> 
    <%= f.label :username, :class=>"field_hint", :title=>"Username" %> 
    <%= f.text_field :username %> 
    <div class="myloader" style="display:none;"> 
     <p> 
     validating... 
     </p> 
    </div> 
</div> 

これらのフィールドの両方がリモート呼び出しを行うからkeyupがあります

は、私は、次のコードを持っています。 Ajaxは、両方のスピナーが表示され発生したとき、私はその場に各スピナーdiv要素が関連するようにする方法をうまくしようとしています現時点では

$('.form_element').ajaxStart(function() { 
    $(this).children('.myloader').show(); 
}); 

$('.form_element').ajaxStop(function() { 
    $(this).children('.myloader').delay(1000).fadeOut('fast'); 
}); 

：私は少しのコードを変更しました。

私はAjaxを初めて使っているので、おそらくajaxStart/Stopを別の方法でやっていることについてのアドバイスは歓迎されています。

Answer 1

このようなものをお探しですか？

$("input").ajaxStart(function(){ 
     // Access the field 
     if($(this).attr('id') == idThatTriggeredRequest) { 
      $("#myloader").show(); 
      // Position spinner 
     } 
}); 

EDIT

は、ここでは、イベントを想定したために働くかもしれないもう一つの解決策は、あなたが通り「からkeyup」は、この場合には、イベントを渡し、プラグインにこの抽象も（常にkeyUpイベント可能性があるさオプション）：

$("input").bind('keyup', function(){ 

    // Show the spinner 
    $("#myloader").show(); 

    // Initiate the ajax request 
    $.ajax({ 
     // Handle complete, hide spinner 
    }); 
}); 

Answer 2

これは複数の方法で行うことができます。私はあなたの構造がどのように見えるか知っているが、この純粋にテストされていないと、おそらく乱暴に壊れたコードスニペットを考慮していない：

var spinner = '<img class="spinner" />'; 

$('#myelement').click(function() { 
    var $el = $(this), 
     $sp = $(spinner).hide().appendTo($el).fadeIn(); 

    $el.ajax({ 
    // ... options to load me! 
    complete: function() { 
     $sp.delay(1000).fadeOut('fast', function() { $sp.remove() }); 
    } 
    }); 
}); 

ラフが、あなたのアイデアを得ます。 Ajaxの処理方法によっては、各要素のスピナーを管理するのではなく、グローバル・コールバックを使用してこれを処理する、より洗練された方法があります。