How to show a JQuery dialog on successful return from a jquery ajax invocation

Question

I am having a problem showing a jquery dialog on the return of an ajax call. Below is the dialog and supporting 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" [email protected] style="display:none;">
    <div class="container" style="border:groove;">
        <div class="row">
            <div class="col-6">
                @Model.StatusDescription
            </div>
        </div>
    </div>
</div>

I am able to test the dialog using the following button and jquery to open the dialog from the button:

<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>

Although the dialog opens with a button click, it does not open when I make an ajax call and try to show it when ajax is done. Below is the ajax call which is defined to open the dialog on return from the ajax call. The problem is the dialog does not show up on the screen:

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
        });
};

How can this be fixed so the dialog is shown when the ajax call is done? Thanks in advance.

Answer 1

Based on the comment from Hadi, I have made changes to the code which has fixed the problem. Below are the changes:

The below ajax was modified by removing the window.location.replace function call from the .done code block.

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
        });
};

The ShowDeleteReturnStatusDialog function was modified by adding the window.location.replace call into the OK button area. It was originally in the ajax .done area:

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');
            }
        }
    });
}

The support html (shown below) for the idDeleteReturnStatusDialog was moved from the create view page to the edit view page which is where the entire JQuery invocation was started for the delete process:

<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>

Answer 2

Consider the following code.

$(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>

This is a little more dynamic. This also allows you to cascade events by using a Callback function inside the function.

An Example:

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