Quick Tip: Fixing duplicate/hidden dialog anomalies with jQuery UI

Published Jan 25, 2013 (11 years ago)
Danger icon
The last modifications of this post were around 11 years ago, some information may be outdated!

Quick Tip 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();

... // other options
open: function (){
// add any dynamic behavior you need to the dialog here
close: function(){

Hope this helps!