Develop Reference

Cannot create a table inside a Dialog Box

The Dialog Opens fine,but there is no Table tag,i also cant see any error, so that i can sort out whats wrong.
function CreateDialog(data){
$( "#dialog-form" ).dialog({
autoOpen: true,
height: 300,
width: 350,
modal: true,
open: function() {
jQuery('dialog-form').append('<table><tr>');
jQuery.each(data, function(key, value) {
jQuery('dialog-form').append("<td>"+value+"</td>");
});
jQuery('dialog-form').append('</tr></table>')
},
Cancel: function() {
$( this ).dialog( "close" );
}
});
}

Try to change:
jQuery('dialog-form')
to:
jQuery('#dialog-form')
You're missing # to target id here.

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/

pass string to jquery dialog to become name of the button

For the purpose of globalization I need to translate buttons in jquery dialog, but when I try to pass variable I don't get value of variable, just name of it.
var RemoveDialogButton = "#FriendsNamesNS.FriendsNames.Remove";
var CancelDialogButton = "#FriendsNamesNS.FriendsNames.Cancel";
//alert(RemoveDialogButton);
$( "#dialog-confirm" ).dialog({
autoOpen: false,
resizable: false,
height:190,
modal: true,
buttons: {
RemoveDialogButton: function() {
$( this ).dialog( "close" );
$('#yesno').click();
return true;
},
CancelDialogButton: function() {
$( this ).dialog( "close" );
}
}
});

RemoveDialogButton: {
click: function() {
$( this ).dialog( "close" );
$('#yesno').click();
return true;
},
text: RemoveDialogButton
}

var buttons= {};
buttons[your text] = function() { ....};
$('.selector').dialog({
buttons: my_buttons
});

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