jQuery对话框-初始化后div消失 [英] Jquery Dialog - div disappears after initialization
问题描述
"jQuery对话框"最近给我带来了很多痛苦. 我有以下要弹出的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>初始化为对话框时，会将其从其原始位置删除并移至<div class="ui-dialog">中的<body>元素.因此它自然地" 消失了.
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对话框-初始化后div消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
