jQuery UI的对话框不会关闭 [英] jQuery UI Dialog Will Not Close
问题描述
由于以下脚本：
$（函数（）{
$（。editLink）按钮（）; $（'＃editPersonDialog'）。对话框（{
的AutoOpen：假的，
宽度：800，
可调整大小：假的，
标题：编辑个人，
模式：真实，
纽扣： {
保存：功能（）{
$（＃更新消息）HTML（''）。
$（＃updatePersonForm）提交（）。
}，
关闭：功能（）{
$（本）.dialog（'接近'）;
}
}，
关闭：函数（事件，UI）{
$（本）.dialog（'接近'）;
}
}）; $（。editLink）。点击（函数（）{
VAR dialogDiv = $（'＃editPersonDialog'）;
VAR linkObj = $（本）;
VAR viewUrl = linkObj.attr（'HREF'）;
$获得（viewUrl，功能（数据）{
dialogDiv.html（数据）;
//验证
变量$ =形式$（＃updatePersonForm）;
//解除绑定现有的验证
$ form.unbind（）;
$ form.data（验证，NULL）;
//检查文件更改
$ .validator.unobtrusive.parse（文件）;
//有改动再添加验证
$ form.validate（$ form.data（unobtrusiveValidation）选项。）;
//打开对话框
dialogDiv.dialog（开放）;
}）; 返回false;
}）;
}）;功能updateSuccess（）{
如果（$（＃更新消息）。HTML（）==真）{
$（'＃editPersonDialog'）对话框（亲密）;
$（＃commonMessage）HTML（更新完成）。
$（＃commonMessage）延迟（400）.slideDown（400）.delay（3000）.slideUp（400）;
}
其他{
$（＃更新消息）显示（）。
}
}
如果我点击对话框中的X按钮，窗体关闭的罚款。如果我点击关闭按钮，那么它不会关闭。我已经验证了的关闭按钮，code被调用。
这两个X按钮和关闭按钮都运行相同的语句：'$（本）.dialog（'接近'）;。为什么人会工作，其他的不行？
作为抛开对话框不会打开第二个时间，除非我刷新页面。我想，这些2个问题可能是相关的。
我发现有很多人有类似的问题，一个数字，为他们工作不同的解决方案。遗憾的是他们没有为我工作。
进一步信息：
该对话框显示的局部视图在Ajax的形式：
@using（Ajax.BeginForm（编辑，人，空，
新AjaxOptions
{
UpdateTargetId =更新消息，
InsertionMode = InsertionMode.Replace，
列举HTTPMethod =POST
的onSuccess =updateSuccess
}，
新{@id =updatePersonForm}））
{
@ Html.ValidationSummary（真）
＆LT; DIV ID =更新消息级=hiddenDiv＆GT;＆LT; / DIV＆GT;
＆LT; DIV CLASS =blockGraygradient＆GT;
@ Html.Partial（_ CreateEditCommon）
@ Html.HiddenFor（型号=＆GT; model.SelectedPerson.Id）
@ Html.HiddenFor（型号=＆GT; model.SelectedPerson.RowVersion）
@ Html.HiddenFor（型号=＆GT; model.SelectedPerson.CreateTime）
＆LT; / DIV＆GT;＆LT; P /＆GT;
}
我发现的这两个问题的原因（关闭按钮没有工作，而无需刷新页面暂时无法显示对话框不止一次）是我必须包括引用到我的两个主页和局部视图我的脚本文件正在由对话框中显示。有一次，我从局部视图中删除脚本引用的问题消失了。
（顺便说一句现在这已经提出了另外一个问题做一个Ajax更新返回到主页面时，被关闭对话框。我觉得这是我把脚本放在局部视图摆在首位的原因）
Given the following script:
$(function () {
$(".editLink").button();
$('#editPersonDialog').dialog({
autoOpen: false,
width: 800,
resizable: false,
title: 'Edit Person',
modal: true,
buttons: {
"Save": function () {
$("#update-message").html('');
$("#updatePersonForm").submit();
},
"Close": function () {
$(this).dialog('close');
}
},
close: function (event, ui) {
$(this).dialog('close');
}
});
$(".editLink").click(function () {
var dialogDiv = $('#editPersonDialog');
var linkObj = $(this);
var viewUrl = linkObj.attr('href');
$.get(viewUrl, function (data) {
dialogDiv.html(data);
//validation
var $form = $("#updatePersonForm");
// unbind existing validation
$form.unbind();
$form.data("validator", null);
// check document for changes
$.validator.unobtrusive.parse(document);
// re-add validation with changes
$form.validate($form.data("unobtrusiveValidation").options);
// open dialog
dialogDiv.dialog('open');
});
return false;
});
});
function updateSuccess() {
if ($("#update-message").html() == "True") {
$('#editPersonDialog').dialog('close');
$("#commonMessage").html("Update Complete");
$("#commonMessage").delay(400).slideDown(400).delay(3000).slideUp(400);
}
else {
$("#update-message").show();
}
}
If I click the "X" button on the dialog the form closes fine. If I click the "Close" button then it does not close. I have verified that the code for the "Close" button is being called.
Both the "X" button and the "Close" button are both running the same statement: '$(this).dialog('close');'. Why would one work and the other not work?
As an aside the dialog will not open a second time unless I refresh the page. I imagine that these 2 problems may be related.
I have found many people with similar problems and a number of different solutions that worked for them. Unfortunately none of them worked for me.
Further Info:
The dialog displays a partial view in an Ajax form:
@using (Ajax.BeginForm("Edit", "Person", null,
new AjaxOptions
{
UpdateTargetId = "update-message",
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
OnSuccess = "updateSuccess"
},
new { @id = "updatePersonForm" }))
{
@Html.ValidationSummary(true)
<div id="update-message" class="hiddenDiv"></div>
<div class="blockGraygradient">
@Html.Partial("_CreateEditCommon")
@Html.HiddenFor(model => model.SelectedPerson.Id)
@Html.HiddenFor(model => model.SelectedPerson.RowVersion)
@Html.HiddenFor(model => model.SelectedPerson.CreateTime)
</div><p/>
}
I found out that the cause of both problems (the close button not working and being unable to show the dialog more than once without refreshing the page) was that I had included references to my script files in both my main page and the partial view being displayed by the dialog. Once I removed the script references from the partial view the problems disappeared.
(As an aside this has now raised another problem to do with an Ajax update back onto the main page when the dialog is closed. I think this is the reason that I put the scripts into the partial view in the first place).
这篇关于jQuery UI的对话框不会关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
