Develop Reference

jQuery UI dialog title task

How would you override jQuery UI's default functionality so that whenever I set a new title for a dialog - it adds xxx in front of it? So $("#any_dialog_id").dialog("option", "title", "yyy") would set title to xxxyyy.
$().ready(function(){
$("#dialog").dialog();
$(".ui-dialog-title").before("xxx");
// I add the line //
$("#any_dialog_id").dialog("option", "title", "yyy");
});
But he show yyyxxx not xxxyyy
What I have to do, to make it work??
Thanks...

There are many ways you could do this.
The very simplest is to run your line $(".ui-dialog-title").before("xxx"); AFTER each call to opening a dialog. You cannot merely run it once and expect it to re-run on later dialog calls.
Another way to do this is to modify the jquery code. But I HIGHLY disrecommend doing that.
If I were to really want to systematically apply a prefix, I would make a helper function or wrapper that do this for me and call it instead of the jquery dialog directly.
Here is an example of what you might do and I have included a jsfiddle link as well (http://jsfiddle.net/stdw6j5q/1/):
HTML:
<div id="idDiv_MyDialog">Hi 1!</div>
<div id="idDiv_MyDialog2">Hi 2!</div>
<div id="idDiv_MyDialog3">Hi 3!</div>
<div id="idDiv_MyDialog4">Hi 4!</div>
JAVASCRIPT:
jDialog = function(options) {
// THE WRAPPER TAKES TWO EXTRA OPTIONS TO IDENTIFY THE DIALOG AND THE TITLE PREFIX TO USE
// I SET A DEFAULT SELECTOR IF NOTHING IS PASSED IN
var _dialog = options && options.dialog ? options.dialog : '#idDiv_MyDialog';
// HERE YOU CAN SET A DEFAULT PREFIX
var _titlePrefix = options && options.titlePrefix ? options.titlePrefix : 'XYZ: ';
// UPDATE THE TITLE OPTION
options.title = _titlePrefix + options.title;
// PASS THROUGH ALL YOUR NORMAL OPTIONS TO THE DIALOG
$(_dialog).dialog(options);
// THIS RETURNS A HANDLE/REFERENCE TO THE DIALOG CREATED
return $(_dialog);
}
$(function() {
// CALL YOUR WRAPPER WHEN YOU NEED TO CREATE/MOD THE DIALOG
$myDialog1 = jDialog({
title: 'Hey Jude',
close: function(event, ui) { $myDialog2.dialog('open'); }
});
$myDialog2 = jDialog({
dialog: '#idDiv_MyDialog2',
title: 'Don\'t let me down',
autoOpen: false,
close: function(event, ui) { $myDialog3.dialog('open'); }
});
$myDialog3 = jDialog({
dialog: '#idDiv_MyDialog3',
title: 'Take a sad song',
autoOpen: false,
close: function(event, ui) { $myDialog4dialog('open'); }
});
$myDialog4 = jDialog({
dialog: '#idDiv_MyDialog4',
title: 'And make it better',
autoOpen: false
});
});

You can set an event to run whenever a dialog is created that adds the title.
$(document).on('dialogcreate', function(){ // let it bubble up
$(".ui-dialog-title", this).before("xxx"); // add "xxx" before the title of this dialog
});

How do I hide a jquery dialog until content is retrieved?

I have a button's onclick set to use the following function EditContact. This function sets up a jquery dialog, gets the data from the server and displays it. Everything works but I would like to get it to work a little better. Right now the empty dialog pops up for the time it takes the code to go and fetch the content from the server then the dialog populates with the content. My question is how can I get the dialog to not pop up until the content has been received.
function EditContact() {
$('#editContactView').dialog({
modal: true,
width: 'auto',
position: ['top', 'center'],
resizable: false,
autoOpen: false,
open: function (event) {
var szAction = "Content url for this example";
$(this).load(szAction,
function (response, status, xhr) {
$('#editContactView').dialog('open');
return false;
});
}
});
$('#editContactView').dialog('open');
}

I think you should be able to essentially turn what you have inside out and and open the dialog on $().load() completion. Something like this might do it:
function editContact() {
var szAction = "Content url for this example";
$(this).load(szAction, function (response, status, xhr) {
$('#editContactView').dialog({
modal: true,
width: 'auto',
position: ['top', 'center'],
resizable: false
});
});
}
Edit:
Notice I removed the {autoOpen: false}. This will create it and open it in one shot after you receive the content.

You are calling .dialog('open') twice: in the end of the code and in the callback for the loading.
As JavaScript is asynchronous, it runs the line $('#editContactView').dialog('open'); in the end before the data is received.
Removing this line should solve the problem.

Var in dialog defined outside of it returns undefined jQuery

I'm opening a dialog using a .load function and then I want to grab the values from the fields in the dialog defining the variables outside the dialog function, but it returns undefined, so my question is, how do I define the variables outside the dialog function to use it inside it,
An example what I want to do.
First I request the dialog:
$( '#dialog-form' ).load('table_models/add_to_table.php',function(){
$( '#dialog-form' ).dialog('open');
});
Now I define the variables and the dialog popup:
$(function() {
var sku = $( "#sku" ),
fba_sku = $( "#fba_sku" ),
asin = $( "#asin" ),
$( "#dialog-form" ).dialog({
title: 'New Product',
autoOpen: false,
height: 'auto',
width: 'auto',
modal: true,
buttons: {
"Done": function() {
// I want to get the var sku, fba_sku, asin here
}
},
}
}
I hope you understand what I want to do, if not I will try to explain it better,
Thanks
EDIT
The .load function being requested from a button on page, then the dialog function is on external JS file, there I want to define first the var of the fields from the dialog form and reuse it for all functions on this page.

Try defining the function outside the object, like so:
var cb = function() { /* stuff with sku, fba_sku, asin */ };
$("#dialog-form").dialog({
...
buttons:{"Done":cb}
});

Your understanding of "'Now' I define [...]" may be flawed–it's unclear where the ready function is defined. .load is asynchronous and will complete at an arbitrary time in the future.
Get the element values in the "Done" function so they're filled with the most recent values.

jQuery UI Dialog with Confirmation

I have a jQuery UI dialog that gets a line of text. If this text is not contained in a localStorage dictionary, I insert it into the dictionary. If it is present, I want to give the user the option not to overwrite the existing entry in the "ok" handler.
Because jQuery UI dialogs are stateful and persist across multiple calls unless explicitly removed (AFAICT), I'm not seeing a clear path to presenting the "are you sure you want to nuke your previous entry?" alert without resorting to ... uh ... alert.
The question, succinctly stated: Can you create a confirmation box from inside a jQuery UI Dialog?
Thanks.

I have not used jQuery UI Dialog, but you can always create your own html elements and do whatever you wish with them, including layering them on top of the jQuery dialog.

I guess you could have googled something to find these links:
Anyways have it and make fun:
JQuery Dialogs
Jquery Confirmation
Cheers!!!

Ok, it turned out the best way I found to handle this was using closures. Like this (pseudo-code):
getThingieName: handler(function() {
var $dialog;
$dialog = $('<div id="thingie-name-dialog" class="ui-widget"></div>').html("<p>Enter a name for this thingie</p>\n<input type=\"text\" id=\"dlg-thingie-name\" style=\"width: 80%\" />").dialog({
autoOpen: false
}, {
title: 'enter a name',
modal: true,
buttons: {
Add: function() {
var value = $('#dlg-thingie-name').val();
$(this).dialog('close');
$('#thingie-name-dialog').remove();
return handler(value); // <= closure to handle the onAdd
},
Cancel: function() {
$(this).dialog('close');
return $('#thingie-name-dialog').remove();
}
}
});
return $dialog.dialog('open');
}),
getConfirmation: function(message, handler) {
var $dialog;
$dialog = $('<div id="confirmation-dialog" class="ui-widget"></div>').html("<p>" + message + "</p>").dialog({
autoOpen: false
}, {
title: 'confirm overwrite',
modal: true,
buttons: {
Ok: function() {
$(this).dialog('close');
$('#confirmatio-dialog').remove();
return handler(true); // <= closure to handle onOk
},
Cancel: function() {
$(this).dialog('close');
$('#Thingie-name-dialog').remove();
return handler(false); // <= closure to handle onCancel
}
}
});
return $dialog.dialog('open');
}
// Calling sequence
Snippets.getSnippetName(function(value) {
if (value == null) return false;
if (localStorage.getItem(value)) {
getConfirmation("This thingie, " + value + ", already exists. Overwrite?", function(response) {
if (response) return localStorage.setItem(value, snippet);
});
} else {
localStorage.setItem(value, snippet);
}
}
This may not be the optimal code, but it does make the triggering of the dialogs dependent on the button push by embedding them in the handlers.

Confirmation with save and discard button

How can we create a confirmation alert in javascript with a save and discard button in it?
If we use the code
confirm('Do you want to save it?');
We will get an alert box with ok cancel.
How can we make the text of ok button as save and the other as discard?

You cannot modify the default javascript method "confirm". But, you can override it, for example, with jQuery UI dialog:
window.confirm = function (message) {
var html = "<div style='margin:20px;'><img style='float:left;margin-right:20px;' src='/img/confirm.gif' alt='Confirm'/><div style='display:table;height:1%;'>" + message + "</div></div>";
$(html).dialog({ closeOnEscape: false,
open: function (event, ui) { $('.ui-dialog-titlebar-close').hide(); },
modal: true,
resizable: false,
width: 400,
title: "Confirmation",
buttons: {
"Save": function () {
//Do what you need
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
}

this is not possible
more answers

Connect some of the tons JS framework. For example jQuery+UI
Overwrite window.confirm method, by makin it as wrapper to your favorite JS UI framework.
PROFIT!!!