我有一个微调器,当使用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的建议都非常受欢迎。
答案 0 :(得分:0)
你在找这样的东西吗?
$("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
});
});
答案 1 :(得分:0)
你可以通过多种方式做到这一点。我不知道你的结构看起来如何,但请考虑这个纯粹未经测试且可能破坏严重的代码片段:
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的方式,可能有更优雅的方法使用全局回调来处理它,而不是必须管理每个元素的微调器。