fancybox beforeClose issue - javascript

I have a form implemented in a fancybox (version 2.1.5) iframe. People can choose to not to fill up the form and click on "X" to close fancybox form or alternately fill up the form and click on Register.
I have a beforeClose callback setup to set cookies and do some work. But I want this to be triggered only if someone clicks on "X" or Esc key. See code below
$.fancybox.open({
type: "iframe",
href: "/[url].php",
autoSize: true,
height: "auto",
margin: 0,
padding: 0,
autoCenter: true,
maxWidth: 460,
maxHeight: 615,
modal: false,
iframe: {
scrolling: "no"
},
beforeClose: function () {
//set cookie code
},
});
But if someone was to Register, it will show a Thank you message for 2 seconds and close the fancybox. This is done by using window.parent.$.fancybox.close(); See detailed code below
$.post('/register.php', post_vars, function(data) {
window.parent.$.fancybox.close();
});
However I do not want the beforeClose event to be called in case I close it from the iFrame or even if it gets called, I need to somehow know that it has been done from the iframe & not using the "X" button.
Is there a way to differentiate this?

I can think different ways to do this, like binding custom events to the fancybox close button or catching the escape key with keyup or keypress, etc.
I guess the simplest way is to create in the parent page, a custom close function like :
var closedFromIframe = false;
function customClose() {
closedFromIframe = true;
jQuery.fancybox.close();
}
This function will close fancybox (from the parent page itself) when invoked from the iframed page AND will enable the (previously defined) closedFromIframe flag, so instead of this :
$.post('/register.php', post_vars, function(data) {
window.parent.$.fancybox.close();
});
... you could do
$.post('/register.php', post_vars, function(data) {
window.parent.customClose();
});
Then, in your fancybox script you could validate within the beforeClose callback, the status of the closedFromIframe flag and do whatever you need to :
$.fancybox.open({
// your API options
beforeClose : function () {
if (closedFromIframe) {
// closed from iframe custom function
} else {
// close button -or- escape key
}
},
afterClose : function () {
closedFromIframe = false; // reset flag
}
});
Notice we are also resetting the closedFromIframe flag within the afterClose callback.
See a DEMO of this implementation.

This will be triggered only if someone clicks on "X" or Esc key
$(document).ready(function () {
$(".fancybox").fancybox({
closeClick: false, // prevents closing when clicking INSIDE fancybox
openEffect: 'none',
closeEffect: 'none',
enableEscapeButton: false,
helpers: {
overlay: {
closeClick: false // prevents closing when clicking OUTSIDE fancybox
}
},
beforeClose: function () {
return confirm('Are you sure?')
}
})
});

Related

How do you prevent Modal dialog from closing when users clicks outside of the modal dialog box In JQuery UI?

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

How to bind the close event for this script jquery

Hi i need to reload the parent page when close button clicked on modal dialog.
my code is:
//customer edit start
$( ".modal-customeredit" ).click(function() {
var myGroupId = $(this).attr('data-id'); // data-id
$.post("sample.php",
{
name:myGroupId,
},
function(data,status){
});
$( "#modal-customeredit" ).dialog({
modal: true,
minWidth: 700,
minHeight: 200,
dialogClass: "modal-dialog",
show: "fadeIn"
});
$('.ui-widget-overlay').addClass('bg-black opacity-60');
});
I tried for close button as/
$( ".ui-dialog-titlebar-close" ).click(function() {
window.location.reload(true);
});
on below also tried inside.Nothing works.Can anybody help me.Thanks.
You can use native create event of dialogue to bind close button click. Like this:
$( "#modal-customeredit" ).dialog({
modal: true,
minWidth: 700,
minHeight: 200,
dialogClass: "modal-dialog",
show: "fadeIn",
create: function() {
$(this).closest('div.ui-dialog')
.find('a.ui-dialog-titlebar-close')
.click(function(e) {
window.location.reload(true);
e.preventDefault();
});}
});
Working Demo
Try to use window property , to get access to main page from iframe
top Returns the topmost browser window
can you give link to your page or example at jsbin?
Elements that are added to the DOM at runtime requires event delegation as your popup is generated using model (jQuery UI)
You can execute a click event of close button by doing this:
$(document.body).on('click','.ui-dialog-titlebar-close',function(e) {
e.preventDefault(); // To prevent default dialog close action
window.location.reload(true);
});
See the API documentation for .on()
May be this will fix. But i think close() of model popup is already defined in UI. You may prevent the default action.

