jQuery排序只有一个列表仍然更新,如果取消
jQuery Sortable only one list still updated if cancelled
我有2个列表,使用jQuery可排序连接。当我将一个项目从一个列表移动到另一个列表时,向PHP脚本发出2个ajax请求,该脚本使用列表的内容更新数据库-这工作良好。
然而,我随后添加了一个JavaScript确认弹出窗口,并在按下'OK'时将ajax请求置于此条件下。如果我在这个弹出框上按"取消",那么这仍然可以正常工作-然而,如果我"取消",那么有一个项目移动的列表不更新,所以两个列表最终与项目。
这是我的代码:
$(function() {
$(".week1").sortable({
connectWith: ".week2, .week1"
}).disableSelection();
});
$(".week1, .week2").on("sortreceive", function (event, ui) {
var answer = confirm("Move job?");
if (!answer) {
$(ui.sender).sortable('cancel');
return false;
}else{
$('.week1, .week2').sortable({
update: function (event, ui) {
var data = $(this).sortable('serialize');
$.ajax({
data: data,
type: 'POST',
url: 'ajax_user_schedules.php'
})
.done(function( response ){
console.log( response );
});
}
});
}
});
这个问题是有意义的,因为要更新的代码在else
中,所以添加了一个项目的列表不会运行这个代码,我只是不知道如何修复它。我试着将week1和week2排序表分开,但这不起作用,如果我将更新代码从这种情况中取出,那么我就会看到一个不同的问题-如果我取消,那么在项目放回去之前,有一个项目被拿走的列表就会更新,所以两个列表最终都没有项目。我正在做的事情一定有问题。
任何帮助将是伟大的!
谢谢,
基于答案的UPDATE
$(function() {
$(".week1, .week2").sortable({
connectWith: ".week2, .week1",
update: function (event, ui) {
var data = $(this).sortable('serialize');
console.log(this); // this is shown before confirm popup appears
$.ajax({
data: data,
type: 'POST',
url: 'ajax_user_schedules.php'
})
.done(function( response ){
console.log( response );
});
}
}).disableSelection();
$(".week1, .week2").on("sortreceive", function (event, ui) {
var answer = confirm("Move job?");
if (!answer) {
$(ui.sender).sortable('cancel');
return false;
}
});
});
您的else
子句重新初始化排序表。看起来你打算在第一个.sortable({})
初始化器中使用update
处理程序;您根本不需要update
,因为它会在每次dom更改时触发。把它拉到它自己的函数中:
$(".week1").sortable({
connectWith: ".week2, .week1"
}).disableSelection();
var update = function (sortable) {
var data = $(sortable).sortable('serialize');
$.ajax({
data: data,
type: 'POST',
url: 'ajax_user_schedules.php'
})
.done(function( response ){
console.log( response );
});
}
$(".week1, .week2").on("sortreceive", function (event, ui) {
var answer = confirm("Move job?");
if (!answer) {
$(ui.sender).sortable('cancel');
return false;
}
else {
update($(".week1"));
update($(".week2"));
}
});
(另外,.on(sortreceive)
处理程序绑定也应该包装在一个ready处理程序中)
相关文章:
- 如何检查Json文件更新,如果更新了,则用更新的数据刷新我的页面
- JSON:loop Invoice Items:如果InvoiceNo未退出则添加,如果退出则更新值,示例包括在内
- 如果我不应该在组件WillUpdate中调用setState,如何更新状态(使用ReactJS)
- 如果在线检查期间发生电源故障,我们如何更新用户再次登录门户时的剩余时间
- ng,如果没有捕获更新的$scope值
- 如果在DIV的底部,JQuery会更新
- 如何使用Passport.js本地策略检查当前密码并(如果正确)更新密码
- 检查文档是否已经存在,如果是则更新,否则创建新的Mongoose
- 从数组中删除值,用新的数组总数更新html或'$'如果没有总计
- 表单在每个页面中 - 仅在特定页面上处理它 - 如果当前不在页面上 - 重定向 - 否则 - 使用 AJAX 更新数据
- jQueryAjax SQL-如果我在多个用户上单击编辑,则Ajax会更新我单击的所有内容.不是最后一个点击
- 如果选择/下拉列表发生更改,则Mysql会更新
- 如果正在创建或更新项目,请在模型“validate”内部进行区分
- Mongoose创建一个文档,如果找不到指定的字段,则更新文档中的数组
- 如果HTML文件已更新,则执行JavaScript 2
- 如果值为true,AngularJS将更新ng模型
- 检查第 n 个子项是否存在,如果没有,则创建并更新
- 如果源 json 已更新(添加或删除项目),则动态更新 D3 旭日
- 如果外部应用程序更改了持久模型(服务器数据库),AngularJS 是否可以自动更新视图
- 在MongoDB中查询数组中的数组;更新如果存在,插入如果为空