Develop Reference

return true for click event and continue

Hi I have a popup window control what I'm trying todo is get it to continue the click event if the user chooses the yes button. How do you continue the click event for the 'yes' button, I'm trying to make it return true but it doesn't continue for the click it just return false.
<script type="text/javascript">
$(document).ready(function() {
$('.delete-question').click(function(e) {
ret = false;
_this = this;
$('#pop-up-1').popUpWindow({
modal: true,
blurClass: '.main-container',
action: "open",
buttons: [{
text: "Yes",
click: function () {
this.close();
ret = true;
}
}, {
text: "No",
click: function () {
this.close();
}
}]
});
return ret;
})
});
</script>

You can't do it directly, but you can emit the click event once it is needed, e.g. something like this (not tested):
<script type="text/javascript">
// global flag to track the popup state
var popupReturn = false;
$(document).ready(function() {
$('.delete-question').click(function(e) {
// when true (after Yes click only) go on returning true
if (popupReturn) {
popupReturn = false;
return true;
}
else {
_this = this;
$('#pop-up-1').popUpWindow({
modal: true,
blurClass: '.main-container',
action: "open",
buttons: [{
text: "Yes",
click: function () {
// set global flag to true
popupReturn = true;
// emit click event where it knows that popupReturn is true
$(_this).click();
this.close();
}
}, {
text: "No",
click: function () {
this.close();
}
}]
});
return false;
}
})
});
</script>

You can't return from asynchronous event like in your case, because your "modal" is not really modal in sense that it doesn't pause code execution until use clicks a button.
This is where callback come handy. I would wrap the modal code into helper plugin and use it like this:
$.fn.confirmable = function(options) {
options = $.extend({
close: $.noop,
dismiss: $.noop
}, options);
this.each(function() {
$(this).popUpWindow({
modal: true,
blurClass: '.main-container',
action: "open",
buttons: [{
text: "Yes",
click: function() {
this.close();
options.close();
}
}, {
text: "No",
click: function() {
this.close();
options.dismiss();
}
}]
});
});
};
$('.delete-question').confirmable({
close: function() {
// ok pressed do something
},
dismiss: function() {
// cancel pressed
}
});
It means that your workflow needs to transform to asynchronous callback/promise-based.

How to Return message as true from jquery dialog box

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");
});

Javascript confirm () override function

I want to override javascript confirm() with jquery UI custom dialog so i can use it like this:
<form action="http://google.com">
<input onClick="return confirm('go Google?')" id="nupp" value="nupp"/>
</form>
I have already overrode it but the thing is that i cant get it functioning like original one. I know i cant make it 100% work like original, but whats the closest thing i can make?
They say that i might be able to do it with deferred objects or with callback.
Right now i have managed to make it functioning only with submit button and one form on page. If i got two forms or something else it wont work. I might be able to make it recognize buttons and what form goes with what submit button. Code is here:
window.confirm = function(c) {
$(this).submit(function(e){
e.preventDefault()
});
$('#overrideAlert').text(c).dialog({
resizable:false,
autoOpen:true,
modal:true,
dialogClass: "alert",
title:'Teade',
draggable:false,
closeOnEscape:false,
buttons: {
"Ok" : {
id: "okay",
text: "Ok",
click: function(){
}
},
"Cancle" : {
id: "cancle",
text: "Cancle",
click: function(){
$(this).dialog('close');
}
}
}
});
};
But now im thinking that i must to something like this (it is broken, just trying to look into it):
window.confirm = function(c) {
var dfd = $.Deferred();
$('#overrideAlert').text(c).dialog({
resizable:false,
autoOpen:true,
modal:true,
dialogClass: "alert",
title:'Teade',
draggable:false,
closeOnEscape:false,
buttons: {
"Ok" : {
id: "okay",
text: "Ok",
click: function(d){
$(this).dialog('close');
var a = 1;
console.log(a);
dfd.resolve();
}
},
"Cancle" : {
id: "cancle",
text: "Cancle",
click: function(){
$(this).dialog('close');
var a = 0;
console.log(a);
dfd.reject();
}
}
}
});
console.log(dfd);
return dfd.promise();
};
$.when( confirm('hey') ).then(
function() {
console.log("true")
},
function(d) {
console.log("false")
});

Customised confirm jquery dialog across project

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

jQuery UI dialog with boolean return - true or false

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
}
}
);