The last modifications of this post were around 11 years ago, some information may be outdated!
I ran into an odd issue today with a modal dialog that was generated by jQuery UI.
The modal dialog served to dynamically render a highcharts chart upon opening. For some reason, the second (and ONLY the second) time I triggered the event the chart wouldn't display. After doing some investigating, I found that I had TWO copies of my modal dialog wrapper in the DOM. This was causing confusion with highcharts, which would render the chart in the div that wasn't being displayed.
I looked into some of the .dialog('destroy') and .remove() calls, but nothing worked.
Fortunately, StackOverflow came to the rescue again! (Big HT to Milimetric)
For brevity (and personal reference) here's the code involved.
var original = $('#dialogId')[0];
var clone = $(original).clone().attr('id', 'dialogIdClone');
var saveHtml = $(original).html();
$(original).html('');
$(clone).dialog({
... // other options
open: function (){
// add any dynamic behavior you need to the dialog here
},
close: function(){
$(clone).remove();
$(original).html(saveHtml);
}
});Hope this helps!