Ajax spinner на нескольких входах в одной форме - PullRequest
Новая
       3

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

0 голосов
/ 10 сентября 2011

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

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

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

});

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

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

});

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

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

- ОБНОВЛЕНИЕ -

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

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

<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, приветствуются.

Ответы [ 2 ]

0 голосов
/ 10 сентября 2011

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

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

0 голосов
/ 10 сентября 2011

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

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