How to recreate jquery dialog after destruction

Question

I create three modal dialogs when the page loads (using $(document).ready(function() { ). I create these dialogs by calling the setDialogWindows() method and passing it a div for the dialog. The 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 will show you the html dialog, but there are some jquery drag and drop functions that I want to completely reset when the user clicks the Cancel button. Therefore, $(this).dialog('destroy') . However, when I click the link again to open the dialog box, it does not appear. I understand that this is because I did not republish it, but I really can not do this because the dialogs are created when the page loads. I tried adding a recursive call of the sort to the Cancel function as such:

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

But this does not work - still nothing opens when I click on the link that should open it. Is there a way to just create a dialog box? Any ideas on where I should reinitialize the dialog if the only place I am doing this right now is on document.ready?

Thanks.

Answer 1

You can move setDialogWindows to the click handler and turn autoOpen on true, something like:

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

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

You can also simply open individual dialogs, one with a drag and drop function, and the other without it.