Jquery dialog only opening once

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

It seems most likely that the problem lies in the fact that the actual dialog div isn't actually being selected correctly. And that (as far as I'm understanding the situation) stems from a bigger problem of wrong requirements on your part.

If you want to reference a specific div, then you should reference that specific div. Yet, I hear you saying you want to reference a specific div (which is literally the only div which is used as a dialog) at the same time that you say you're afraid to reference that div by an ID.

Basically, if there is only one div that's used as the dialog, then accept that and just call that div a name:

<div id="dialog"/>

.

myDiag = $('#dialog');

This way there is no confusion on if you are selecting the correct div.

However, if what I said is not an option for some reason, then you can set break points in firebug at the point where you assign myDiag so that you can see what myDiag actually is at execution time.

Answer 2

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