Пользовательское JavaScript модальное окно не отображается должным образом - PullRequest
0 голосов
/ 26 марта 2020

Кнопка удаления запускает пользовательское модальное окно JavaScript, которое запрашивает подтверждение удаления. Если да, я отключаю вызов веб-API для удаления. После ответа на звонок я хочу показать другое модальное окно для отображения сообщения об успешном удалении. Затем я хочу перейти к другому виду.

Проблема в том, что он переходит к другому виду, прежде чем он показывает мой 2-й модал. Почему?

Я использовал это в качестве примера: https://learnersbucket.com/examples/bootstrap4/custom-confirm-box-with-bootstrap/

<script type="text/javascript">

The 1st modal:

function ConfirmDeleteProfile(handler) {
    $(`<div class="modal fade" id="myModal1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
               <div class="modal-body" style="padding:10px;">
               <h4 class="text-center">Are you sure you want to delete your profile ?</h4>
               <div class="text-center">
                   <a class="btn btn-info btn-yes1">Yes</a>
                   <a class="btn btn-default btn-no1">No</a>
                </div>
             </div>
         </div>
       </div>
    </div>`).appendTo('body');

    $("#myModal1").modal({
        backdrop: 'static',
        keyboard: false
    });

    $(".btn-yes1").click(function () {
        $("#myModal1").modal("hide");

        var url = '@Url.Content("~/")' + "UserProfile/DeleteUserProfile";

        $.post(url, function (data) {
            if (data) {
               var returnStatus = false;

               // Show another modal.
               returnStatus = ConfirmSuccessfulDelete();

               // Goes to another view.
               var url2 = '@Url.Content("~/")' + "Home/Index";
               window.location.href = url2;

               handler(true);
            }
            else {
                alert("Something went wrong with the delete!");
                return false;
            }
        });
    });

    $(".btn-no1").click(function () {
        handler(false);
        $("#myModal1").modal("hide");
    });

    $("#myModal1").on('hidden.bs.modal', function () {
        $("#myModal1").remove();
    });
}

    The 2nd modal:

    function ConfirmSuccessfulDelete(handler) {
    $(`<div class="modal fade" id="myModal5" role="dialog">
        <div class="modal-dialog">
             <div class="modal-content">
               <div class="modal-body" style="padding:10px;">
               <h4 class="text-center">Your Profile Has Been Deleted Successfully.</h4>
               </br>
               <h4 class="text-center">You can always recreate it if you are so inclined.</h4>
               <div class="text-center">
                   <a class="btn btn-info btn-ok5">OK</a>
                </div>
             </div>
         </div>
       </div>
    </div>`).appendTo('body');

    // Trigger the modal.
    $("#myModal5").modal({
        backdrop: 'static',
        keyboard: false
    });

    $(".btn-ok5").click(function () {
        handler(true);
        $("#myModal5").modal("hide");
    });

    $("#myModal5").on('hidden.bs.modal', function () {
        $("#myModal5").remove();
    });
}
</script>

У меня есть тестовая версия с предупреждениями. Появляются оповещения, затем появляется второе модальное окно.

Опять же, почему?

    function ConfirmDeleteProfile(handler) {
    $(`<div class="modal fade" id="myModal1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
               <div class="modal-body" style="padding:10px;">
               <h4 class="text-center">Are you sure you want to delete your profile ?</h4>
               <div class="text-center">
                   <a class="btn btn-info btn-yes1">Yes</a>
                   <a class="btn btn-default btn-no1">No</a>
                </div>
             </div>
         </div>
       </div>
    </div>`).appendTo('body');

    $("#myModal1").modal({
        backdrop: 'static',
        keyboard: false
    });

    $(".btn-yes1").click(function () {
        $("#myModal1").modal("hide");

        var url = '@Url.Content("~/")' + "UserProfile/DeleteUserProfile";

        $.post(url, function (data) {
            if (data) {
                var returnStatus = false;
                returnStatus = ConfirmSuccessfulDelete();

                if (returnStatus == true) {
                   alert('true')
                }
                else {
                   alert('false')
                }

                handler(true);
            }
            else {
                alert("Something went wrong with the delete!");
                return false;
            }
        });
    });

    // Pass false to callback function.
    $(".btn-no1").click(function () {
        handler(false);
        $("#myModal1").modal("hide");
    });

    // Remove the modal once it is closed.
    $("#myModal1").on('hidden.bs.modal', function () {
        $("#myModal1").remove();
    });
}

1 Ответ

0 голосов
/ 29 марта 2020

В ConfirmDeleteProfile (обработчик) я просто добавил: ConfirmSuccessfulDelete ((ans) => {if (ans) {var url2 = '@ Url.Content ("~ /")' + "Home / Index"; окно .location.href = url2;} else {alert ('Error')}});

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...