Question

我有一个对话框（users.html），可以从中加载第二个对话框（user.html）;当我关闭第二个对话框时，我收到错误。 qualcuso可以帮助我吗？谢谢！

我在下面显示了我简化的两个文件的代码：

file users.html：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>    

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

    <title>Users...</title>

</head>
<body>
    <div>   
        <div id="div_users" title="Users...">
            <button id="btn_user">User</button>
        </div> 
        <div id="div_users_user" >
        </div>
    </div>


</body>
<script type="text/javascript">
    $('#div_users').dialog({
        width: 500,
        height: 400,
        modal: true,
        resizable: true,
        autoOpen: true,
        close: function(event, ui){
            console.log('close Users');
            $('#div_users').dialog('destroy').remove();
        },

        buttons: {
            "Close": function(event, ui) {
                $(this).dialog( "close" );
            }
        }
    });

    $(document).ready(function () {
        $("#btn_user").click(function () {
            console.log("New");
            $('#div_users_user').load('user.html');
        });
    });

</script>
</html>

file user html：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>    

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

    <title>User...</title>

</head>
<body>
    <div id="div_add_edit_user" title="New User...">
        <div id="div_user_main">
        </div>
    </div>


</body>
<script type="text/javascript">
    $('#div_add_edit_user').dialog({
        width: 'auto',
        height: 'auto',
        modal: true,
        resizable: true,
        autoOpen: true,
        close: function(event, ui){
            $('#div_add_edit_user').dialog('destroy').remove();
        },
        buttons: {
            "Save": function() {
                //TO DO..
                $('#div_add_edit_user').dialog('close');

            },
            "Cancel": function(event, ui) {
                $('#div_add_edit_user').dialog('close');
            }
        }
    });


</script>
</html>

Answer 1

您的第二个文件（＆＃34; user.html＆＃34;）实际上不是整页，而是更多的代码段。因此，它不需要再次声明jquery和jqueryui。事实证明，你声明它们两次并且存在冲突。

Answer 2

users.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>    

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

    <title>Users...</title>

</head>
<body>
    <div>   
        <div id="div_users" title="Users...">
            <button id="btn_user">User</button>
        </div> 
        <div id="div_users_user" >
        </div>
    </div>


</body>
<script type="text/javascript">
    $('#div_users').dialog({
        width: 500,
        height: 400,
        modal: true,
        resizable: true,
        autoOpen: true,
        close: function(event, ui){
            console.log('close Users');
            $('#div_users').dialog('destroy').remove();
        },

        buttons: {
            "Close": function(event, ui) {
                $(this).dialog( "close" );
            }
        }
    });

    $(document).ready(function () {
        $("#btn_user").click(function () {
            console.log("New");
            $('#div_users_user').load('user.html');
        });
    });

</script>
</html>

user.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">


    <title>User...</title>

</head>
<body>
    <div id="div_add_edit_user" title="New User...">
        <div id="div_user_main">
        </div>
    </div>


</body>
<script type="text/javascript">
    $('#div_add_edit_user').dialog({
        width: 'auto',
        height: 'auto',
        modal: true,
        resizable: true,
        autoOpen: true,
        close: function(event, ui){
            console.log('close');
            //$('#div_add_edit_user').parent.dialog('destroy').remove();
            $(this).dialog('destroy').remove();
        },
        buttons: {
            "Save": function() {
                //TO DO..
                $('#div_add_edit_user').dialog('close');

            },
            "Cancel": function(event, ui) {
                console.log('cancel');
                //$('this').dialog('close');
                $('#div_add_edit_user').dialog('close');
            }
        }
    });


</script>
</html>

Answer 3

我做的邮政编码。在Mozilla Firefox 49中测试。工作方式如下：第一个对话框打开后页面完全加载;如果你点击“用户”打开另一个对话框。单击“保存”按钮或“取消”后，第二个对话框将正确关闭。开发工具没有错误。如果我理解正确，这正是所需要的。

users.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <title>Users...</title>
</head>
<body>
    <div>
        <div id="div_users" title="Users...">
            <button id="btn_user">User</button>
        </div>
        <div id="div_users_user">
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#div_users').dialog({
                width: 500,
                height: 400,
                modal: true,
                resizable: true,
                autoOpen: true,
                buttons: [{
                    text: "Close",
                    click: function () {
                        $('#div_users').dialog("close");
                    }
                }]
            });
            $("#btn_user").click(function () {
                console.log("New");
                $('#div_users_user').load('user.html');
            });
        });
    </script>
</body>
</html>

user.html

<!DOCTYPE html>
<html>
<head>
    <title>User...</title>
</head>
<body>
    <div id="div_add_edit_user" title="New User...">
        <div id="div_user_main">
        </div>
    </div>
    <script type="text/javascript">
            $('#div_add_edit_user').dialog({
                width: 'auto',
                height: 'auto',
                modal: true,
                buttons: [
                   {
                       text: "Save",
                       click: function () {
                           $(this).dialog("close");
                       }
                   },
                   {
                       text: "Cancel",
                       click: function () {
                           $("#div_add_edit_user").dialog("close");
                       }
                   }
                ]
            });
    </script>
</body>
</html>

未解决的JQuery对话框：错误：在初始化之前无法调用对话框上的方法;试图调用方法'关闭'

3 个答案: