Блог

Главная - Вопросы по программированию - неразрешенный диалог jQuery: Ошибка: не удается вызвать методы в диалоговом окне до инициализации; попытка вызвать метод ‘close’

неразрешенный диалог jQuery: Ошибка: не удается вызвать методы в диалоговом окне до инициализации; попытка вызвать метод ‘close’

#jquery #jquery-ui

#jquery #jquery-ui

Вопрос:

У меня есть диалоговое окно (users.html ) из которого загрузить второй диалог (user.html ); когда я закрываю второе диалоговое окно, я получаю сообщение об ошибке. qualcuso может мне помочь? Спасибо!

I ниже показан код двух файлов, которые я упростил:

файл 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>

файл пользователя 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>

Ответ №1:

Ваш второй файл («user.html «) на самом деле это не полная страница, а скорее фрагмент. Таким образом, не нужно снова объявлять jquery и jqueryui. Оказывается, что вы объявляете их дважды, и возникает конфликт.

Комментарии:

1. нет .. причина не в этом; если вы попытаетесь, вы это увидите.

2. Ну, если быть точным, в приведенном выше коде у вас много ошибок. Теги «meta» и «link» должны быть закрыты. Диалог инициализации кнопки должен быть таким, как указано здесь: http:// api.jqueryui.com/dialog/#option-buttons. И так далее. Я исправил эти ошибки и удалил ссылки на jquery и jqueryui в user.html файл.

3. ОК.. Я исправил код, следуя вашим предложениям, и теперь это работает. не могли бы вы, пожалуйста, исправить также последние несколько изменений?

4. смотрите мой новый ответ

Ответ №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>

Ответ №3:

Отправьте код, который я сделал. Протестировано в Mozilla Firefox 49. Работает следующим образом: при полной загрузке страницы сразу открывается первое диалоговое окно; при нажатии на «user» открывается другое диалоговое окно. Это второе диалоговое окно закрывается корректно после нажатия кнопки «Сохранить» или «Отмена». Никаких ошибок в инструментах разработки нет. Если я правильно понимаю, это именно то, что требовалось.

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>