Develop Reference

How to display a dialog box once returning null to onbeforeunload?

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;
}
}
})
}

How to include jquery ui widgets inside a 2nd stacked modal dialog?

I currently have a form inside a modal dialog, which has a link to add/edit options in one of the select drop downs. This link opens a new modal dialog on top of the old one as I want. However, I can't seem to get any jquery ui widgets to work inside this second modal dialog (specifically the accordian and datepicker widgets). I have followed How to execute jquery inside a Modal window? and have both the accordian and datepicker widgets working in the 1st modal dialog.
Code I've been trying for 2nd modal dialog (not working):
$(document).on("click", ".view_dialog_2", function(event) {
$dialog_2.load($(this).attr('href'), function()
{
$('#accordian').addClass('accordian2');
$('#meeting_date').addClass('date2');
$('#follow_up_date').addClass('date2');
$(function() {
$( ".accordian2" ).accordion();
collapsible: true;
});
$(function() {
$( ".date2" ).datepicker();
});
$dialog_2.dialog('open');
});
return false;
});
Code that is currently working for 1st modal dialog:
$(".view_dialog").click(function(){
$dialog.load($(this).attr('href'), function()
{
$(function() {
$("#addPartNum, .order-button")
.button();
});
$(function() {
$( "#meeting_date" ).datepicker();
});
$(function() {
$( "#follow_up_date" ).datepicker();
});
$dialog.dialog('open');
});
return false;
});
I have tried removing the $(document).on event binding for the 2nd dialog but it just takes me to the linked page w/o any modal dialog. I tried adding the classes because I thought maybe there was a conflict since the datepickers are present in the 1st dialog as well.
This is my first project using jquery, and I've been getting it for the most part, but this one has me stumped. Any help would be greatly appreciated :)
EDIT: here is the dialog code for 2nd not working dialog (not sure if necessary or not)
var $dialog_2 = $("#view_dialog_2").dialog(
{
autoOpen: false,
height: 800,
width: 800,
resizable: true,
modal: true,
buttons: {
"Submit": function() {
// do stuff
$dialog_2.dialog("close");
},
"Cancel": function() {
$dialog_2.dialog("close");
}
}
});
EDIT #2: here is a jsfiddle to kind of demonstrate my problem a bit more: https://jsfiddle.net/8pfjz3k5/

