在.each()循环中的ajax完成后,Jquery运行代码
Jquery run code after ajax in .each() loop finishes
我想在多个ajax调用完成后运行代码。.each()
循环调用所有复选框上的.update()
,它们的更改事件运行ajax代码。
我有一组复选框,选中时每个复选框都会发送一个ajax请求。顶部的复选框将更新所有子复选框以匹配顶部复选框。
我调用了.change()
函数以避免重复代码,因为它们的更改事件已经发送了ajax请求。更改时代码隐藏子复选框,成功函数使复选框再次可见。
我想隐藏父复选框,并且只有在所有子项都用多个ajax请求完成更新后才显示它。
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
// Calls change event for all child checkboxes
// I want it to hide this checkbox until all child ajax calls are complete
$('#wrapper').on('change', '.parent-active', function () {
var checkbox = $(this);
checkbox.css('display', 'none').after('<img src="loading.gif"/>');
var data = $('#category-content');
var boxes = data.find('input[type=checkbox]');
boxes.each(function( index, box ){
if($(box).is(':checked') != $(checkbox).is(':checked')){
$(box).prop('checked', $(checkbox).is(':checked')).change();
}
});
checkbox.css('display', 'inline').next().remove();
});
// Hides checkbox, displays loading image, sends ajax, restores checkbox
$('#wrapper').on('change', '.child-active', function () {
var checkbox = $(this);
checkbox.css('display', 'none').after('<img src="loading.gif"/>');
$.ajax({
url: '/',
type: 'post',
complete: function (data) {
checkbox.css('display', 'inline').next().remove();
}
});
});
});
</script>
<div id="wrapper">
<table><tbody>
<tr><td>Parent</td><td><input type="checkbox" class="parent-active" id="parent-active-1"/></td></tr>
</tbody></table>
<div id ="category-content"><table><tbody>
<tr><td>Child 1</td><td><input type="checkbox" class="child-active" id="child-active-1"/></td></tr>
<tr><td>Child 2</td><td><input type="checkbox" class="child-active" id="child-active-2"/></td></tr>
<tr><td>Child 3</td><td><input type="checkbox" class="child-active" id="child-active-3"/></td></tr>
</tbody></table></div>
</div>
问题是父复选框甚至没有显示加载图像。.change()
调用会立即返回,父复选框甚至在您看到它停用之前就会被恢复。我希望在所有子项都完成之前,保持"父项"复选框不可用。
我试过使用.promise()
和.when()
,但还没有找到解决方案。
如何对多个ajax请求作出反应?
如果要查看页面的精简版本,请选中http://dl.dropboxusercontent.com/u/4621872/stackoverflow.html
使用jQuery Deferred,等待一堆AJAX调用完成非常简单,例如:
var deferreds = [];
$sel.each(function() {
deferreds.push(
$.ajax(); // make AJAX call for element $(this)
);
});
$.when.apply($, deferreds).done(function() {
// all AJAX calls have complete
do_something();
});
例如,如果您想预取所有图像
var deferreds = [];
$('img').each(function() {
deferreds.push(
$.ajax($(this).attr('src'));
);
});
$.when.apply($, deferreds).done(function() {
// all images are now prefetched
});
相关文章:
- 如何动态插入jquery代码
- 如何在php变量中嵌入JQuery代码
- 将 jQuery 代码添加到 Index.aspx 页面
- jquery代码在Mozilla中有效,但在其他浏览器上无效
- Jquery:代码在rails中的页面加载时未执行
- 点击facebook像素跟踪注册(JS/JQUERY代码)
- 我的jquery代码不起作用.为什么?
- 将javascript代码转换为jquery代码时出错
- 在CodeIgniter视图中将Javascript或jQuery代码作为PHP文件编写可以吗
- 按键时停止jquery代码
- 在Grails中的gsp中执行jquery代码
- 这个jquery代码是如何工作的
- 如何在加载角度函数后运行jQuery代码
- 如何使用Javascript或jQuery代码调用mousemove
- 如何使用我的Jquery代码创建委托事件侦听器
- 为什么jQuery代码段在没有IFrame的情况下可以工作,而在有IFrame时却不能工作
- 将JQuery代码转换为等效的JavaScript代码
- JQuery代码语法问题?(“不允许内联控制结构”)
- 使用一个 jquery 代码关闭多个模态
- 如何简化动画jQuery代码