Jquery Dialog - div disappears after initialization

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>

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
    });

});

And the dialog is 'open'ed by

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');

}

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.

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.

The reason you're seeing it remove #confirmation is because $("#foo").dialog() will move #foo from wherever it is in the DOM to the bottom of the document inside wrapper elements that create the dialog styling which are initially hidden. It's understood that dialogs are hidden until opened.

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):

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.
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.

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
    });


});

}

in my case a simple 'return false;' in the click function did the trick:

  $("#buttonIdThatOpensTheDialogWhenClicked")
         .button()
         .click(function () {
                $("#myDialog").dialog("open");
                return false;
         });
  });

Are you sure that one and only one div has id "confirmation"? Duplicate ids aren't allowed.

sigmapi13

The approved answer worked for me too. I was using:

$('.myLink').click(function(){
    $(this).next().dialog(...)
});

and it wasn't there after clicking the first time.

Now I am using the ID direcly:

$("#myId").dialog(...)

and obviously, no matter where dialog moves it on the page, this will find it.

来源：https://stackoverflow.com/questions/2272961/jquery-dialog-div-disappears-after-initialization

标签

jquery

modal-dialog

jquery-ui-dialog