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.

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

missing : after property id in JQuery.inArray(value, array)

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
}...