We Keep Coding

wait till jquery dialog box returns

I need to open a popup window on clicking a button and used jquery dialog for this.
$(document).ready(function(){
$("#dialog-form").dialog({
autoOpen : false,
height : 300,
width : 350,
modal : true,
buttons : {
"Add" : function() {
$("#tag1").text($("#textArea").val());
$(this).dialog("close");
},
Cancel : function() {
$(this).dialog("close");
}
},
close : function() {
$("#textArea").val("");
}
});
});
function openWindow(){
$("#dialog-form").dialog("open");
statement1;
statement2;
}
<button id="add" onclick="openWindow()">Add</button>
problem over here is when i click the button dialog box is opened, but before even i enter some text in the dialog box statement1 and statement2 are getting executed and then focus is coming to the dialog box.
How can i make the statement1 and statement2 to execute only after dialog box returns?
I don't want to add the statement1 and statement2 to the "Add" function. The reason for not adding the statements in the "Add" function is because i have multiple buttons and each of these should first open the dialog box and then will execute different set of statements.

Easy fix would be to use the close callback:
$(document).ready(function () {
$("#dialog-form").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add": function () {
$("#tag1").text($("#textArea").val());
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function () {
$("#textArea").val("");
//statement1 -- won't fire until dialog is closed
//statement2 -- won't fire until dialog is closed
}
});
});
function openWindow() {
$("#dialog-form").dialog("open");
}
Another thing to consider would be $.Deferred

I have an example for you:
$(".selector").click(function () {
var dialog = $('<div title="Title"></div>').dialog({
open: function (event, ui) {
$.ajax({
url: 'www.google.com.br',
cache: false,
success: function (html) {
$(dialog).html(html);
},
error: function () {
$(dialog).remove();
alert("Some Error MSG");
}
});
},
close: function () {
$(dialog).remove();
},
resizable: false,
width: 500,
modal: true
});
});
In this case, the dialog is receiving the HTML result, only after it opens.

This can be achieved by the following way:-
$('#mydialog').dialog("open");
$('#mydialog').load('serverURL',server_data_variable, function() {
myfunction();
});
This will execute the function once the dialog loading is done.It will register the callback to be executed post dialog done.The variable server_data_variable is optional and is supposed to be used only if user wants to send some data otherwise it can be skipped as.well.

Solution 1: (same as solution from Aaron Blenkush)
$("#dialog-form").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add": function () {
$("#tag1").text($("#textArea").val());
$(this).dialog("close");
//statement1 -- will fire only if "add" button is clicked
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function () {
$("#textArea").val("");
//statement1 -- will fire after dialog is closed
}
});
Solution 2 is to make a promise:
const dialogPromise = new Promise(function (resolve, reject) {
$("#dialog-form").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add": function () {
$("#tag1").text($("#textArea").val());
$(this).dialog("close");
resolve(true);
},
Cancel: function () {
$(this).dialog("close");
resolve(false);
}
},
close: function () {
$("#textArea").val("");
}
});
});
const addClicked = await dialogPromise;

Call callback function after "open" clause in the dialog setup.
modal: true,
resizable: false,
resize: 'auto',
close: dialogCloseFunction,
**open: function(){if(itemid) {showDailogSides(itemid);}** if(!siteParams[3]) {$(".detailSideClass").hide(); $(".addToChartinDialog").hide();}},
//hide: {effect: "fadeOut", duration: 5000}
show: { effect: "fade", duration: 1000 } //drop blind fade fold slide clip

Need to display & as it is in jQuery dialog title, but it is getting converted to &

I need to display & as it is in Jquery dialog box's title bar but it is getting converted to &. So, the idea is to display the value as it is in dialog box title. it is working fine for everything but when I am using & or ' then it is getting converted to & or ' respectively. Below is my code:
var name = '&'
$('#testdialog')
.dialog(
{
title: name,
autoOpen: false,
width: 900,
height: 400,
scrollable: true,
draggable: true,
modal: true,
resizable: false,
open: function (event, ui) {
jQuery.ajaxSetup({ cache: false });
callTest();
},
close: function (event, ui) {
jQuery.ajaxSetup({ cache: false });
$('#testdialog').html('');
},
buttons: {
Ok: function () {
$(this).dialog('close');
}
}
});$('#testdialog').dialog('open');
I want to display the value of name variable as it is. I tried keeping the value in a div and used $("#divID").html() in title attribute but it did not work. Could you please help me on this?

