We Keep Coding

How to close a jquery dialog box on opening an alert box

I have a javascript code below:
var alertText = "Hey.";
$("div").remove("#confirmationDialogBox");
$(document.body).append("<div id='confirmationDialogBox'></div>");
$("#confirmationDialogBox").html('');
$("#confirmationDialogBox").dialog({
resizable: false,
height: 140,
title: 'Alert !!',
modal: true,
draggable: false,
zIndex: 99999,
buttons: [{
"class": 'btnModalDisplay',
text: "Ok",
click: function () {
//Calls another function that shows an alert
}}]
}).text(alertText);
My problem here is, when the dialog box appears and onclick of 'ok' of the dialog box i have to call another function that shows an alert.But for some reason when i click 'ok', the dialog box doesn't close and the alert shows up. Could someone help how can I close the dialog box and then the alert shows up?

You need to use .dialog("close"), like below:
var alertText = "Hey.";
$("div").remove("#confirmationDialogBox");
$(document.body).append("<div id='confirmationDialogBox'></div>");
$("#confirmationDialogBox").html('');
$("#confirmationDialogBox").dialog({
resizable: false,
height: 140,
title: 'Alert !!',
modal: true,
draggable: false,
zIndex: 99999,
buttons: [{
"class": 'btnModalDisplay',
text: "Ok",
click: function () {
// Calls another function that shows an alert
$( this ).dialog( "close" ); // add this line to close dialog
}
}]
}).text(alertText);

You can try to update the click event like this:
$("#confirmationDialogBox").dialog({
...
buttons: [{
"class": 'btnModalDisplay',
text: "Ok",
click: function(e) {
//Calls another function that shows an alert
e.preventDefault();
$('#confirmationDialogBox').dialog('close');
}
}]
});
DEMO:
var alertText = "Hey.";
$("div").remove("#confirmationDialogBox");
$(document.body).append("<div id='confirmationDialogBox'></div>");
$("#confirmationDialogBox").html('');
$("#confirmationDialogBox").dialog({
resizable: false,
height: 140,
title: 'Alert !!',
modal: true,
draggable: false,
zIndex: 99999,
buttons: [{
"class": 'btnModalDisplay',
text: "Ok",
click: function(e) {
//Calls another function that shows an alert
e.preventDefault();
$('#confirmationDialogBox').dialog('close');
}
}]
}).text(alertText);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet">

jquery how to get this dialog Ok button to work?

The dialog is displayed and works perfectly. The top right "X" Close button properly dismisses the dialog, but the OK button does nothing.
(I'm using jquery 1.9.1)
function showFollowProjectInDialog(followurl){
$.ajax({
url: followurl,
success: function(data) {
$("#TFdialog").html(data).dialog({
resizable: true,
height: 600,
width: 700,
modal:true,
buttons: {
Ok: function() {$( "#TFdialog" ).dialog( "close" );}
},
}).dialog('open');
}
});
}
I've also tried it without the comma following the button like:
buttons: {
Ok: function() {$( "#TFdialog" ).dialog( "close" );}
}
}).dialog('open');
And I've tried these:
buttons: [{
text: "Ok",
Click : function () {
$("#TFdialog").dialog("close");
}
}]
and:
buttons: [{
Ok: function() {
$("#TFdialog").dialog("close");
}
}]
and I've tried replacing the "#TFdialog" with 'this' like:
$(this).dialog("close");

try doing
buttons: [
{
text: "Ok",
click: function() {
$( this ).dialog( 'close' );
// your code goes here
}
}
]

