I have to create a confirm modal box of jquery that works as default confirm box that return true or false and works across the project.
I call it this way....
var result = confirm("Are you sure you want exit");
if(result == false)
return false;
else{
//somethings are done here
}
and in a Main.js written it's implementation as following ..
function confirm(message){
$("#alert_cust_message").html(message);
var returnValue = false;
$("#myAlert").dialog({
modal: true,
minHeight: 100,
buttons: {
"OK": function()
{
$( this ).dialog( "close" );
returnValue = true;
},
Cancel: function()
{
$( this ).dialog( "close" );
returnValue = false;
}
}
});
$("#myAlert").parent().css('font-size','9pt');
return returnValue;
}
Now the problem that i am facing is about the return value ...
I am not get the expected returns, I think it is due to asynchronous dialog.
Now can this be solved easily ?
Any help will be appreciated .. Thanks
You need to use a callback
function confirm(message, callback) {
$("#alert_cust_message").html(message);
var returnValue = false;
$("#myAlert").dialog({
modal: true,
minHeight: 100,
buttons: {
"OK": function () {
$(this).dialog("close");
callback(true);
},
Cancel: function () {
$(this).dialog("close");
callback(false);
}
}
});
$("#myAlert").parent().css('font-size', '9pt');
}
then
confirm('some message', function (result) {
if (result) {}
})
Demo: Fiddle
Related
This is my code. I am trying to stop the clicked tab from loading until i get a response from the dialog box. Also if i click cancel, i wan to return to the previously selected tab. currently the way i have it setup it creates a loop (which i broke with my lame code).
As seen in my jsfiddle example the code does stop. However, you will notice in the backround that the tab does change to the clicked one, so if you click cancel the backround will flash. i am trying to avoid that.
Thanks.
My Fiddle
//
var runOnceDammit;
$(document).ready(function() {
$(".hideT").button();
$("#tabs").tabs();
$("#tabs").tabs("disable", "#tabs-4");
$('.ms-formtable').appendTo($('#tabs-1'));
$("#tabs").on("tabsbeforeactivate", function(event, ui) {
if (runOnceDammit == true) {
runOnceDammit = false;
return;
}
var active = $("#tabs").tabs("option", "active");
var dialResults = $.when(showDialog());
dialResults.done(function(data) {
if (data) {
$('.ms-formtable').appendTo(ui.newPanel);
if (ui.newPanel.is("#tabs-2")) {
//do stuff
} else if (ui.newPanel.is("#tabs-3")) {
//do stuff
} else if (ui.newPanel.is("#tabs-1")) {
//do stuff
}
return;
} else {
ui.newTab.blur(); //trying to remove higlight from tab
runOnceDammit = true
$("#tabs").tabs({
active: active
}); //activate previous tab
return;
}
});
//return;
});
}); //End DocReady!
//
//
function showDialog() {
var dfd = $.Deferred();
var results;
$('#dialog').dialog({
dialogClass: "no-close",
title: "Fanciful Dialog Box",
modal: true,
draggable: false,
buttons: [{
text: 'Confirm',
icons: {
primary: "ui-icon-check"
},
click: function() {
results = true;
$(this).dialog('close');
}
}, {
text: 'Cancel',
icons: {
primary: "ui-icon-cancel"
},
click: function() {
results = false;
$(this).dialog('close');
}
}],
close: function(event, ui) {
dfd.resolve(results);
}
});
return dfd.promise()
}
Consider the following:
<div class="section" id="section-1">
Tab 1
</div>
<div class="section" id="section-2">
<a name="myTab-1"></a>
</div>
<script>
$("#myTab-1").click(function(event){
event.preventDefault();
// Do a thing
return true;
});
</script>
This jQuery code will bind an anonymous function to the click event. The function takes a JavaScript Event Object as an attribute. Events have some methods to them, such as, .preventDefault(). This allows you to interrupt the default event and execute your own code. Using return true will return the default behavior after your code has been run.
I answered a similar question: confirm form submit with jquery UI
I found it better to resolve with the result. It seems that .resove() will work out better this way when it comes to the .done() code.
Working example: https://jsfiddle.net/Twisty/e2djqx08/
The key, I think, was to assign the active tab properly in your cancellation code.
JavaScript
function showDialog() {
var dfd = $.Deferred();
var results;
$('#dialog').dialog({
dialogClass: "no-close",
title: "Fanciful Dialog Box",
modal: true,
draggable: false,
buttons: [{
text: 'Confirm',
icons: {
primary: "ui-icon-check"
},
click: function() {
$(this).dialog('close');
dfd.resolve(true);
}
}, {
text: 'Cancel',
icons: {
primary: "ui-icon-cancel"
},
click: function() {
$(this).dialog('close');
dfd.resolve(false);
}
}]
});
return dfd.promise();
}
$(function() {
$("#tabs").tabs().tabs("disable", 3);
$('.ms-formtable').appendTo($('#tabs-1'));
$("#tabs").on("tabsbeforeactivate", function(e, ui) {
e.preventDefault();
console.log("EVENT: Prevent Default");
var self = $(this);
var revertToTab = ui.oldTab;
var revertToPanel = ui.oldPanel;
var sendTo = ui.newTab;
var sendToPanel = ui.newPanel;
console.log("EVENT: When Dialog is closed.");
$.when(showDialog()).done(function(data) {
if (data) {
console.log("INFO: Dialog Confirmed.");
$('.ms-formtable').appendTo(ui.newPanel);
if (self.is("#tabs-2")) {
//do stuff
} else if (self.is("#tabs-3")) {
//do stuff
} else if (self.is("#tabs-1")) {
//do stuff
}
return;
} else {
console.log("INFO: Dialog Cancelled");
self.blur();
$("#tabs").tabs("option", "active", revertToTab);
return false;
}
});
});
});
In my tests, I continued to find the active tab panel loading while the dialog was active. This did not happen when I used $("#tabs").tabs("option", "active", revertToTab);.
Hope that helps.
I have to show Confirmation message buttons as "Yes" or "No", for that i am showing jquery dialog box as
function ConfirmDialog(message) {
$('<div></div>').appendTo('body')
.html('<div><h6>' + message + '?</h6></div>')
.dialog({
modal: true,
title: 'Message',
zIndex: 10000,
autoOpen: true,
width: 'auto',
resizable: false,
buttons: {
Yes: function (e) {
$(this).dialog("close");
return true;
},
No: function () {
$(this).dialog("close");
return false;
}
},
close: function (event, ui) {
$(this).remove();
}
});
};
But my requirement is when i click "Yes" it should return as true like
var msg = ConfirmDialog("Are You Sure , Do you want to Delete all items??");
if (msg == true) {
alert("you clicked yes");
} else {
alert("you clicked No");
}
For that , i have return as true, but script is not working like, and one more is I can't write script in "Yes" button function, due to some issues, please help me anyone.
You can't 'return' anything from a dialog box. Instead you should have a function which you run based on the button clicked in the dialog, something like this:
.dialog({
// other settings...
buttons: {
Yes: function (e) {
$(this).dialog("close");
dialogResult(true);
},
No: function () {
$(this).dialog("close");
dialogResult(false);
}
},
});
What you want is a confirm() like functionality which is directly browser supported and custom implementation of it is not possible.
What you really have to do is put your code in click event of 'yes' and 'no' button.
$('#btnYes').click(function(){
alert("you clicked yes");
});
$('#btnNo').click(function(){
alert("you clicked No");
});
Let's say I have function1 which needs the results of function2 before it can continue.
But function2 gets what it needs by triggering a Jquery dialog window to open, and prompting the user to select one of two buttons.
The selection of the two buttons then causes function2 to do its work and pass that along to function1.
How do I get the value that the buttons give when selected in the dialog window back to function2.
See code below.
$('#choice-dialog').dialog({
autoOpen: false,
resizable: false,
height:140,
modal: true,
buttons: {
"Proceed": function() {
$( this ).dialog( "close" );
true //the value to be sent to function2;
},
Cancel: function() {
$( this ).dialog( "close" );
false //the value to be sent to function2;
}
}
});
function function1(){
if(function2(variable)===true){
return true
}
}
var function2 = function(variable){
if(idIsUsed){
$("#choice-dialog").dialog("open");
return **choice made by user via dialog**;
}else{
return true;
}
}
You cannot do it this way. It is better to restructure your code such that the dialog callbacks call another function with true or false:
$('#choice-dialog').dialog({
autoOpen: false,
resizable: false,
height:140,
modal: true,
buttons: {
"Proceed": function() {
$( this ).dialog( "close" );
otherFunction(true);
},
Cancel: function() {
$( this ).dialog( "close" );
otherFunction(false);
}
}
});
var function2 = function(variable){
if(idIsUsed){
$j("#choice-dialog").dialog("open");
} else {
otherFunction(true);
}
}
I´m trying to do an replacement for the javascript confirm(). I have found the jquery dialog() function that can be fully customized. The problem is that i cant make it return true or false.
Here is my code:
$('#delBox').dialog(
{ autoOpen: false, resizable: false, modal: true, closeOnEscape: true, width: 300, height: 'auto', title: 'Deletar registro',
buttons: {
"Ok": function () {
return true;
}, "Cancelar": function () {
$(this).dialog("close");
return false;
}
},
open: function () {
var buttonsSet = $('.ui-dialog-buttonset').find("button:contains('Ok')");
buttonsSet.attr("class", "ui-button ui-state-default");
$('.ui-dialog-titlebar-close span').empty();
$('.ui-dialog-buttonset').find("button:contains('Ok')").button({
text: false,
icons: {
primary: 'ui-icon-ok'
}
});
$('.ui-dialog-buttonset').find("button:contains('Cancelar')").button({
text: false,
icons: {
primary: 'ui-icon-cancel'
}
});
}
});
This only return an object before any option selected:
function deletar() {
alert($('#delBox').dialog('open'));
}
jQueryUI dialog boxes can't return a true or false as they're shown on top of other content but without blocking execution.
The best you can do is:
make the box modal so that it hides the other content
supply callbacks to be used depending on which option is chosen.
For extra bonus points, you could create a $.Deferred() promise object and return that when you show the dialog. You can then resolve or reject that promise in the button event handlers.
This would give you clean separation between showing the dialog box, and performing the actions subsequently triggered by it:
function showDialog() {
var def = $.Deferred();
// create and/or show the dialog box here
// but in "OK" do 'def.resolve()'
// and in "cancel" do 'def.reject()'
return def.promise();
}
showDialog().done(function() {
// they pressed OK
}).fail(function() {
// the pressed Cancel
});
// NB: execution will continue here immediately - you shouldn't do
// anything else now - any subsequent operations need to be
// started in the above callbacks.
The first answer is fine - I thought I'd just add a bit of code showing how you can return the button that was clicked:
function ShowYesNoMessage(title, message) {
var def = $.Deferred();
$("#infoMessage").html(message);
$("#dialog_infoMessage").dialog({
modal: true,
title: title,
buttons: {
Yes: function () {
$("#infoMessage").html("");
$(this).dialog("close");
def.resolve("Yes");
},
No: function () {
$("#infoMessage").html("");
$(this).dialog("close");
def.resolve("No");
}
}
});
return def.promise();
}
$.when(ShowYesNoMessage("Are you sure", message)).then(
function(status) {
if (status == "Yes") {
//do the next step
}
}
);
I'm getting a firebug error:
missing : after property id
error source line:
if(jQuery.inArray(mmDialogButton.CANCEL, buttons)){
This is the surrunding code:
Edited post with update as I was unclear.
I am trying to create a framework for creating dialogues for a project.
In the dialogs there can be four predefined buttons.
The mmDialogButton is my attempt to an ENUM class.
The if statement is there to enable the buttons the user wanted to use in the dialog.
Here is some more code to illustrate.
mmDialog.js
...
function mmDialog(title, spawnerId, widget, buttons){
...
$dialog.html(widget.getInitialHTML())
.dialog({
autoOpen: false,
title: title + ' <img id="myJquerySpinner" />',
buttons: {
if(jQuery.inArray(mmDialogButton.CANCEL, buttons)){
Cancel: function() {
$( this ).dialog( "close" );
},
}
if(jQuery.inArray(mmDialogButton.NEXT, buttons)){
"Next": function() {
widget.doNext();
},
}
if(jQuery.inArray(mmDialogButton.PREVIOUS, buttons)){
"Previous": function() {
widget.doPrevious();
},
}
if(jQuery.inArray(mmDialogButton.OK, buttons)){
"Ok": function() {
widget.doOk();
}
}
}...
mmDialogButton.js
function mmDialogButton(){ // Constructor
}
mmDialogButton.CANCEL = function() { return "mmDBCancel"; };
mmDialogButton.OK = function() { return "mmDBOk"; };
mmDialogButton.NEXT = function() { return "mmDBNext"; };
mmDialogButton.PREVIOUS = function() { return "mmDBPrevious"; };
jsp/html page
var title = "Test Dialog";
var spawnerId = "myJqueryStarter";
var mmDialogButtons = new Array();
mmDialogButtons[0] = mmDialogButton.CANCEL;
mmDialogButtons[1] = mmDialogButton.OK;
mmDialogButtons[2] = mmDialogButton.NEXT;
mmDialogButtons[3] = mmDialogButton.PREVIOUS;
myPublishWidget = new mmPublishWidget();
myDialogPublishWidget = new mmDialogWidget(myPublishWidget);
myDialog = new mmDialog(title, spawnerId, myDialogPublishWidget , mmDialogButtons);
This:
buttons: {
if(jQuery.inArray(mmDialogButton.CANCEL, buttons)){
Cancel: function() {
$( this ).dialog( "close" );
},
should probably be:
buttons: (function() {
if(jQuery.inArray(mmDialogButton.CANCEL, buttons))
return {
Cancel: function() {
$( this ).dialog( "close" );
}
};
return null;
})()
though it's hard to tell. What it looks like you're trying to do is conditionally set that "buttons" property to some object with a labeled handler (that little "close" function). However, the code you posted is syntactically nonsensical. The change I made wraps the "inArray" test in an anonymous function that returns the button object only when that test is true.
Again, I'm just guessing that that's what you were trying to do.
I think you mean to execute the "close" only if CANCEL is in buttons, if it's the case you can write:
buttons: {
Cancel: function() {
if(jQuery.inArray(mmDialogButton.CANCEL, buttons)){
$( this ).dialog( "close" );
}
},
....
EDIT:
you can define the buttons dictionary beforehand as you like, the pass it to .dialog(:
dialog_buttons = {}
if(jQuery.inArray(mmDialogButton.CANCEL, buttons)){
dialog_buttons[Cancel] = function() {
$( this ).dialog( "close" );
}
}
if(jQuery.inArray(mmDialogButton.NEXT, buttons)){
dialog_buttons["Next"] = function() {
widget.doNext();
}
}
if(jQuery.inArray(mmDialogButton.PREVIOUS, buttons)){
dialog_buttons["Previous"] = function() {
widget.doPrevious();
}
}
if(jQuery.inArray(mmDialogButton.OK, buttons)){
dialog_buttons["Ok"] = function() {
widget.doOk();
}
}
$dialog.html(widget.getInitialHTML())
.dialog({
autoOpen: false,
title: title + ' <img id="myJquerySpinner" />',
buttons: dialog_buttons
}...