I have a button called "Show All", when user click it, it will pop up a window to confirm whether user wants to show all entities. I am using Jquery for this dialog box, I have:
function showAll() {
$("#" + showAllDiv).show();
$("#" + showAllDiv).dialog( {
title: XXX,
height: XXX,
width: XXX,
modal : true,
buttons: {
"Yes": function () {
$(this).dialog("close");
addLoadingFn(); // it will show a "please wait..." dialog
heavyDutyWorkFn(); //a function to get all data and show on the pop up HTML window;
deleteLoadingFn(); // it will close the "please wait..." dialog
},
Cancel: function() {
$(this).dialog("close");
}
}
});
$("#" + showAllDiv).html(You sure to show all?)
}
The problem is, when I click Yes, the dialog does not close immediately. It will still stay for a while until the "heavyDutyWorkFn()" finish its work. In another world, after click "Yes", $(this).dialog("close") will not close, until heavyDutyWorkFn() finish showing all data.
Does anybody know what happened? Any help will be greatly appreciated. Thank you!
You can run heavyDutyWorkFn() asynchronously with setTimeout(), so it doesn't delay the rest of the script.
function showAll() {
$("#" + showAllDiv).dialog( {
title: XXX,
height: XXX,
width: XXX,
modal : true,
buttons: {
"Yes": function () {
$(this).dialog("close");
addLoadingFn(); // it will show a "please wait..." dialog
setTimeout(function() {
heavyDutyWorkFn(); //a function to get all data and show on the pop up HTML window;
deleteLoadingFn(); // it will close the "please wait..." dialog
}, 1);
},
Cancel: function() {
$(this).dialog("close");
}
}
}).html("You sure to show all?")
}
BTW, it's not necessary to call .show(), since .dialog() automatically shows the dialog (unless you use autoOpen: false).
Related
I'm stuck on a old project using Jquery UI to display Modals on view. The issue that I am having is that the dialog modal view is closing when user clicks outside of Model Dialog. In Jquery is there a property to prevent this? I know that backdrop and keyboard property in Bootstrap would help in Boostrap in preventing closing of modal base on outside click but what is the case with Jquery UI?
Here's my Javascript code below:
// EDit Dialog
var updateBanquetTicketDialog = function () {
var s = $('<div></div>').dialog({
title: "Edit Banquet Ticket",
autoOpen: false,
dialogClass: "success-dialog",
modal: true,
buttons: [
{
text: "Update"
, 'class': "btn-primary"
, click: function () {
updateBanquetTicket();
}
},
{
text: "Cancel"
, 'class': "btn-warning"
, click: function () {
editBanTicketDiag.dialog('destroy');
}
}
]
});
return s;
}
I Figured it out. You must go to jquery.dialog.js file
and on line number 117 on show function replace it's code with:
var show = function () {
//call the bootstrap modal to handle the show events (fade effects, body class and backdrop div)
//$msgbox.modal('show');
$msgbox.modal({
show: true,
backdrop: 'static',
keyboard: true
});
};
I am returning nothing to window.onbeforeunload which results in the default pop-up box not displaying.
Like so:
window.onbeforeunload = function() {
return;
}
Brilliant.
Now my issue is, I want to call another function which displays a custom dialog box as such:
window.onbeforeunload = function() {
dialogBox() // function that generates a custom dialog box.
return;
}
I positioned the function above the return. This displays the dialog box momentarily and continues with the refresh. How can I pause the refresh completely when the dialog box is displayed?
Thank you all for your time.
Edit: My Dialog box does not return anything.
Here's the code for that:
function dialogBox(){
$( "#dialog" ).dialog({
modal: true,
width: 500,
buttons: {
"Save": function() {
},
Cancel: function() {
$(this).dialog("close");
},
"Close": function() {
window.location.href = document.referrer;
}
}
})
}
I was looking at this answere jQuery how to close dialog from iframe within dialog?.
I have the same situation i.e. a page that calls a jqueryui dialog in this way:
var message = '<div id="pickDialog"><iframe frameborder="0" src="/Anagrafica/Pick?where=TipoAnagrafica=\'P\'"></iframe></div>'
$(message).dialog({
modal: true,
width: 'auto',
title: 'Seleziona'
});
In the Anagrafica page, when the user press a button I run another jqueryui dialog as follows
var message = '<div>Hai selezionato ' + value + '.</div><div>Confermi?</div>'
$('<div></div>').html(message).dialog({
modal: true,
title: 'Conferma',
buttons: {
"Si": function () {
window.parent.setCodice(value);
$(this).dialog("close");
window.parent.closePick();
},
"No": function () {
$(this).dialog("close");
}
}
});
Function closePick in main page is:
function closePick() {
$('#pickDialog').dialog('close');
return false;
}
This code works... but only first time! When I open the iframe id="pickDialog" the second time, when I press Si button the dialog doesn't close.
The function closePick is executed and I haven't errore in Javascript console.
What could it be?
I've solved this issue placing in the html page this
<div id="pickDialog" style="display:none"></div>
and then the jquery function becomes
function pickDialog() {
var message = "<iframe width="100%" height="100%" frameborder="0" src="/Anagrafica/Pick?where=TipoAnagrafica=\'P\'"></iframe>"
$("#pickDialog").dialog({
modal: true,
width: dWidth,
height: dHeight,
title: 'Seleziona'
}).html(message);
}
The other code is unchanged. I don't know why but this solved the issue.
Update 1: I've done with callback function.
This is my solution. I just add a callback function when open dialog2 and a hidden element to receive what user change in dialog 2. Now everything done. Thanks you!
http://jsfiddle.net/N6qbR/2/
-------Old question----------------
My English is bad so I write easily.
I'm using Jquery Dialog and I want to show multiple dialogs. (dialog1 opens dialog2 opens dialog 3...)
But the problem is when I open dialog1 and then dialog2 (confirm dialog, So that the user can choose Yes/No in dialog2 and return value to dialog1).
I know Javascript is asynchronous, so when user opens dialog1 and click open dialog2, it won't wait for event in dialog2 to finish.
Here is my source code (simple logic)
$("#dialogForm").dialog({
autoOpen: false,
height: height,
width: width,
modal: true,
close: function() // Hàm này được gọi tự động khi đóng dialog
{
//abc();
// Sau khi thêm mới thành công thì reset lại form
resetForm();
$("#dialogForm").dialog( "close" );
},
buttons: {
"Ok": function() {
var choose = showDialogConfirm(250, 200, "Bạn có đồng ý thêm?", test);
if(choose == true)
{
// do some good
}
},
"Cancel": function() {
$("#dialogForm").dialog("close");
}
}
});
$("#dialogForm").dialog("open");
function showDialogConfirm(width, height, message)
{
$("#dialogConfirm").toggle();
$("#dialogConfirm").dialog({
autoOpen: false,
height: height,
width: width,
modal: true,
close: function() // Hàm này được gọi tự động khi đóng dialog
{
$("#dialogConfirm").dialog( "close" );
},
buttons: {
"Yes": function() {
return true;
$("#dialogConfirm").dialog("close");
},
"No": function() {
return false;
$("#dialogConfirm").dialog("close");
}
}
});
$("#dialogConfirmContent").html(message);
$("#dialogConfirm")
.dialog("open");
}
definitely you should write the code in the dialog callback functions. in the dialog1 that you just pop up the dialog2 and cuz it's confirm dialog, so it should be model dialog and you bind the code to the OK button, then you can get the "correct" result. Change the showconfirmdialog by adding a new parameter: callbackfunction.
You may find solution over this in many posts(Post 1 , Post2 ), but their solution not working for me.
Here is the normal jquery dialog box written by me.
$("#dialog").dialog({
autoOpen:false,
buttons:{
"ok":function(){
$(this).dialog("close");
return true;
},
"cancel":function(){
$(this).dialog("close"); return false;
}
}
});
I will open the dialogbox with code:
var returnVal=$("#dialog").dialog("open");
I need to return false,if user clicks 'cancel' and return true if user clicks 'ok'.
var returnVal=$("#dialog").dialog("open");
I NEED returnVal to return boolean value(true/false), but it returns javascript object.
You cannot return something from the OK / cancel functions as they are essentially event handlers that are only processed upon the click of a button.
Use a separate function to process the result :
$mydialog = $("#dialog").dialog({
autoOpen: false,
buttons: {
"ok": function() {
$(this).dialog("close");
processResult(true);
},
"cancel": function() {
$(this).dialog("close");
processResult(false);
}
}
});
$mydialog.dialog("open");
function processResult(result) {
alert(result);
}
Working example : http://jsfiddle.net/nz2dH/
I have implement Yes/No confirmation dialog with custom message and callback function like this. This is useful, if you like to use the same dialog for various purposes.
<script type="text/javascript">
// prepare dialog
$(function () {
$("#confirm-message-dialog").dialog({
autoOpen: false,
modal: true,
closeOnEscape: false,
buttons: {
Yes: function () {
$(this).dialog("close");
$(this).data("callback")(true);
},
No: function () {
$(this).dialog("close");
$(this).data("callback")(false);
}
}
});
});
// open dialog with message and callback function
function confirmMessageDialog (message, callback) {
$('#confirm-message-dialog-message').text(message);
$('#confirm-message-dialog').data("callback", callback).dialog("open");
};
</script>
<!-- The dialog content -->
<div id="confirm-message-dialog" title="Warning">
<p id="confirm-message-dialog-message"></p>
</div>
Hope that this helps others as well :)