I have developed a custom jQuery plugin that utilizes jQuery Dialog to showcase messages. Specifically, I am using it within my jQuery $.ajax -->done function. My goal is to capture the close event of the Dialog in the .ajax function so that I can redirect the page accordingly afterwards. How can I achieve this?
Ajax function
$('#NewFunctionNavigationForm').submit(function (e) {
e.preventDefault();
var DataToPost = JSON.stringify($('#NewFunctionNavigationForm').serializeObject());
var formURL = $(this).attr("action");
$.ajax({
type: "POST",
url: formURL,
dataType: "JSON",
contentType: "application/json; charset=utf-8",
data: DataToPost,
})
.done(function (data, textStatus, jqXHR) {
alert("Success: " + data.Response);
$(this).MyMessageDialog({
_messageBlockID: "_StatusMessage",
_messageContent: "ccc"
});
// Need to capture dialog close event here
window.location = "/SystemCore/SystemCoreHome";
})
.fail(function (jqXHR, textStatus, errorThrown) { alert("Error"); })
.always(function (jqXHROrData, textStatus, jqXHROrErrorThrown) { alert("complete"); });
});
Message Dialog Plugin
function ($) {
var _messageWrap = {
_messageBlockID: "",
_messageContent: ""
};
$.fn.MyMessageDialog = function (_messageWrap) {
alert("from plugin "+_messageWrap._messageBlockID + " " + _messageWrap._messageContent);
$("#" + _messageWrap._messageBlockID).text(_messageWrap._messageContent);
if($("#"+_messageWrap._messageBlockID).length) //check if div with given ID exists
{
$("#" + _messageWrap._messageBlockID).dialog({
modal: true,
autoOpen: false,
buttons: {
Ok: function () {
$(this).dialog("close");
}
},
width: "50%",
});
//clear existing content if there are any in given Div
$("#" + _messageWrap._messageBlockID).html("");
//add content to div
$("#" + _messageWrap._messageBlockID).append(_messageWrap._messageContent);
$("#" + _messageWrap._messageBlockID).dialog("open");
}
else
{
alert("not exist");
}
};
}(jQuery));