jQuery UI 对话框第二次没有打开,但后台无法访问
jQuery UI Dialog is not opening second time, but background is inaccessible
对话框是用 JSTL foreach 标签生成的。
我第一次尝试打开对话框(其中任何一个)时,它正常打开,但我第二次尝试打开它时,由于对话框是模态的,背景变成灰色并且无法访问,但是对话框 window 未显示。
这个问题有很多问题,我通读了很多,但据我了解,其中 none 个描述了这种情况。
这是我的 HTML:
<button id="buttonAddTask${category.id}" class="buttonAddTask">Add Task</button>
...
<div id="dialog${category.id}" title="Create new task" class="task-dialog">
<form:form id="taskForm${category.id}"
action="${contextPath}/someAction"
method="POST" modelAttribute="someAttribute">
<fieldset>
<form:input type="text" path="taskName" id="taskName"
class="text ui-widget-content ui-corner-all" />
<form:textarea rows="4" path="taskDescription"
id="taskDescription" name="taskDescription"
class="text ui-widget-content ui-corner-all">
</form:textarea>
</fieldset>
</form:form>
</div>
这是我的js代码:
$(function() {
var form;
var taskDialog = $(".task-dialog");
var buttonAddTask = $(".buttonAddTask");
taskDialog.dialog({
autoOpen : false,
height : 500,
width : 415,
modal : true,
buttons : {
"Create task" : addTask,
Cancel : function() {
taskDialog.dialog("close");
}
},
close : function() {
var form = $(this).find("form")[0].reset();
allFields.removeClass("ui-state-error");
}
});
function addTask() {
var thisId = $(this).attr("id").substring(6, 106);
$("#taskForm" + thisId).submit();
return true;
}
buttonAddTask.on("click", function() {
var thisId = $(this).attr("id");
var idNumber = thisId.substring(13, 14);
$("#dialog" + idNumber).dialog("open");
});
});
我用 .dialog("open") 打开对话框,然后关闭它。对话框是通过 id 选择器访问的,因此它应该在移动到 body 标记的末尾后可以访问。我做错了什么或者我必须做什么才能第二次显示对话框?
我正在使用 jQuery 2.1.1 和 jQuery-ui 1.11.2。
我搞定了。
这是来自某个示例的 copy/paste,并根据我的需要进行了修改。诀窍是在关闭函数中删除未声明的变量 "allFields"。
要删除的行:
allFields.removeClass("ui-state-error");
如果您遇到类似问题,请检查您的关闭函数是否存在未声明的变量,并将其删除。
对话框是用 JSTL foreach 标签生成的。
我第一次尝试打开对话框(其中任何一个)时,它正常打开,但我第二次尝试打开它时,由于对话框是模态的,背景变成灰色并且无法访问,但是对话框 window 未显示。
这个问题有很多问题,我通读了很多,但据我了解,其中 none 个描述了这种情况。
这是我的 HTML:
<button id="buttonAddTask${category.id}" class="buttonAddTask">Add Task</button>
...
<div id="dialog${category.id}" title="Create new task" class="task-dialog">
<form:form id="taskForm${category.id}"
action="${contextPath}/someAction"
method="POST" modelAttribute="someAttribute">
<fieldset>
<form:input type="text" path="taskName" id="taskName"
class="text ui-widget-content ui-corner-all" />
<form:textarea rows="4" path="taskDescription"
id="taskDescription" name="taskDescription"
class="text ui-widget-content ui-corner-all">
</form:textarea>
</fieldset>
</form:form>
</div>
这是我的js代码:
$(function() {
var form;
var taskDialog = $(".task-dialog");
var buttonAddTask = $(".buttonAddTask");
taskDialog.dialog({
autoOpen : false,
height : 500,
width : 415,
modal : true,
buttons : {
"Create task" : addTask,
Cancel : function() {
taskDialog.dialog("close");
}
},
close : function() {
var form = $(this).find("form")[0].reset();
allFields.removeClass("ui-state-error");
}
});
function addTask() {
var thisId = $(this).attr("id").substring(6, 106);
$("#taskForm" + thisId).submit();
return true;
}
buttonAddTask.on("click", function() {
var thisId = $(this).attr("id");
var idNumber = thisId.substring(13, 14);
$("#dialog" + idNumber).dialog("open");
});
});
我用 .dialog("open") 打开对话框,然后关闭它。对话框是通过 id 选择器访问的,因此它应该在移动到 body 标记的末尾后可以访问。我做错了什么或者我必须做什么才能第二次显示对话框?
我正在使用 jQuery 2.1.1 和 jQuery-ui 1.11.2。
我搞定了。
这是来自某个示例的 copy/paste,并根据我的需要进行了修改。诀窍是在关闭函数中删除未声明的变量 "allFields"。
要删除的行:
allFields.removeClass("ui-state-error");
如果您遇到类似问题,请检查您的关闭函数是否存在未声明的变量,并将其删除。