Assumption is you use jQuery UI Reference https://jqueryui.com/dialog/#modal-form
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
You can also use the dialog as an object:
var myDialog;
myDialog = $("#TFdialog").html(data).dialog({
resizable: true,
autoOpen: false,// added this
height: 600,
width: 700,
modal:true,
buttons: {
Ok: function() {
myDialog.dialog( "close" );
},
"Close this Soon" : DelayClose,
}
});
myDialog.dialog('open');
function DelayClose(){
setTimeout(function() {
myDialog.dialog( "close" );
}, 500 );
}
Example for why to use an object for yours:
var myDialog;
myDialog = $("#TFdialog").dialog({
resizable: true,
autoOpen: false,// added this
height: 600,
width: 700,
modal:true,
buttons: {
Ok: function() {
myDialog.dialog( "close" );
}
}
});
function showFollowProjectInDialog(followurl){
$.ajax({
url: followurl
}).done(function(data){
$("#TFdialog").html(data);
myDialog.dialog('open');
});
}

Dialog is not draggable because of draggable background?

In my project I've a draggable page and on top of it I've popped a dialog and made it draggable. But somehow the dialog is not dragging. I dont know why it is happening.
dragging symbol is shown but the dialog is not moving why? Can you explain how to make a dialog draggable? Please do Help
This is dialog code:
$dlgLibrary = $('<div style="overflow-y:hidden;color:#FBFBEF"" id="eBLibrary"></div>')
.dialog({
autoOpen: false,
title: 'Browse & Select',
maxWidth:1000,
maxHeight: 600,
width: 800,
height: 600,
dialogClass: "alertDialog",
modal: true,
closeOnEscape: true,
canMaximize:true,
draggable: true,
resizeHt: 0,
resizeWd: 0,
resizeStop: function(event, ui) {
if (resizeHt== 0 && resizeWd== 0) {
resizeHt = $dlgLibrary.dialog( "option", "height" );
resizeWd = $dlgLibrary.dialog( "option", "width" );
};
$('#eBLibrary-Show').width(Number(resizeWd-(resizeWd*16/100)));$('#eBLibrary-Show').height(Number(resizeHt-(resizeHt*35/100)));
resizeHt= 0;
resizeWd= 0;
},
open: function(event, ui) {
}
$.ajax({ url: './Library.html',
success : function(data) {
},
buttons: libButtons,
close: function() {
});

jTable raise formSubmitting with custom jQueryUI Modal

I am not being able to raise the formSubmitting event when I am submitting a custom jQueryUI modal using jTable. Following is the jqeuryui modal code:
$("#editDialog").dialog({
height: 600,
width: 500,
autoOpen: false,
modal: true,
show: {
effect: "fade",
duration: 250
},
hide: {
effect: "fade",
duration: 250
},
buttons: {
Cancel: function () {
$(this).dialog("close");
},
Save: function () {
$(this).find("form").submit();
$(this).dialog('close');
}
},
close: function () {
//allFields.val("").removeClass("ui-state-error");
}
});
Any suggestion on how to achieve this is highly appreciated.

Could not. Ended up showing the custom modal on own bound click event.

jQuery dialog: external file load not working from button

Could someone please tell me what is up with this code? I can't for the life of me see whats stopping it from working. If I set it to autoOpen: true it works, but getting it to open from the button does not seem to work! Many thanks in advance.
Jquery:
$(document).ready(function () {
$("#pextension").load('tour_extension_lb.aspx').dialog({
bgiframe: true,
autoOpen: false,
position: 'center',
width: 440,
height: 300,
modal: true,
});
$('a.extension-link').click(function () { $('#pextension').dialog('open'); return false; });
});
html:
OPEN EXTENSION DIALOG
<div id="pextension" class="dialogBox" style="display:none;"></div>

try by changing your code
function opendialog(){
$("#pextension").dialog({
bgiframe: true,
autoOpen: false,
position: 'center',
width: 440,
height: 300,
modal: true,
open: loaddialogcontent();
});
}
function loaddialogcontent(){
$("#pextension").load('you file to load');
}
$(document).ready(function () {
$('a.extension-link').click(opendialog);
opendialog();
});

Try:
$(document).ready(function () {
$("#pextension").dialog({
bgiframe: true,
autoOpen: false,
position: 'center',
width: 440,
height: 300,
modal: true,
open: function() {
$(this).load('tour_extension_lb.aspx');
}
});
$('a.extension-link').click(function (e) {
e.preventDefault();
$('#pextension').dialog('open');
});
});