Ajax spinner sur plusieurs entrées dans la même forme

Question

J'ai une fileuse qui affiche lorsqu'une demande ajax est faite en utilisant jquery:

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

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

}); 

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

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

}); 

La demande est en fait sur keyup dans ce cas, je suis en train de travailler comment utiliser ce spinner sur plusieurs champs, de sorte que le spinner s'affiche à côté de chaque champ.

Placer l'image du disque n'est pas le problème, mais la connexion de l'image à chaque champ est ce que je trouve difficile. Si ça a du sens?

--UPDATE--

Les réponses sont très serviables mais je ne pense pas que c'est ce que je cherche.

J'ai le code suivant:

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

Ces deux champs ont un keyup qui fait un appel à distance. J'ai changé le code légèrement:

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

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

Au moment où un Ajax arrive les deux filateurs apparaissent, je suis en train de travailler sur la façon de faire chaque spinner div intéressant son domaine.

Je suis nouveau à Ajax donc tout conseil sur peut-être faire l'ajaxStart/Stop différemment sont plus que bienvenus.

Answer 1

Vous cherchiez quelque chose comme ça?

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

EDIT

Voici une autre solution qui pourrait fonctionner pour vous supposant que l'événement est toujours keyUp (vous pouvez aussi abstraite cela en un plug-in, en passant l'événement, dans ce cas « keyup » comme une option):

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

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

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

Answer 2

Vous pouvez le faire de plusieurs façons. Je ne sais pas comment la structure de votre apparence, mais considère ce code purement et probablement non testé sauvagement cassé extrait:

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

rugueux, mais vous voyez l'idée. Selon la façon dont vous gérez votre Ajax, il peut y avoir des façons beaucoup plus élégantes de gérer cela en utilisant des rappels globaux, plutôt que d'avoir à gérer le spinner pour chaque élément.