I am trying to override the default confirmation box with the jQueryUI dialog box, and here is my attempt:
window.confirm = function (message_confirm) {
$(document.createElement('div'))
.attr({ title: 'Please confirm', 'class': 'confirm', 'id': 'dialogconfirm' })
.html(message_confirm)
.dialog({
buttons: { YES: function () { return true; }, NO: function () { $(this).dialog('close'); } },
close: function () { $(this).remove(); },
draggable: true,
modal: true,
resizable: false,
width: 'auto',
hide: { effect: "fade", duration: 300 },
});
};
This works in that once this script is run, calling a regular confirm
shows the jQueryUI dialog, however, the YES
selection does not work. I have an ajax call like below:
if (confirm("Are you sure you want to delete this user?"))
{
alert("test");
//ajax call
}
return false;
And the test alert did not appear. The NO slection of the dialog works fine. How can I get the YES to work?
Thank you.
I am trying to override the default confirmation box with the jQueryUI dialog box, and here is my attempt:
window.confirm = function (message_confirm) {
$(document.createElement('div'))
.attr({ title: 'Please confirm', 'class': 'confirm', 'id': 'dialogconfirm' })
.html(message_confirm)
.dialog({
buttons: { YES: function () { return true; }, NO: function () { $(this).dialog('close'); } },
close: function () { $(this).remove(); },
draggable: true,
modal: true,
resizable: false,
width: 'auto',
hide: { effect: "fade", duration: 300 },
});
};
This works in that once this script is run, calling a regular confirm
shows the jQueryUI dialog, however, the YES
selection does not work. I have an ajax call like below:
if (confirm("Are you sure you want to delete this user?"))
{
alert("test");
//ajax call
}
return false;
And the test alert did not appear. The NO slection of the dialog works fine. How can I get the YES to work?
Thank you.
Share Improve this question asked Aug 2, 2016 at 14:09 ITWorkerITWorker 9953 gold badges17 silver badges39 bronze badges 3- any errors? tried with console.log instead of alert? does console.log work in the "YES:" function (replace with return true;) ? – ggzone Commented Aug 2, 2016 at 14:16
-
@ggzone no errors. Replaced
return true
withconsole.log("dialog yes clicked")
and it appeared correctly on the console when I clicked Yes. console.log in place of alert did not show up either (same behavior as original alert test). – ITWorker Commented Aug 2, 2016 at 14:21 - 1 alright, you want a callback function then. there is already a good answer how to do so – ggzone Commented Aug 2, 2016 at 14:28
3 Answers
Reset to default 5you could add a callback parameter to the function
window.confirm = function (message_confirm, ok_callback)
fire it on YES
buttons: { YES: function () { ok_callback(); }}
and go on later like
confirm("message", function(){
alert('smth');
});
Because the dialog is asynchronous you can use a deferred approach:
window.confirm = function (message_confirm) {
var defer = $.Deferred();
$('<div/>', {title: 'Please confirm', 'class': 'confirm', 'id': 'dialogconfirm', text: message_confirm})
.dialog({
buttons: {
YES: function () {
defer.resolve("yes");
$(this).attr('yesno', true);
$(this).dialog('close');
}, NO: function () {
defer.resolve("no");
$(this).attr('yesno', false);
$(this).dialog('close');
}
},
close: function () {
if ($(this).attr('yesno') === undefined) {
defer.resolve("no");
}
$(this).remove();
},
draggable: true,
modal: true,
resizable: false,
width: 'auto',
hide: {effect: "fade", duration: 300}
});
return defer.promise();
};
$(function () {
confirm("Are you sure you want to delete this user?").then(function(yesno) {
console.log(yesno);
});
});
<link href="https://code.jquery./ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery./jquery-1.12.4.min.js"></script>
<script src="https://code.jquery./ui/1.11.4/jquery-ui.js"></script>
Try something like below. It worked for me.
<script>
$( function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Delete user": function() {
alert("test");
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
} );
</script>
</head>
<body>
<div id="dialog-confirm" title="Please confirm">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>Are you sure you want to delete this user?</p>
</div>