Update your variable to the following and you should be good to go:
var name = '&'
For ' use:
var name = '''

Calling methods of a configuration object that is passed to a function in JavaScript/jQuery

I have a funciton that accepts a configuration object which in turn generates a modal dialog with jQuery UI like so:
function modalDialog(settings) {
var options = $.extend({
selector: '.dialog', // the dialog element selector
disabled: false, // disables(true) or enables (false) the dialog
autoOpen: false, // dialog opens automatically when called (true), (false) dialog hidden until .dialog(open) method called
closeOnEscape: true, // dialog closes when focused and ESC key pressed
closeText: 'close', // specifies text for close button
draggable: false, // (true) dialog draggable by the title bar
resizable: false, // dialog is resizable
height: 'auto', // height of dialog in px
minHeight: false, // min-height in px
maxHeight: false, // max-height in px
width: 300, // width of dialog in px
minWidth: 150, // min-width in px
maxWidth: false, // max-width in px
modal: true, // disables other items on page
hide: null, // the effect to be used when dialog is closed
show: null, // the effect to be used when dialog is opened
position: 'center', // specifies where dialog should be displayed: single string, array of co-ordiantes, array of string values
title: '', // dialog title. Any valid HTML may be used
zIndex: 1000, // starting z-index for the dialog
stack: true // specifies if dialogs will stack on other dialogs
}, settings || {});
$(options.selector).dialog({
disabled: options.disabled,
autoOpen: options.autoOpen,
closeOnEscape: options.closeOnEscape,
closeText: options.closeText,
draggable: options.draggable,
resizable: options.resizable,
height: options.height,
minHeight: options.minHeight,
maxHeight: options.maxHeight,
width: options.width,
minWidth: options.minWidth,
maxWidth: options.maxWidth,
modal: options.modal,
hide: options.hide,
show: options.show,
position: options.position,
title: options.title,
zIndex: options.zIndex,
stack: options.stack,
create: function(event, ui){
if (typeof options.createCall == 'function') {
options.createCall.call(this);
}
},
open: function(event, ui){
if (typeof options.openCall == 'function') {
options.openCall.call(this);
}
},
beforeClose: function(event, ui){
if (typeof options.beforeCloseCall == 'function') {
options.beforeCloseCall.call(this);
}
},
close: function(event, ui){
if (typeof options.closeCall == 'function') {
options.closeCall.call(this);
}
},
focus: function(event, ui){
if (typeof options.focusCall == 'function') {
options.focusCall.call(this);
}
}
});
}
There is probably going to be a lot of modals on the project i am working on so i thought that it would be tidy to store the configuration objects within an object literal rather than generate them on the fly. Something like this:
icisSite.modalStore = {
tradeFlowGraph: {
selector: '.rtx-TradeFlowGraphs',
title: 'Fertilizer Trade Flow graphs',
width: 800,
openCall: function(){
carouselLink
.eq(0)
.trigger('click');
}
}
}
Then the modal could be created by passing the reference to the stored object:
modalDialog(icisSite.modalStore.tradeFlowGraph);
The issue i am having is that the openCall method is not being invoked when passed to the modalDialog function in this manner. It does work when the configuration object is passed like this and i don't know why:
modalDialog({
selector: '.rtx-TradeFlowGraphs',
title: 'Fertilizer Trade Flow graphs',
width: 800,
openCall: function(){
carouselLink
.eq(0)
.trigger('click');
}
});
Whilst it is not an issue to pass the parameters like this it would be nice to have them all stored centrally in an object literal that is available all the time, rather than creating and passing objects ad hoc.

It seems as though bringing the icisSite.modalStore object literal into the jQuery scope fixes the issue.
So wrapping it in the factory function like so:
$(function(){
icisSite.modalStore = {
tradeFlowGraph: {
selector: '.rtx-TradeFlowGraphs',
title: 'Fertilizer Trade Flow graphs',
width: 800,
openCall: function(){
carouselLink
.eq(0)
.trigger('click'); } } } });

jquery unspecified error IE

So, IE is giving me issues, surprise, surprise...
I create a jquery dialog box (Div3) and then inside div3, i display a table (Div4). This works fine in firefox. However, in IE it is not displaying div 3, the popup window. Instead it returns the error "Unspecified error," and only displays div4, the table. Code is below...
I believe the error is somewhere in the else statement.
Any help is appreciated. Thanks!
function displayMid(count) {
var x = $("#Pid"+count).text();
var y = $("#PidSeries"+count).text();
//alert(x);
if (x == 0) {
return;
}
else if (y == null || y == " " || y == "") {
$("#inputDiv3").html("").dialog('destroy');
$("#inputDiv3").dialog({
title: 'You must add the Product before you can assign catalogs!!!',
width: 500,
modal: true,
resizable: false,
buttons: {
'Close': function() { $(this).dialog('close'); }
}
});
}
else {
$("#inputDiv3").dialog('destroy');
$("#inputDiv3").html('<div style="height:300px;overflow-y:scroll;"><div id="inputDiv4"></div></div>').dialog({
title: 'Catalog for ' + $("#PidTitle"+count).text(),
width: 500,
modal: true,
resizable: false,
open: $.get('content_backend_pub_pid.ashx', { cmd: 4, pid: x }, function(o) {
$("#inputDiv4").html(o);
}),
buttons: {
'Close': function() { $(this).dialog('close'); }
}
});
}
}

Not sure about this but I think you should wrap the ajax call for open: in a anonymous function.
open: function(){
$.get('content_backend_pub_pid.ashx', { cmd: 4, pid: x }, function(o) {
$("#inputDiv4").html(o);
});
},

Usually IE specifies a line number for the error. You have a lot going on in there, try breaking down each part into its own statement on a separate line. You can then throw in console logs between each line as well.
In general I like to create a new variable and assign that to the property, or create a new local function if the property is a function.

The issue seems to be in your open function. Maybe try wrapping that in an anonymous function like so:
$("#inputDiv3").html('<div style="height:300px;overflow-y:scroll;"><div id="inputDiv4"></div></div>').dialog({
title: 'Catalog for ' + $("#PidTitle"+count).text(),
width: 500,
modal: true,
resizable: false,
open: function() {
$.get('content_backend_pub_pid.ashx', { cmd: 4, pid: x }, function(o) {
$("#inputDiv4").html(o);
});
},
buttons: {
'Close': function() { $(this).dialog('close'); }
}
});
Otherwise, the "get" will fire immediately as opposed to when you actually open the dialog.

Function doesn't work at second call

i have this function
function notify()
{
alert('oo');
$("#SuccessNotification").dialog({
bgiframe: true,
modal: true,
title: 'success',
buttons: {
Ok: function() {
$(this).dialog('close');
}
}
});
}
the alert works each time this function is called but the dialog is getting poped out only first time

You have to call the dialog with the open argument like this:
function notify()
{
alert('oo');
var elem = $("#SuccessNotification")
elem.dialog({
bgiframe: true,
modal: true,
title: 'success',
buttons: {
Ok: function() {
$(this).dialog('close');
}
}
});
elem.dialog('open');
}