Jquery Dialog - div disappears after initialization

B

5

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.

Boesch answered 16/2, 2010 at 12:53 Comment(4)

Have you looked at the console in firebug to see if there are any errors? – Stadiometer 16/2, 2010 at 12:59

No errors shown on the console – Boesch 16/2, 2010 at 13:7

Why don't you just use jquery ui – Catastrophe 16/2, 2010 at 13:13

I am using JQuery UI; atleast that is what I think. .dialog() is in the JqueryUI framework. – Boesch 16/2, 2010 at 13:16

B

3

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


});

}

Boesch answered 16/2, 2010 at 13:51 Comment(0)

S

5

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.

Shielashield answered 16/2, 2010 at 13:34 Comment(1)

Thanks. I just realized that. I think the problem is that I am searching for the div again in my 'actionContext'. But Jquery has moved that div now outside the scope. So, is ID the only way to open the dialog? – Boesch 16/2, 2010 at 13:39

B

3

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


});

}

Boesch answered 16/2, 2010 at 13:51 Comment(0)

P

3

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

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

Perni answered 20/9, 2013 at 23:56 Comment(0)

B

0

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

Biondo answered 16/2, 2010 at 12:59 Comment(1)

Does JQuery Dialog work on ID's only? Can we not do something like $('div.popup').dialog({..}) ? As of now, I am sure that the page had a single "confirmation" – Boesch 16/2, 2010 at 13:3

G

0

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.

Gusta answered 12/7, 2012 at 18:18 Comment(0)

Recommended topics

Hot tags