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/
Related
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>
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've got a jQuery Dialog, and would like to disable clicking on anything other than the dialog itself (i.e. no clicking in my ASPX page other than on the dialog). I have searched extensively and not found anything - can this be achieved?
This is my dialog code:
$('#controlSettingsForm').dialog({
autoOpen: false,
width: 'auto',
maxHeight: 300,
buttons: {
"Save": function () {
},
"Cancel": function () {
$(this).dialog("close");
}
},
});
$('#controlSettingsForm').dialog("open");
Use modal true for overlay:
('#controlSettingsForm').dialog({
autoOpen: false,
width: 'auto',
maxHeight: 300,
modal:true,
buttons: {
"Save": function () {
},
"Cancel": function () {
$(this).dialog("close");
}
},
});
$('#controlSettingsForm').dialog("open");
Simply add the parameter modal: true:
$('#controlSettingsForm').dialog({
autoOpen: false,
width: 'auto',
modal: true, // <---- Add this parameter
maxHeight: 300,
buttons: {
"Save": function () {
},
"Cancel": function () {
$(this).dialog("close");
}
},
});
$('#controlSettingsForm').dialog("open");
This will make the dialog appear as "modal". Which means the background will get grayed out and you can't click on it until the dialog is closed.
For more information and examples on the modal parameter check:
http://jqueryui.com/dialog/#modal-confirmation
http://jqueryui.com/dialog/#modal
$('#controlSettingsForm').dialog({
autoOpen: false,
width: 'auto',
maxHeight: 300,
modal: true,
buttons: {
"Save": function () {
},
"Cancel": function () {
$(this).dialog("close");
}
},
});
$('#controlSettingsForm').dialog("open");
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");
}
}
]
});