jQuery UI Dialog with AJAX Tabs Problem

Question

I'm having an issue using jQuery Tools Tabs (AJAX) along with jQuery UI Dialog (manually doing the AJAX loading for the dialog). The issue is that the dialog is loaded and setup specifically for the current tab (loaded on the tab request via AJAX, along with the tab's content). jQuery UI, when creating the dialog, removes the container from it's original position, adds its markup, and appends it to the body.

The issue is that the dialog is now outside of the tab's content and will not get replaced/removed on subsequent tab changes. If the user clicks another tab, or the back button (these tabs have an AJAX history using the URL hash, so the page is not actually reloaded), the dialog is broken but doesn't get removed since jQuery UI Dialog moved it outside of the tab content. It now just shows up at the bottom of the body. I wrote a 'hack around' for this if the user physically clicks the close button, but this doesn't get fired if the back button is pressed or another tab is loaded via AJAX and jQuery UI actually MOVES IT BACK to the bottom of the body (Not sure how/why it does that!). Any suggestions? And please let me know if I wasn't clear on any of that. Thanks! (Here's what I've got now, that successfully removes it when the users physically closes the dialog)

    $('.openMyDialog').click(function() {

                    // Create div for dialog
        $('body').append('<div id="modalContainer"></div>');

        // Load dialog with AJAX
        $('#modalContainer').load('loadMyAjaxContent.html').dialog({
            modal: true,
            width: 850,
            open: function(type,data) {
                // Remove from bottom of body and put it back into the tab's content
                $(this).parent().appendTo('.panes div:first');
            },
            close: function() {
                $(this).dialog('destroy');
                $('#modalContainer').remove();
            }
        });


    });

Answer 1

Assuming the setup of having a main page with a bunch of jQuery Ajax tabs and each tab ajax-loads a page into the page content-panel/div.

page.html

 ----/home\---/users\---
|<div id="page-content">|
|   page content gets   |
|   loaded in here      |
|</div>                 |

Within the page that gets ajax'd in by the tab, put this at the top:

ie. in users.html

$(document).ready(function()
{
    $('.delete-user-form').each(function(){
        if($('.delete-user-form').length > 1)
            $(this).detach();
    });

    $('#delete-user').dialog({
        autoOpen: false,
        height: 200,
        width: 300,
        modal: true,
        buttons: {
            Cancel: function() {
                $(this).dialog('close');
            },
            'Save': function() {
                $('#delete-user-form').submit();
                $(this).dialog('close');
            }
        }
    });

    $('#delete-user-button').click(function(){
        $('#delete-user').dialog('open');
    });
});

And that's the prepared form in users.html which will be turned into the dialog box:

<div id="delete-user" class="delete-user-form" title="Delete User" style="display:none;">
    <form action="/admin/users/delete" id="delete-user-form" method="POST">
        <input type="hidden" id="user-id" name="userID" />
        <table cellspacing="0" cellpadding="5px" border="0" id="delete-user-form-table" style="display:none;">
            <tr>
                <td>
                    Do you really want to delete:
                </td>
                <td>
                    <input type="text" id="user-name" />
                </td>
            </tr>
        </table>
    </form>
</div>

Now as the OP describes, every time the user switches between tabs and comes back to this page, the modal dialog div (id="delete-user") gets duplicated.

The first bit of javascript iterates over all the duplicate dialogs and deletes all but the last one from the DOM so you'll end up with only one as desired.

Place a button/link/etc on the page with the ID as specified in the top bit to open the dialog.

ie. <input type="button" id="delete-user-button" value="Delete User" />

Opening the dialog this way prevents the duplication that the OP found when he omitted: autoOpen: false, from the dialog setup options and called the dialog directly.