Develop Reference

Having a JavaScript function wait on the results of a Jquery dialog modal

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

Using jQuery UI modal dialog as confirm

Is there a way i can use a jQuery UI based modal dialog for confirmation instead of the normal JS confirm()? I would like to be able to do something like:
if (jquery_ui_confirm('Are you sure?')) {
// do something
}
Thanks in advance.

var jqConfirm = function(msg, success) {
var dialogObj = $("<div style='display:none'>"+msg+"</div>");
$("body").append(dialogObj);
$(dialogObj).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"OK": function() {
success();
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
};
Call this function using
jqConfirm("This will delete all records", function(){ /*do something here */});

yes you can.. you can provide requried html to dialog
<script>
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"OK": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
HTML Code
<div id="dialog-confirm" title="Confirmation Dialog">
<p>
<span class="ui-icon ui-icon-alert"
style="float: left; margin: 0 7px 20px 0;"></span>Would you like to delete this item?
</p>
</div>

you can also use Jquery Alert plugin as well. Here is a link: http://labs.abeautifulsite.net/archived/jquery-alerts/demo/

How would I add a "add" button to this code?

Sorry for my lack of knowing JS. But I have this Jquery dialog code and need to add a button that says "Add" and would call a new blank dialog? I'm a UX/UI designer and syntax messes me up, lol. Any help would be great.
$( "#dialog-message" ).dialog({
autoOpen: false,
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
$( "#opener" ).click(function() {
$( "#dialog-message" ).dialog( "option", "width", 650 );
$( "#dialog-message" ).dialog( "open" );
return false;
});

The buttons property is a javascript literal object, so you can add a button like this:
buttons: {
Ok: function() {
$( this ).dialog( "close" );
},
Add : function() {
$('#otherDialog').dialog("open");
}
}
As you can see, they are functions separated by comma and the name will be used as text.

Try this:
$(function() {
$( "#opener" ).click(function() {
$( "#dialog-modal" ).dialog({
width: 650,
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
});

How to use the same jQuery UI dialog box?

I want to use a jQuery UI dialog to display the errors in the different inputs. My problem is that I would like to define the feature of dialog box only one but associate it with several html containing an id and a specific error message.
How could I do that?
At the moment, I have this:
// definition of the dialog, to do only once
$( "#dialog" ).dialog({
autoOpen: false,
show: {effect: 'fade', speed: 100},
hide: {effect: 'fade', speed: 100},
modal: true,
resizable: false,
title: "Incorrect value",
buttons: { Ok: function() { $(this).dialog( "close" ); }},
beforeClose: function() { $( "#time_at_address_years1" ).focus().val('') },
});
// the event, one per input
$( "#time_at_address_years1" ).blur(function() {
$( "#dialog1" ).dialog( "open" );
return false;
});
And the HTML of one message is like this:
<div id="dialog">
<p>The error message here.</p>
</div>

Just warp the dialog in a function and pass that function the current jQuery-selector.
function my_dialog(selector, tofocus) {
$(selector).dialog({autoOpen:true, ...more options...});
}
Than call it like this:
$( "#time_at_address_years1" ).blur(function() {
my_dialog('#dialog1', '#time_at_address_years1');
return false;
});
Also, you should have a look at the jQuery-Validator-Plugin http://docs.jquery.com/Plugins/Validation

How to make jQuery dialog modal?

I am using jQuery dialog in asp.net. It is working fine for me. The problem is when I open the dialog box, I can still work parent page functionality. I don't want that. Just dialog to modal and should not allow focus on parent page.
window.onload = function onloadFunction() {
//setup edit person dialog
$('#uploadPic').dialog({
autoOpen: false,
draggable: true,
title: "Upload Picture",
open: function(type, data) {
$(this).parent().appendTo("form");
}
});
}
Is there any way to make it modal? Or if lost focus on dialog box close it automatically?
Please help me out.

Use
$('#uploadPic').dialog({
autoOpen: false,
modal: true,
draggable: true,
title: "Upload Picture",
open: function(type, data) {
$(this).parent().appendTo("form");
}
});
}
I have just added the modal option to your sample.

Read the documentation of JQuery Ui Dialog in: http://docs.jquery.com/UI/Dialog
Exist a Option called Modal, here is some samples from doc:
Initialize a dialog with the modal option specified.
$( ".selector" ).dialog({ modal: true });
Get or set the modal option, after init.
//getter
var modal = $( ".selector" ).dialog( "option", "modal" );
//setter
$( ".selector" ).dialog( "option", "modal", true );