问题描述
JQuery Dialog 最近让我很痛苦.我有以下要弹出的 div.(忽略类在语法中不显示双引号)
JQuery Dialog is giving me lots of pain lately.I have the following div which I want to be popped up. (Ignore that the classes do not show the double quotes in the syntax)
TABLE class=widget-title-table border=0 cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD class=widget-title><SPAN class=widget-title>Basic Info</SPAN></TD>
<TD class=widget-action>
<DIV id=edit-actions jQuery1266325647362="3">
<UL class="linkbutton-menu read-mode">
<LI class="control-actions">
<A id="action-button" class="mouse-over-pointer linkbutton">Delete this stakeholder</A>
<DIV id="confirmation" class="confirmation-dialog title=Confirmation">
Are you sure you want to delete this stakeholder?
</DIV>
</LI></UL></DIV></TD></TR></TBODY></TABLE>
用于此的 JQuery 是 ...
The JQuery for this is ...
$(document).ready(function() {
$('#confirmation').dialog({
bgiframe: true, modal: true, autoOpen: false, closeOnEscape: false,
draggable: true, position: 'center', resizable: false, width: 400, height: 150
});
});
对话框是由
var confirmationBox = $('#confirmation',actionContent);
if (confirmationBox.length > 0) {
//Confirmation Needed
$(confirmationBox).dialog('option', 'buttons', {
'No': function() {
$(this).dialog('close');
},
'Yes': function() {
$('ul.read-mode').hide();
$.post(requestUrl, {}, ActionCallback(context[0], renderFormUrl), 'json');
$(this).dialog('close');
}
});
$(confirmationBox).dialog('open');
}
问题始于初始化本身.当文档加载时，<div #confirmation> 将从标记中删除！我之前遇到过类似的问题，但我不能在这里使用该解决方案.在这个页面上，我可以有多个 PopUp div.
The problem starts in the initialization itself.When the document loads, the <div #confirmation> is deleted from the markup!I had a similar issue earlier, but I cannot use that solution here.On this page I can have multiple PopUp divs.
当我在打开它之前添加初始化时；表格弹出.但是在我关闭它之后， div 被删除了；所以我再也看不到弹出窗口了.
When I added the initialization in just before opening it; the form popped up. But after I close it, the div is removed; so I am not able to see the popup again.
推荐答案
好的.我想我已经在你们的帮助下成功了.
Okay. I think I have nailed it with the help from you guys.
我现在知道的关于对话的一些自定义"事实(如果我错了，请纠正):
Some "self-defined" facts about dialog that I know now (Please correct if I am wrong):
当一个
<div>被初始化为一个对话框时，它会从原来的位置被移除并移动到一个<body>元素中<div class="ui-dialog">.所以它自然地"消失了.
When a
<div>is initialized as a dialog, it is removed from its original location and moved to the<body>element in a<div class="ui-dialog">. So it 'naturally' disappears.
要选择对话框，您现在需要一个唯一标识符.在大多数情况下，它可以是 id，也可以是该 div 上的一些其他属性，使其在页面上独一无二.
To select the dialog, you now need a unique identifier. It can be the id in most cases, or some other attributes on that div which makes it unique on the page.
每次初始化对话框时都会创建对话框标记.因此，在 AJAX 调用的情况下，如果启动了已经存在的对话框，您将多次收到弹出窗口(与重新初始化一样多次).为了解决这个问题，我在重新初始化之前删除了现有的对话框标记.我必须这样做，因为我的 AJAX 响应可能有一些需要启动的对话框.
The dialog markup is created every time the dialog is initialized. So, in case of AJAX calls if an already existing dialog is initiated, you will get the popup more than once (as many times it was reinitialized). To solve this, I deleted the existing dialog markups before reintializing. I had to do this because my AJAX response may have some dialogs that need to be initiated.
function InitializeConfirmationDialog() {
$('div.confirmation-dialog').each(function() {
var id = $(this).attr("id");
if ($('div.ui-dialog-content[id="' + id + '"]').length > 0) {
$('div.ui-dialog-content[id="' + id + '"]').parents('div.ui-dialog:first').html("").remove();
}
$(this).dialog({
bgiframe: true, modal: true, autoOpen: false, closeOnEscape: false,
draggable: true, position: 'center', resizable: false, width: 400, height: 150
});
});
}
这篇关于Jquery Dialog - 初始化后div消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！