Спиннер Ajax на нескольких входах в одной форме

У меня есть счетчик, который отображается, когда запрос ajax выполняется с использованием jquery:

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

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

});

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

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

});

В этом случае запрос фактически выполняется при нажатии клавиши, я пытаюсь понять, как использовать этот счетчик в нескольких полях, чтобы счетчик отображался рядом с каждым полем.

Размещение изображения счетчика не является проблемой, но мне сложно подключить изображение к каждому полю. Если это имеет смысл?

--ОБНОВИТЬ--

Ответы очень полезны, но я не думаю, что это то, что я ищу.

У меня есть следующий код:

<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, который выполняет удаленный вызов. Я немного изменил код:

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

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

В тот момент, когда происходит ajax, появляются оба счетчика, я пытаюсь понять, как сделать каждый div счетчика соответствующим своему полю.

Я новичок в Ajax, поэтому любые советы о том, как сделать ajaxStart/Stop по-другому, более чем приветствуются.


jquery ajax spinner
person Darcbar    schedule 10.09.2011    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы искали что-то подобное?

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

ИЗМЕНИТЬ

Вот еще одно решение, которое может сработать для вас, предполагая, что событие всегда является keyUp (вы также можете абстрагировать его в плагин, передав событие, в данном случае «keyup» в качестве опции):

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

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

    // Initiate the ajax request
    $.ajax({
         // Handle complete, hide spinner
    });
 });
person Ryan Wright    schedule 10.09.2011

arrow_upward
0
arrow_downward

Вы можете сделать это несколькими способами. Я не знаю, как выглядит ваша структура, но рассмотрите этот чисто непроверенный и, вероятно, дико сломанный фрагмент кода:

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, могут быть гораздо более элегантные способы справиться с этим, используя глобальные обратные вызовы, вместо того, чтобы управлять счетчиком для каждого элемента.

person numbers1311407    schedule 10.09.2011