Как отобразить диалог JQuery при успешном возврате из вызова jquery ajax

Question

У меня проблема с отображением диалогового окна jquery при возврате вызова ajax. Ниже приведено диалоговое окно с поддержкой html:

function ShowDeleteReturnStatusDialog(deletedId) {
    $("#idDeleteReturnStatusDialog").dialog({
        title: 'Purchase Order ID ' + deletedId + ' was deleted.',
        resizable: true,
        height: 250,
        width: 350,
        modal: true,
        autoOpen: true,
        buttons: {
            'Ok': function () {

                $(this).dialog('close');
            }
        }
    });
}

<div id="idDeleteReturnStatusDialog" title=@Model.StatusTitle style="display:none;">
    <div class="container" style="border:groove;">
        <div class="row">
            <div class="col-6">
                @Model.StatusDescription
            </div>
        </div>
    </div>
</div>

. Я могу проверить диалоговое окно с помощью следующей кнопки и jquery, чтобы открыть диалоговое окно с помощью кнопки:

<div id="idcontainerTopBtns" style="border:outset; background-color:#e6f7fe;">
    <input type="button" id="idTestBtn" value="Test" class="btn btn-primary" />

        $("#idcontainerTopBtns").on('click', '#idTestBtn', function () {
            ShowDeleteReturnStatusDialog(500);
        });
</div>

* 1006. * Несмотря на то, что диалоговое окно открывается нажатием кнопки, оно не открывается, когда я выполняю вызов ajax и пытаюсь показать его после завершения ajax. Ниже приведен вызов ajax, который определен для открытия диалога при возврате из вызова ajax. Проблема в том, что диалоговое окно не отображается на экране:

function deletePurchaseOrder() {
    var purchaseOrderId = getPurchaseOrderId();
    event.preventDefault();
    var sToken = document.getElementsByName("__RequestVerificationToken")[0].value;
    $.ajax({
        url: '/PurchaseOrder/PurchaseOrderDelete',
        type: "POST",
        contentType: "application/x-www-form-urlencoded",
        data: {
            '__RequestVerificationToken': sToken,
            'id': parseInt($(this).attr("title")),
            'purchaseOrderId': purchaseOrderId
        }
    })
        .done(function (deletedId) {
            window.location.replace("/PurchaseOrder/Create");
            ShowDeleteReturnStatusDialog(deletedId);
        })
        .fail(function (jqXHR, textStatus, errorThrown) {
            //Process Failure here
        });
};

Как это можно исправить, чтобы диалоговое окно отображалось после выполнения вызова ajax? Заранее спасибо.

Answer 1

Рассмотрим следующий код.

$(function() {
  function redirect(u) {
    if (u == undefined) {
      return false;
    }
    window.location.replace(u);
  }

  function createConfirm(t, c, cb) {
    return $("<div>").html(c).dialog({
      resizable: true,
      height: 250,
      width: 350,
      modal: true,
      autoOpen: true,
      title: t,
      buttons: {
        "Ok": cb
      },
      close: function() {
        $(this).remove();
      }
    });
  }

  $("#idcontainerTopBtns").on('click', '#idTestBtn', function() {
    createConfirm("Delete Purchase Order", "Purchase Order 500 has been deleted.", function() {
      console.log("Ok Clicked");
      $(this).dialog("close");
    });
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="idcontainerTopBtns" style="border:outset; background-color:#e6f7fe;">
  <input type="button" id="idTestBtn" value="Test" class="btn btn-primary" />
</div>

Это немного более динамично c. Это также позволяет каскадировать события с помощью функции обратного вызова внутри функции.

Пример:

  $("#idcontainerTopBtns").on('click', '#idTestBtn', function() {
    createConfirm("Delete Purchase Order", "Purchase Order 500 has been deleted.", function() {
      redirect("/PurchaseOrder/Create");
    });
  });

Answer 2

Основываясь на комментарии Хади, я внес изменения в код, который устранил проблему. Ниже приведены изменения:

Ниже ajax был изменен путем удаления вызова функции window.location.replace из блока кода .done.

function deletePurchaseOrder() {
    var purchaseOrderId = getPurchaseOrderId();
    event.preventDefault();
    var sToken = document.getElementsByName("__RequestVerificationToken")[0].value;
    $.ajax({
        url: '/PurchaseOrder/PurchaseOrderDelete',
        type: "POST",
        contentType: "application/x-www-form-urlencoded",
        data: {
            '__RequestVerificationToken': sToken,
            'id': parseInt($(this).attr("title")),
            'purchaseOrderId': purchaseOrderId
        }
    })
        .done(function (deletedId) {
            ShowDeleteReturnStatusDialog(deletedId);
        })
        .fail(function (jqXHR, textStatus, errorThrown) {
            //Process Failure here
        });
};

Функция ShowDeleteReturnStatusDialog была изменена с помощью добавив вызов window.location.replace в область кнопки ОК. Первоначально он находился в области ajax .done:

function ShowDeleteReturnStatusDialog(deletedId) {
    $("#idDeleteReturnStatusDialog").dialog({
        title: 'Purchase Order ID ' + deletedId + ' was deleted.',
        resizable: true,
        height: 250,
        width: 350,
        modal: true,
        autoOpen: true,
        buttons: {
            'Ok': function () {
                window.location.replace("/PurchaseOrder/Create");
                $(this).dialog('close');
            }
        }
    });
}

Поддержка html (показанная ниже) для idDeleteReturnStatusDialog была перемещена со страницы создания представления на страницу редактирования редактирования, где находится вся JQuery вызов был запущен для процесса удаления:

<div id="idDeleteReturnStatusDialog" title="Purchase Order Deleted Notice" style="display:none;">
    <div class="container" style="border:groove;">
        <div class="row">
            <div class="col">
                The purchase order has been deleted.
            </div>
        </div>
    </div>
</div>