Диалог не является функцией (как отобразить пользовательский диалог)

Question

Я хочу отобразить в моем веб-приложении специальный диалог. Итак, я создаю этот код:

<script type="text/javascript">

     var mappaRisposte = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.mappaRisposte));
    ConfirmDialog('Are you sure');

    function ConfirmDialog(message) {
        $('<div></div>').appendTo('body')
            .html('<div><h6>' + message + '?</h6></div>')
            .dialog({
                modal: true,
                title: 'Delete message',
                zIndex: 10000,
                autoOpen: true,
                width: 'auto',
                resizable: false,
                buttons: {
                    Yes: function () {
                        // $(obj).removeAttr('onclick');                                
                        // $(obj).parents('.Parent').remove();

                        $('body').append('<h1>Confirm Dialog Result: <i>Yes</i></h1>');

                        $(this).dialog("close");
                    },
                    No: function () {
                        $('body').append('<h1>Confirm Dialog Result: <i>No</i></h1>');

                        $(this).dialog("close");
                    }
                },
                close: function (event, ui) {
                    $(this).remove();
                }
            });
    }
</script>

Это внешняя библиотека

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <!---->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Так что, если я попытаюсь выполнить эту страницу, я вижу это:

Но если я пытаюсь вызвать функцию ConfirmDialog из другой функции js в этом режиме:

function endFirstPartSummary() {
        ConfirmDialog('Are you sure');
        var parolaChiave = document.getElementById("tParolaChiave").value;
        //alert(parolaChiave);
        $.ajax({
            url: '/Questionario/endFirstPartSummary',
            data: { "json": JSON.stringify(parolaChiave)},
            type: "GET",
            success: function (data) {
                //TODO: Add whatever if you want to pass a notification back
                location.href='@Url.Action("PageRingraziamento", "PageRingraziamento")'
            },
            error: function (error) {
                //TODO: Add some code here for error handling or notifications
                //alert("Il nome di fantasia indicato è già stato utilizzato, inventane un altro");

                document.getElementById("tParolaChiave").value = "";
            }
        });
    }

У меня появляется эта ошибка из консоли:

TypeError: $(...).appendTo(...).html(...).dialog is not a function

Answer 1

Насколько я понимаю, вы пытаетесь использовать один и тот же объект диалога дважды, но со второй попытки вы получаете ошибку.

Попробуйте сохранить глобальный экземпляр (не внутри функции), например:

const myDialog = $("#dialog").dialog('open');

, и повторно использовать его как:

myDialog.dialog("close"); // or maybe: myDialog.close();

В данный момент вы используете " $ (это) .dialog ( "закрыть");» в контексте функции. Так что «это» - это функция, а не диалог.