Might be more than one way to do this, but here is a simple example you can start from: https://jsfiddle.net/7xo1Lcy1/
HTML
<div id="start-box" title="First Form">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Form</p>
<a id="add" href="#">Add/Edit</a>
<div id="add-box">
<label>Next</label>
<input type="text" />
</div>
<script>
$("#add-box").dialog({
autoOpen: false,
resizable: true,
modal: true,
buttons: {
"Submit": function() {
// do stuff
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
</script>
</div>
<a id="start" href="#dialog-conf">Start Here</a>
JQuery
$(function() {
$("#start-box").dialog({
autoOpen: false,
resizable: false,
height: 340,
modal: true,
buttons: {
"Save": function() {
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
}
});
$("#start").button();
$("#start").click(function() {
$("#start-box").dialog("open");
});
$("#start-box").on("click", "#add", function(e) {
console.log("Launching Add Box.");
$("#add-box").dialog("open");
});
});
So you can see I moved away from $(document) for the .on(). This should look for a Click event just when the dialog is open. It then opens the next dialog (the first still in the background).
I hope that helps.
EDIT
You didn't init the .accordion(). See update to your fiddle: https://jsfiddle.net/Twisty/8pfjz3k5/2/
$("#accordian").accordion();
Make sure your selector is correct and you call the right methods.

IE7, JQuery UI Dialog

I'm using JQuery UI Dialog. In this form, I validate something.I call this function;
MessageBox('this is message', 'Error', OpenDialog());
In Chrome, Firefox,IE8,IE9; It works correctly but in IE7, only dialog's header shows like this. When I click 'Okey' button, It only shows header
How to solve this?
MessageBox function
function MessageBox(text, title,Func) {
var dv = document.createElement('div');
$(function () {
dv.id = 'Dialog';
dv.innerHTML = '<table style="font-family:Calibri;"><tr><td>' + text + '</td></tr></table>';
document.forms[0].appendChild(dv);
var dlg = $('#Dialog').dialog({
autoOpen: false,
width: 400,
title: title,
modal: true,
resizable: false,
buttons: [
{
text: "Okey",
width: 80,
click: function () {
DialogClose_('Dialog');
}
}],
open: function () {
$('.ui-dialog-buttonpane').find('button:contains("Okey")').addClass('ButtonDefault');
},
close: Func,
beforeClose: function () {
var dv2 = document.getElementById("Dialog");
dv2.parentNode.removeChild(dv2);
}
});
dlg.parent().appendTo(jQuery('form:first'));
$('#Dialog').dialog("option", "minWidth", 400);
$('#Dialog').dialog('option', 'position', 'center');
$('#Dialog').dialog('open');
});
return;
}
OpenDialog function like this;
function OpenDialog() {
$(document).ready(function () {
$("#dialog").dialog("open");
});
}

Having a look around there seems to be quite a few issues with the height on dialog boxes in IE7.
You could try specifying a height, but that would take away the nice auto-height feature you get.
Alternatively you could just set the height of the browser just after where you set the "dlg" variable is IE7:
if ($.browser.msie && parseInt($.browser.version, 10) == 7) {
$('#Dialog').dialog("option", "height", 100);
}
You can replace the "100" with what you think. If you have a container element in your dialog box you can always use that to set the height, eg:
$("#container").height();
There is also more suggestions on StackOverflow.
Hope that helps.

Dynamically choosing the close effect on a jquery-ui-dialog

I'm using this dialog:
$("#myDialog").dialog({
hide: {effect: "fade", duration: 3000},
buttons: {
Save: function() {
$.post(someurl, function() {
$("#myDialog").dialog( "close" );
});
},
Cancel: function() {
$("#myDialog").dialog( "close" );
}
}
});
I have two close actions that are different semantically:
Close after success - in this case I want to slowly fade out the dialog (I'm also displaying a green Vee icon, not shown in the above code snippet).
Close after cancel - I would like to immediately make the dialog disappear, the fade effect doesn't fit here IMO.
The above code just uses .dialog("close") in both cases, so of course both cases get the same fade out effect.
What's the best way to achieve instant close on the second case, while retaining the slow fadeout in the first?
Edit: I also want clicking ESCAPE to have the exact same effect as the Cancel button - instant fade out.

The simplest way to do it is:
$("#myDialog").dialog({
hide: null,
buttons: {
Save: function() {
$("#myDialog").dialog("option", "hide", "fade").dialog("close");
},
Cancel: function() {
$("#myDialog").dialog("close");
}
},
close: function(e) {
$("#myDialog").dialog("option", "hide", null);
}
});

Just set the hide option in both case:
$("#myDialog").dialog({
buttons: {
Save: function() {
$("#myDialog").dialog("option", "hide", "fade").dialog("close");
},
Cancel: function() {
$("#myDialog").dialog("option", "hide", null).dialog("close");
}
},
beforeClose: function(event, ui) {
if (event.which === 27) {
$("#dialog").dialog("option", "hide", false);
}
}
});
DEMO

For your "Close after success" case you could just issue
$('.ui-dialog').fadeOut(5000);
This is how I used the above:
$('input').keypress(function () {
if ($(this).val() === "") { //works on 1st char you type
$('.ui-dialog').fadeOut(5000);
}
});
Also, instead of just open, you'd need:
myDlg.dialog('close').dialog('open');

jquery-ui-dialog - How to hook into dialog close event

I am using the jquery-ui-dialog plugin
I am looking for way to refresh the page when in some circumstances when the dialog is closed.
Is there a way to capture a close event from the dialog?
I know I can run code when the close button is clicked but that doesn't cover the user closing with escape or the x in the top right corner.

I have found it!
You can catch the close event using the following code:
$('div#popup_content').on('dialogclose', function(event) {
alert('closed');
});
Obviously I can replace the alert with whatever I need to do.
Edit: As of Jquery 1.7, the bind() has become on()

I believe you can also do it while creating the dialog (copied from a project I did):
dialog = $('#dialog').dialog({
modal: true,
autoOpen: false,
width: 700,
height: 500,
minWidth: 700,
minHeight: 500,
position: ["center", 200],
close: CloseFunction,
overlay: {
opacity: 0.5,
background: "black"
}
});
Note close: CloseFunction

$("#dialog").dialog({
autoOpen: false,
resizable: false,
width: 400,
height: 140,
modal: true,
buttons: {
"SUBMIT": function() {
$("form").submit();
},
"CANCEL": function() {
$(this).dialog("close");
}
},
close: function() {
alert('close');
}
});

$( "#dialogueForm" ).dialog({
autoOpen: false,
height: "auto",
width: "auto",
modal: true,
my: "center",
at: "center",
of: window,
close : function(){
// functionality goes here
}
});
"close" property of dialog gives the close event for the same.

U can also try this
$("#dialog").dialog({
autoOpen: false,
resizable: true,
height: 400,
width: 150,
position: 'center',
title: 'Term Sheet',
beforeClose: function(event, ui) {
console.log('Event Fire');
},
modal: true,
buttons: {
"Submit": function () {
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});

This is what worked for me...
$('#dialog').live("dialogclose", function(){
//code to run on dialog close
});

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.
Because no one actually created an answer with using .on() instead of bind() i decided to create one.
$('div#dialog').on('dialogclose', function(event) {
//custom logic fired after dialog is closed.
});

add option 'close' like under sample and do what you want inline function
close: function(e){
//do something
}

If I'm understanding the type of window you're talking about, wouldn't $(window).unload() (for the dialog window) give you the hook you need?
(And if I misunderstood, and you're talking about a dialog box made via CSS rather than a pop-up browser window, then all the ways of closing that window are elements you could register click handers for.)
Edit: Ah, I see now you're talking about jquery-ui dialogs, which are made via CSS. You can hook the X which closes the window by registering a click handler for the element with the class ui-dialog-titlebar-close.
More useful, perhaps, is you tell you how to figure that out quickly. While displaying the dialog, just pop open FireBug and Inspect the elements that can close the window. You'll instantly see how they are defined and that gives you what you need to register the click handlers.
So to directly answer your question, I believe the answer is really "no" -- there's isn't a close event you can hook, but "yes" -- you can hook all the ways to close the dialog box fairly easily and get what you want.

You may try the following code for capturing the closing event for any item : page, dialog etc.
$("#dialog").live('pagehide', function(event, ui) {
$(this).hide();
});