带有 AJAX 选项卡问题的 jQuery UI 对话框

Question

我在使用 jQuery 工具选项卡 (AJAX) 和 jQuery UI 对话框（手动为对话框执行 AJAX 加载）时遇到问题。问题是对话框是专门为当前选项卡加载和设置的（通过 AJAX 在选项卡请求中加载，以及选项卡的内容）。 jQuery UI 在创建对话框时，将容器从其原始位置移除，添加其标记，并将其附加到正文。

问题是该对话框现在不在选项卡的内容之外，并且不会在随后的选项卡更改时被替换/删除。如果用户单击另一个选项卡或后退按钮（这些选项卡具有使用 URL 哈希的 AJAX 历史记录，因此实际上并未重新加载页面），则对话框会损坏但不会被删除，因为 jQuery UI 对话框将其移出选项卡内容。它现在只显示在身体的底部。如果用户物理单击关闭按钮，我为此编写了一个“hack around”，但是如果按下后退按钮或通过 AJAX 加载另一个选项卡并且 jQuery UI 实际上将其移回底部，则不会触发此操作身体（不知道它是如何/为什么这样做的！）。有什么建议？如果我对此不清楚，请告诉我。谢谢！ （这是我现在得到的，当用户物理关闭对话框时成功将其删除）

    $('.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

假设设置有一个带有一堆 jQuery Ajax 选项卡的主页，并且每个选项卡 ajax 将一个页面加载到页面内容面板/div 中。

page.html

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

在通过选项卡进行 ajax 处理的页面中，将其放在顶部：

即。在 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');
    });
});

这就是users.html中准备好的表单，它将变成对话框：

<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>

现在正如 OP 所描述的，每次用户在选项卡之间切换并返回此页面时，模态对话框 div (id="delete-user") 都会重复。

javascript 的第一个位迭代所有重复的对话框，并从 DOM 中删除除最后一个之外的所有对话框，因此您最终将只得到一个所需的对话框。

在页面上放置一个按钮/链接/等，其 ID 与顶部位中指定的 ID 相同，以打开对话框。

即。 <input type="button" id="delete-user-button" value="Delete User" />

以这种方式打开对话框可以防止 OP 在省略时发现的重复：autoOpen: false, 从对话框设置选项中直接调用对话框。