Question

我有一个微调器，当使用jquery：

创建ajax请求时显示

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

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

});

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

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

});

在这种情况下，请求实际上是在keyup上进行的，我正在尝试研究如何在多个字段上使用此微调器，因此微调器将显示在每个字段旁边。

放置微调器图像不是问题，但是将图像连接到每个场是我发现困难的。如果这有意义吗？

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

这两个字段都有一个进行远程调用的键盘。我稍微更改了代码：

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

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

当ajax发生两个微调器出现时，我正试图弄清楚如何使每个微调器div与其场相关。

我是Ajax的新手，所以任何有关可能以不同方式执行ajaxStart / Stop的建议都非常受欢迎。

Answer 1

你在找这样的东西吗？

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

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的方式，可能有更优雅的方法使用全局回调来处理它，而不是必须管理每个元素的微调器。

Ajax微调器以相同的形式输入多个输入

2 个答案: