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.
you 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.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/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>
Related
i have this javascript method and i want to put jquery confirmation dialog box
function editcart(id,code,stock_qw,stock_rtq,pack){
if((stock_qw%pack) != 0){
if(!x) return false;
}
}
i have this jquery dialogbox and i am bit confuse how to put it together
$('<div></div>').appendTo('body')
.html('<div><h6>Yes or No?</h6></div>')
.dialog({
modal: true,
title: 'message',
zIndex: 10000,
autoOpen: true,
width: 'auto',
resizable: false,
buttons: {
Yes: function () {
doFunctionForYes();
$(this).dialog("close");
},
No: function () {
doFunctionForNo();
$(this).dialog("close");
}
},
close: function (event, ui) {
$(this).remove();
}
});
//$('#msg').hide();
function doFunctionForYes() {
alert("Yes");
$('#msg').show();
}
function doFunctionForNo() {
// alert("No");
$('#msg').show();
}
}
anyone has better idea how this work?
What about pure JS confirmation dialog?
confirm('Yes or no? ') ? doFunctionForYes() : doFunctionFotNo();
you may try this:
$('<div></div>').appendTo('body')
.html('<div><h6>Yes or No?</h6></div>')
.dialog({
modal: true, title: 'message', zIndex: 10000, autoOpen: true,
width: 'auto', resizable: false,
buttons: {
Yes: function () {
doFunctionForYes();
$(this).dialog("close");
},
No: function () {
doFunctionForNo();
$(this).dialog("close");
}
},
close: function (event, ui) {
$(this).remove();
}
});
Example:
http://jsfiddle.net/3d7QC/1032/
I have a jquery dialog box that I wish to add an additional button to dynamically when a condition is met.
I set the dialog box on page load as follows
$("#confirmT").dialog({
autoOpen: false,
open: function() {
pullResources(cat, id);
},
autoResize:true,
width: 800,
modal: true,
title: 'Select Resources',
buttons: {
Cancel: function() {$(this).dialog( "close" );}},
close: function() {
}
});
Then when a condition is true I want it to add another button to allow the user to add something to the database. This is what I have so far (from the jQuery ui website but nothing happens. No errors are produced, just nothing.
if ($sub == 1)
{
?>
<script type = 'javascript'>
function addbuttons()
{
// Setter
$( "#confirmT" ).dialog( "option", "buttons",
[
{
text: "Ok",
click: function() {
//do something
}
}
]
);
}
addbuttons();</script>
<?php
}
Any help would be greatly appreciated.
Thanks
Try this out:- http://jsfiddle.net/uvep1fnc/
Add the button initially and based on the condition just call out the javascript function to hide the button.
JS:-
$(function () {
$("#dialog-confirm").dialog({
resizable: false,
height: 200,
width: 500,
modal: true,
buttons: [{
text: "Delete all items",
class: "aditya",
click: function () {
$(this).dialog("close");
}
}, {
text: "Cancel",
click: function () {
$(this).dialog("close");
}
}]
});
function foo() {
$("#dialog-confirm").closest(".ui-dialog").find(".aditya").hide();
}
foo();
});
I have a button #create-user that opens a dialog with 2 buttons(submit, cancel). Is it possible to add another button #edit-user on the page that opens the same dialog but with different buttons (edit, delete, cancel)? This is my code so far:
$(function () {
var dialog, form,
name = $("#name"),
birthdate = $("#student-datepicker"),
allFields = $([]).add(name).add(birthdate),
tips = $(".validateTips");
function addStudent() {
var data = {
'action': 'add_student',
'name': name.val(),
'birth': birthdate.val(),
'add-student': true
};
var valid = false;
allFields.removeClass("ui-state-error");
if (valid) {
$.post(ajaxurl, data, function (studentId) {
dialog.dialog("close");
});
} else {
}
}
dialog = $("#dialog-form").dialog({
show: {effect: "fade", duration: 200},
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Submit": addStudent,
,
Cancel: function () {
dialog.dialog("close");
}
},
close: function () {
form[ 0 ].reset();
allFields.removeClass("ui-state-error");
}
});
form = dialog.find("form").on("submit", function (event) {
event.preventDefault();
addStudent();
});
$("#create-user").button().on("click", function () {
dialog.dialog("open");
});
});
Acctually i solved it differently ...here is the solution and the code I added:
$(function(){
dialog2= $(".dialog-form").dialog({
show: {effect: "fade", duration: 200},
autoOpen: false,
height: 300,
width: 350,
modal: true,
});
$(".edit-student").button().on("click", function () {
dialog2.dialog(
'option',
'buttons', [{
text: 'A brand new button!',
click: function () {
$(this).dialog('close');
}
}]);
dialog2.dialog("open");
return false;
});});
I'm returning false on the button click event just to make sure the page isn't posting/refreshing.
I'm trying to call javascript function from jquery dialog buton, but it is not working
my code :
============================
$('#dialogAddActe').dialog({
autoOpen: false,
modal: true,
width: 800,
height:400,
show: "slide",
hide: "slide",
buttons: {
"Suivant": function() {
$(this).dialog("close");
if ($(this).checkNombre())
{
document.forms[0].dispatch.value = "ajouterActe";
document.forms[0].submit();
}
},
"Annuler": function() {
$(this).dialog("close");
document.forms[0].patientId.value="";
}
}
});
============================
$(this).checkNombre() is not working.
BR,
Med Baba
Remove $(this), just use if (checkNombre()).
I am using the code below and decided I want a close button instead of the timeout.
How can I replace the timeout with a close button with the code below?
<script type="text/javascript">
$(document).ready(function() {
$("#info_box").dialog({
autoOpen: false,
modal: true,
width: 400,
zIndex: 9999999,
resizable: false,
open: function() {
// close the dialog 10 secs after it's opened
setTimeout(function() {
$(this).dialog("close");
}, 10000);
}
});
$(".notavailable").bind("click", function() {
$("#info_box").dialog("open");
});
});
</script>
You just need to add a buttons property to the Object the dialog is created with, something like:
$("#info_box").dialog({
autoOpen: false,
modal: true,
width: 400,
zIndex: 9999999,
resizable: false,
buttons: [
{
text: "Close",
click: function () {
$(this).dialog("close");
}
}
]
});