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

Quick TipI 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.

Hope this helps!



What are your 10 bits on the matter? I want to know!

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s