Question

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

问题是该对话框现在位于标签内容之外，并且在后续标签更改时不会被替换/删除。如果用户单击另一个选项卡或后退按钮（这些选项卡使用URL哈希具有AJAX历史记录，因此实际上不会重新加载页面），则对话框会被破坏，但由于jQuery UI Dialog将其移出标签内容。它现在只是出现在身体的底部。如果用户在物理上单击关闭按钮，我就为此写了一个'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将页面加载到页面content-panel / 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以打开对话框。

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

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

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

1 个答案: