Geek Answers Handbook

Jquery Dialog - div disappears after initialization

The jQuery dialog has been giving me a lot of pain lately. I have the following div that I want to pop up. (Ignore classes do not show double quotes in 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 for this ...

$(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 'open'ed dialog box

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 with the initialization itself. When the document is loaded, it <div #confirmation>is removed from the markup! I used to have a similar problem, but I can't use this solution here. On this page I can have several PopUp sections.

When I added the initialization just before it was opened; the form has appeared. But after I close it, the div is deleted; therefore, I can no longer see the popup.

+5
5

. , , .

"" , (, ):

  • a <div> , <body> <div class="ui-dialog">. , "" .

  • , . id div, .

  • , . , AJAX, , ( , ). , . , AJAX , .

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


});

    }

+3

, #confirmation, , $("#foo").dialog() #foo DOM , , . , .

+5

"return false"; :

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

Are you sure that one and only one div has an id confirmation? Duplicate identifiers are not allowed.

0
source

The approved answer worked for me as well. I used:

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

and he was gone after the first click.

Now I use the ID directly:

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

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

0
source

More articles:


All Articles