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.
window.location.replace("/PurchaseOrder/Create");
did you just redirect to a different page before showing the dialog?