We Keep Coding

Wait for modal window to close and then execute the following lines in javascript

I have a modal Window which pops up and wait for 5 seconds and then closes.
The code is as follows
function callMe()
{
//alert("entering");
$("#dialog").dialog({
modal: true,
//title: "Confirm",
resizable: false,
width: 300,
height: 150,
open: function (event, ui)
{
setTimeout(function () { $("#dialog").dialog("close");}, 5000);
},
buttons: {
Ok: function () {
// $(this).dialog("close"); //closing on Ok
},
Cancel: function () {
// $(this).dialog("close"); //closing on Cancel
}
}
});
alert("Some Text");
}
callMe() function is called on load of the HTML file. Here I want to show the alert message "Some Text" after the modal window closes in 5 second. But every time when I run this it shows both the modal window and alert box together. I want the modal window to display first , wait for 5 sec and then show the alert box.I tried using sleep but its still coming the same way.

You have 2 options
function callMe()
{
//alert("entering");
$("#dialog").dialog({
modal: true,
//title: "Confirm",
resizable: false,
width: 300,
height: 150,
open: function (event, ui)
{
setTimeout(function () { $("#dialog").dialog("close");}, 5000);
},
buttons: {
Ok: function () {
// $(this).dialog("close"); //closing on Ok
},
Cancel: function () {
// $(this).dialog("close"); //closing on Cancel
}
},
close: function(){
alert("Some Text");
}
});
$('#dialog').on('dialogclose', function(event) {
alert('Some Text');
});
}
USE "close" method
use on dialogueClose event both examples are given in code above

It would be nicer if you can tell us what plugin you use for the dialog. I'm guessing the dialog has a close option that accepts a function. So try this:
...
open: function (event, ui)
{
setTimeout(function () { $("#dialog").dialog("close");}, 5000);
},
close: function() {
alert("Some Text");
},
...

You can put the alert inside the setTimeout, just after you close the window.
JAVASCRIPT
open: function (event, ui)
{
setTimeout(function () {
$("#dialog").dialog("close");
alert("Some Text");
}, 5000);
},

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

Confirm Jquery UI Dialog Prompt on Enter Key

I've tried the techniques suggested in the following stack answer to no luck:
Submit jQuery UI dialog on <Enter>
Something must be off with my code. On login, I have a disclaimer that pops up to warn the user that the information found within the site is confidential. I would like it so that to continue, all the user has to do is hit the enter key. Here is my original code (I've included a browser check):
$("#loginForm").submit(function (e) {
e.preventDefault();
if ($.browser.msie) {
$("#dialog-confirm")
.dialog({
resizable: false,
height: 300,
width: 550,
modal: true,
buttons: {
"Continue": function (e) {
$("#loginForm").unbind('submit').submit(),
$(this).dialog("close"),
$("#loginForm").submit();
$("#btnLogin").click();
},
Cancel: function (e) {
e.preventDefault();
$(this).dialog("close");
}
}
})
}
else {
$("#dialog-browser")
.dialog({
resizable: false,
height: 220,
width: 480,
modal: true,
buttons: {
"Close": function (e) {
e.preventDefault();
$(this).dialog("close");
}
}
})
};
});
Now here is my code with the keyup commands:
$("#loginForm").submit(function (e) {
e.preventDefault();
if ($.browser.msie) {
$("#dialog-confirm")
.dialog({
resizable: false,
height: 300,
width: 550,
modal: true,
buttons: {
"Continue": function (e) {
$("#loginForm").unbind('submit').submit(),
$(this).dialog("close"),
$("#loginForm").submit();
$("#btnLogin").click();
},
Cancel: function (e) {
e.preventDefault();
$(this).dialog("close");
}
},
HERE>>> open: function() {
$("#dialog-confirm").keypress(function(e) {
if (e.keyCode == $.ui.keyCode.ENTER) {
$("#loginForm").unbind('submit').submit(),
$(this).dialog("close"),
$("#loginForm").submit();
$("#btnLogin").click();
}
});
}
})
}
else {
$("#dialog-browser")
.dialog({
resizable: false,
height: 220,
width: 480,
modal: true,
buttons: {
"Close": function (e) {
e.preventDefault();
$(this).dialog("close");
}
}
})
};
});
This unfortunately is not working for me and I can't for the life of me figure out why? If anyone can see where the issue is, I'd be extremely grateful!
Thanks!!

I put this aside for most of the day and just revisited it. I got it working! Here's my code:
$("#loginForm").submit(function (e) {
e.preventDefault();
if ($.browser.msie) {
$("#dialog-confirm")
.dialog({
resizable: false,
height: 300,
width: 550,
modal: true,
buttons: {
"Continue": {
text: "Continue",
id: "btnContinue",
click: function (e) {
$("#loginForm").unbind('submit').submit(),
$(this).dialog("close"),
$("#loginForm").submit();
$("#btnLogin").click();
}
},
Cancel: function (e) {
e.preventDefault();
$(this).dialog("close");
}
},
open: function () {
$(document).keydown(function (event) {
if (event.keyCode == 13) {
$("#btnContinue").click();
}
});
}
})
}
Essentially, I assigned the button in my dialog an ID value, and instead of $("#dialog-confirm").keydown I used $(document).keydown. Since the function is set only after the dialog opens, it won't necessarily affect the rest of my page. Inside of the keydown function, I have it hitting the continue button of which I call out by ID.
Thanks for the help everyone.

Try using this:
$("#dialog-confirm").keydown(function (event) {
if (event.keyCode == 13) {
// Submit it
}
});

If you don't have any elements in the dialog that will get focus (i.e: input elements), you can try the approach suggested in this question: jquery-ui Dialog: Make a button in the dialog the default action (Enter key)

jQueryUI Dialog with Ajax Form Won't Close with $(this).dialog("close");

I have a jQueryUI Dialog loading up a form from an external url, the form renders fine and posts ok but neither the save or cancel buttons seem to close the form yet the dialog close icon does it's job just fine.
Here is my script that spawns the dialog and should handle the buttons:
$(function () {
$('a.modal').on('click', function() {
var href = $(this).attr('href');
$("#modalAdd").html("")
.dialog({
title: $(this).attr("title"),
width: 400,
height: 300,
buttons: {
"Save": function() {
$.post(href,
$("form").serialize(),
function() {
$(this).dialog("close");
});
},
Cancel: function() {
$(this).dialog("close");
}
}
})
.load(href, function() {
$(this).dialog("open");
});
return false;
});
});
The final solution was to declare the variable outside of the scope of the dialog declaration as follows:
$(function () {
$('a.modal').on('click', function() {
var href = $(this).attr('href');
var modal = $("#modalAdd");
modal.html("")
.dialog({
title: $(this).attr("title"),
width: 400,
height: 300,
buttons: {
"Save": function() {
$.post(href,
$("form").serialize(),
function() {
modal.dialog("close");
});
},
Cancel: function() {
modal.dialog("close");
}
}
})
.load(href, function() {
**modal**.dialog("open");
});
return false;
});
});

It's because of variable scope, as soon as you start the call back function for the $.post call, this is no longer the dialog box. Try calling $("#modalAdd").dialog('close'); instead.
If you don't mind expanding your $.post() and $.load() calls, you can set the context of this to a certain element using the full $.ajax() method. See the "context" option in the docs.

this is changed in the ajax callback function, you need to cache to a local variable.
"Save": function () {
var $this = $(this);
$.post(href, $("form").serialize(), function () {
$this.dialog("close");
});
},

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.