Question

All-
I know this has been asked, but the previous solutions don’t seem to apply to my situation.

I have a simple table with a number of records in each row, with the final column being a delete hyperlink. I’m trying to use the dialog to pop up and confirm delete. This works perfectly if I use explicit names of the div where the dialog is (I position it exactly one div above the div where the table is). I use a destroy first which seems to solve the “only opens once” problem, as long as as I name the dialog div. I’m trying to universalize the code, so I’d rather get away from explicitly naming the div where the dialog will live, but rather refer to the prev div. This works the first time, but subsequent clicks do not:

<code>
   $(".deleteLinkDiag a").livequery('click',function() {

    var myParent = $(this).parents("div:eq(0)"); //container div to be replaced
    var myDiag   = $(myParent).prev("div");     //one div before container div
    var urlLoad = $(this).attr("href");
    $(myDiag).dialog('destroy');
    $(myDiag).dialog({ 
            bgiframe: true,
            resizable: false,
            height:140,
            modal: true,
            autoOpen: false,
            overlay: {
                backgroundColor: '#000',
                opacity: 0.5
            },
            buttons: {
                    "Confirmz":function() 
                    { 
                        myParent.load(urlLoad, function() { });
                        $(this).dialog("close");
                     },
                    Cancel: function() 
                    {  
                        $(this).dialog("close");
                    }
            },
            //close: function(ev, ui) { $(this).dialog('destroy');}
      });
     $(myDiag).dialog('open');
return false;
});
</code>

Any ideas?

Answer 1

OKay, so hopefully this will help someone down the road. I actually had two problems going on:

1. If you dont’ destroy the dialog(), then it doesn’t really exist in the DOM under the old name. That’s why it was always undefined the second time through.
2. Even if you DO destroy the dialog, you still can’t find it. That’s because when dialog theoretically returns it to pre-init state, it does so by dropping it at the bottom of the DOM right before the body tag. So, it’s no longer in “prev” , or “prevAll”.

I got around this by just setting the name of the dialog box to be the same as the calling div, appended with “Diag”. Then I can track it no matter where jquery puts it. Whew.

$(".deleteLinkDiag a").livequery('click',function() {
            var urlLoad = $(this).attr("href");
            var myParent = $(this).parents("div:eq(0)"); //container div to be replaced
            var myDiag = myParent.attr('id') + 'Diag';
            $("#" + myDiag).dialog({
                    bgiframe: true,
                            resizable: false,
                            height:140,
                            modal: true,
                            autoOpen: false,
                            overlay: {
                                    backgroundColor: '#000',
                                    opacity: 0.5
                            },
                    buttons: {
                                    "Confirm":function()
                                    {
                                            myParent.load(urlLoad, function() { });
                                            $(this).dialog("close");
                                     },
                                    Cancel: function()
                                    {
                                            $(this).dialog("close");
                                    }
                              },
                    close: function(ev, ui) {
                            $(this).dialog("destroy");
                    }
      });
     $("#" + myDiag).dialog('open');
    return false;
    });