Did you ever come to a point where you get tired from the limitation from the browser default confirmation message… I came into that point so many times… but also I didn’t like the idea of keep doing workarounds on this.. so I built a Generic Confirmation Message using JQuery.. it is basically much flexible than what browser confirmation message do for us…. My generic confirmation message is built on MVC solution, so I’m using the flexibility that MVC providing me….
let’s assume you want to display a confirmation message on deletion operation… Below is a JQuery method that will show the confirmation message and depends on a call back Java Script method to be called in case the user click on the “Delete” button.
/*Show up a confirmation delete message*/
function ConfirmDelete(message, callback) {
var $deleteDialog = $('<div>Are you sure you want to delete ' + message + '?</div>');
$deleteDialog
.dialog({
resizable: false,
//height: 200,
title: "Delete Record?",
modal: true,
buttons: {
"Delete": {
click: function () {
$(this).dialog("close");
callback.apply();
},
class: "btn btn-default",
text: "Delete"
},
Cancel:
{
click: function () {
$(this).dialog("close");
},
class: "btn btn-default",
text: "Cancel"
}
}
});
};
|
I think the next question will be is how to use above method… I’ll present an example where I want to delete a record from a grid. so I built a method that will do a JQuery Ajax call to server in order to delete the record… the Ajax post that will be made is depending on an href attribute attached the delete button or link on your page; meaning you need to provide a full info on your href; in MVC it is ‘/Record/Delete/{IdValue}’
/* Do Delete for error message*/
function DeleteRow($btn) {
$.ajax({
url: $btn.attr('href'),
success: function (response) {
$("#ajaxResult").hide().html(response).fadeIn(300, function () {
var e = this;
setTimeout(function () { $(e).fadeOut(400); }, 2500);
});
window.location = response.url;
},
error: function (xhr) {
displayError(xhr.responseText, xhr.status); /* display errors in separate dialog */
}
});
return false;
};
|
when user click on the button on the grid, you should call the following function; or similar one depending on your needs
/*show Delete confirmation message*/
function DeleteGridRowConfirmationMsg(btn,recordName) {
ConfirmDelete(recordName,
function () {
DeleteRow($(btn));
});
return false;
}
|
I hope this will help you on having a generic confirmation message on your site.. one last comment, make sure that you have JQuery UI script files imported into your project as well as into your web pages