Develop Reference

Cannot trigger Dialog Box

i have following code, i am unable to load a Dialog Box
function CreateDialog(data){
alert('Hello');
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"OK": function() {
allFields.removeClass( "ui-state-error" );
jQuery.append('<table><tr>');
jQuery.each(data, function(key, value) {
jQuery.append("<td>"+value+"</td>");
});
jQuery.append('</tr></table>')
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});}
now i can alert but i cannot trigger Dialog, i am also not getting any error. I am linking my libraries as follows.
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

You have your dialog set to autoOpen: false which means you have to open it yourself:
$('#dialog-form').dialog('open');
http://api.jqueryui.com/dialog/#method-open

Remove the following line
autoOpen: false,

Jquery dialog should only open once per user

I use jquery ui modal dialog on a front page and I'd like to show it only one per user. This is my code:
<script>
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
resizable: false,
show: 'slide',
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
<div id="dialog-message" title="Attention">
<p>Sample text here!</p>
</div>
Any help is much appreciated!
Thanks!

Either use cookies (like mentioned before) or the localStorage API (depending on which browsers you have to support).
A way with cookies:
$(function() {
if( document.cookie.indexOf( "runOnce" ) < 0 ) {
$( "#dialog-message" ).dialog({
modal: true,
resizable: false,
show: 'slide',
buttons: {
Ok: function() {
$( this ).dialog( "close" );
document.cookie = "runOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
}
}
});
}
});
A way with localStorage:
$(function() {
if( ! localStorage.getItem( "runOnce" ) ) {
$( "#dialog-message" ).dialog({
modal: true,
resizable: false,
show: 'slide',
buttons: {
Ok: function() {
$( this ).dialog( "close" );
localStorage.setItem( "runOnce", true );
}
}
});
}
});

You have to check if a user has visited specific page or not. You can keep the status in session variable or cookie. Based on value you can display dialog box.
example using cookie:
include jquery cookie in your html file i.e. https://code.google.com/p/cookies/downloads/list
following code will do your task
$(document).ready(function()
{
$(function() {
if ($.cookie('page_visited') != 'yes')
{
$( "#dialog-message" ).dialog({
modal: true,
resizable: false,
show: 'slide',
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
$.cookie('page_visited','yes')
}
});
});
You can set cookie expiration period as third parameter $.cookie('page_visited','yes', expiration_date)

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