jQuery UI Dialog with AJAX Tabs Problem -

-

Using the jQuery Tools tab (AJAX) with jQuery UI Dialog (Manually doing AJAX Loading I dialog). The problem is that the dialog is loading and specially set for the current tab (loaded on tab requests via AJAX with tab content). The jQuery UI, when creating a dialogue, removes the container from its original state, adds its markup, and adds it to the body

The problem is that the dialog is now outside the contents of the tab and later the tab Changes will not be replaced / removed. If the user clicks on another tab, or back button (there is an AJAX history using the tab URL hash, the page is not actually reloaded), the dialog has been broken, but it has not been deleted Because the jQuery UI dialogue has taken it out of the tab content it now appears in the lower part of the body. I wrote 'hack around' for it if the user physically closes Does not click, but it also has pressed the back button or load any other tabs through AJAX and jQuery UI, it is not removed. Body (Not sure how it does!) Any suggestions? And please tell me that I was not made clear on any of them. Thanks! (This is what I have now got, it successfully eliminates the users when they stop communicating physically) 

  $ ('OpenMyDialog'). Click (Create function dialogue $ ('body') .x $ ('# Model Container') for Div (function () {// div} ('& lt; div id = "modalContainer" & gt; ; / Div & gt; '); // Load dialog load (' loadMyAjaxContent.html ') .dialog ({modal: true, width: 850, open: function (type, data) {// remove from body bottom and It has the content of the tab put in $ (this) .Parent (). AppendTo ('.pan div: first');}, close: function ($ {$ (this) .dialog ('deleted'); $ ( '# ModalContainer'). Remove ();}});});

The tab page loads the page in the AJAX-page content-panel / div.

page.html 

  ---- / home \ --- / users \ - - | & Lt; Div id = "page-content" & gt; | | Page content is made. | Loaded here | & Lt; / Div & gt; |

The tab inside which ajax gets inside the page, place it on top:

i.e. Users.html 

  $ (document) .ready (function () {$ ('. Delete-user-form'). Each (function () {if ($ ('. & Gt; 1) $ (this) .detach ();}); $ ('# delete-user'). Dialog ({autoOpen: false, height: 200, width: 300, Model: true, button: {Canceled Do: ($) ($) (); $ (this) .dialog ('close');}, 'Save': function () {$ ('# delete-user-form'). Submit (); $ (This) .dialog ('Close');}}} $ ('# delete-user-button'). Click (function () {$ ('# delete-user'). Dialog ('open');}); );

and it is a ready form in users.html which will be replaced in the dialog box: 

  
 gt; table cell area = "0" cellpadding = "5px" limit = "0" id = " Delete-user-form-table "style =" display: none; "& gt; & Lt; TR & gt; & Lt; TD & gt; Are you sure you want to delete: & lt; / Td> & Lt; TD & gt; & Lt; Input type = "text" id = "user-name" /> & Lt; / TD & gt; & Lt; / TR & gt; & Lt; / Table & gt; & Lt; / Form & gt; & Lt; / Div & gt;

Now when OP describes, every time the user switches between tabs and returns to this page, the modal dialogue div (id = "delete-user") repeated goes.

The first bit of javascript repeats on all duplicate dialogs and removes everyone from the DOM finally, so that you will end up with only one as desired.

Click to open a button / link / etc

i.e. the & lt; Input type = "button" id = "delete-user-button" value = "delete user" / & gt;

Opening the dialog prevents duplication this way leaving OP when they left: autoOpen: Wrong, Dialog Setup option and dialogue directly called.