How to recreate jquery dialog after destroy

Question

I'm creating three modal dialogs on page load (using $(document).ready(function() {). I create these dialogs by calling a setDialogWindows() method, and pass it the div for the dialog. Dialog creation code is below:

function setDialogWindows($element) {
 $element.dialog({
  autoOpen: false,
  modal: true,
  show: 'blind',
  hide: 'blind',
  width: 600,
  resizable: false,
  buttons: {
   Cancel: function() {
    $(this).dialog('destroy');
   },
   'Save': function() {
    $(this).dialog('close');
   }
  }
 });
}

I'll spare you the dialog html, but there is some jquery drag/drop functionality that I want to be completely reset when the user clicks Cancel. Hence the $(this).dialog('destroy'). However, when I click the link again to open the dialog box, it doesn't show up. I realize this is because I haven't re-inited it, but I really can't do that because the dialogs are created on page load. I tried adding a recursive call of sorts to the Cancel function as such:

   Cancel: function() {
    $(this).dialog('destroy');
    setDialogWindows($element);
   },

But that doesn't work -- still nothing opens when I click the link that should open it. Is there a way to just recreate the dialog box? Any ideas on where I should be re-initializing the dialog if the only place I do it now is on document.ready?

Thanks.

Answer 1

You can move setDialogWindows into a click handler and turn autoOpen to true, something like:

$('path/to/clickable/elements').click(function(){
  setDialogWindows($element);
});

This will initialize the dialog on every click, and destroy it when it is closed.

You could also just open up separate dialogs, one with the drag and drop functionality, and another without it.