我有两个使用jQuery sortable连接的列表。当我将项目从一个列表移动到另一个列表时,会向PHP脚本发出2个ajax请求,该脚本使用列表的内容更新数据库 - 这样可以正常工作。
然而,我随后添加了一个JavaScript确认弹出窗口,并在按下“确定”时将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
中,因此添加项目的列表将不会运行此代码,我只是不知道如何修复它。我尝试分离第1周和第2周可排序,但是没有用,如果我把更新代码从这个条件中取出,那么我会看到一个不同的问题 - 如果我取消那么带有项目的列表会在项目被放回之前更新,所以两个列表最终都没有该项目。我正在做的事情有些不妥。
任何帮助都会很棒!
谢谢,
根据答案更新
$(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;
}
});
});
答案 0 :(得分:2)
您的else
子句重新初始化sortables。看起来您打算在第一个update
初始化程序中使用.sortable({})
处理程序;你根本不需要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)
处理程序绑定也应该包含在就绪处理程序中)