AJAX Tabs and replicated dialogs

AJAX Tabs and replicated dialogs

I couldn't find any posts discussing this problem, so I'll start one...

My project had a couple of tabs that loaded remote pages, each of which had one of more modal jQuery UI dialogs in them. My goal was simple:

  • click a button
  • display the dialog
  • close the dialog
  • reload the tab

All of that seemed to work nicely, until I clicked the button again and found that the dialog was being replicated. A brand new dialog (with the same ID) would appear and cause me grief, because jQuery kept referring back to the original dialog for content.

The workaround that I found the easiest was to place the dialog divs into the page containing the tabs, instead of in the tab content themselves. It's not perfect, because now the remote content won't work properly if loaded outside of the tabbed environment, but at least the dialogs don't replicate!

I hope that helps someone in the future.