how to retrieve href value for an onclick event based on "class" selector in Javascript?

I have
Click to proceed
and following javascript. When I click on above link it displays the dialog box with 2 buttons. "return false;" stops the default event of link tag. But I need the functionality in which when I click "Yes, delete" to take me to other page by choosing href value of a onclicked anchor. I tried alert($(this).attr('id')); (as I thought I could pick up HREF value using "this.attr('href')") but it displays "dialog".
How do I make it work so that when I click on a link having class name "confirm_delete" it displays me dialog, and if I click cancel it stays on the page otherwise takes me to page according to href value.
$(".confirm_delete").click(function(){
$('<div id="dialog">Are you sure you want to delete?</div>').appendTo('body');
$("#dialog").dialog({
bgiframe: true, resizable: false, height:140, modal: true,
overlay: {
backgroundColor: '#000', opacity: 0.5
},
buttons: {
'Yes, Delete all items in recycle bin': function() {
$(this).dialog('close');
$(this).remove();
alert($(this).attr('id'));
},
Cancel: function() {
$(this).dialog('close');
$(this).remove();
}
}
});
return false;
});
Thank you.
First off: try not to use underscores in class names. I've read somewhere they may cause problemsn...
Well, here:
$('a.confirm-delete').click( function(event) {
if( !confirm('are you sure you want to go?') ) return false;
});
here I've usedd the javascript confirm dialog. You can easily replace that with a jquery modal dialog.
jrh
OK, I can retrieve value of HREF
by var url = $(this).attr('href'); just after the $(".confirm_delete").click(function(){
line. It gives me "test.php?id=123" Only thing left is create/retrieve full url and redirecting to that url.
Thanks
This should do the trick:
$(".confirm_delete").click(function(){
var $delete = $(this);
...
$("#dialog").dialog({
...
buttons: {
'Yes, Delete all items in recycle bin': function() {
$(this).dialog('close');
$(this).remove();
alert($delete.attr('id'));
}
}
});
return false;
});

ui Dialog works once in IE

I hope someone can help with this problem. I am using ui Dialog that pops up on clicking a link with the same class. The problem is that the link work great once but if i click it again or another link with the same class then only the overlay loads but not the content box in IE only. It works great in firefox.
My script includes an ajax post, if i remove the ajax code then the box works fine on every click.
My code:
$().ready(function() {
$('#dialog').dialog({
autoOpen:false,
title: $(this).attr("title"),
modal: true, width: 450, height:"auto", resizable: false,
close: function(ev, ui) { $(this).remove(); },
overlay: {
opacity: 0.5,
background: "black"
}
});
$(".mybutton").click(function(){
$.post($(this).attr("href"), { },
function(data) {
$('#dialog').html(data);
}
);
$('#dialog').dialog('open');
return false;
});
});
I have multiple links with the class "mybutton" and a div with the id #dialog . I am also using the latest version of jQuery and ui.
Any help would be greatly appreciated. Thanks
I am using IE8, jQuery 1.3.2, jQuery UI 1.7.1
The post is done asynchronously by default. It looks like you expect it to be synchronous. Try moving the open of the dialog into the callback after the data is set rather than in the click function -- which may execute before the callback returns.
move the open into the callback...
$('#dialog').html(data).dialog('open');
I was having the same problem. I resolved it by managing the state of the Dialog myself...creating a new one and disposing of it each time.
function makeDialog()
{
var html = '';
html += '<div>My dialog Html...</div>';
return $(html).dialog(
{
position: 'center',
modal: true,
width: 518,
height: 630,
autoOpen: false,
close: function() { $j(this.remove(); }
});
}

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

Categories

Resources