0

I am using fancybox to show an iFrame containing a form. When the form is submitted I close fancybox like so:

parent.jQuery.fancybox.close();

I then do some AJAX stuff on the afterClose event.

The problem I'm having is that if someone closes fancybox by clicking the close button or clicking the dimmer outside the fancybox then it still calls the AJAX function in the afterClose function.

How do I detect how fancybox has been closed and only run the afterClose function if fancybox has been closed like this:

parent.jQuery.fancybox.close();

I still need to give my users the option to close the fancybox so I cannot disable the close button.

UPDATE

Looking at the fancybox object I can see the afterClose function has a number of values:

enter image description here

Is it possible to update the caller value to something I can check once the afterClose function has fired? How would I do this?

user3065931
  • 531
  • 7
  • 20

2 Answers2

0

Try using custom events. When form is submitted trigger your custom event, lets call it 'fancybox:aftercloseajax', and listen for that event and than do your AJAX stuff.

EDIT: Don't know how your code looks, but possible solution:

$('form').on('submit', function(){
  parent.jQuery.fancybox.close();
  $('#targetDIV').trigger('fancybox:aftercloseajax');
});

$('#targetDIV').on('fancybox:aftercloseajax', function(){
  //event handler
  //do your ajax stuff as before
});

Basically instead of listening on afterClose event, listen for your custom event you trigger when you call fancybox.close()

Borna
  • 126
  • 1
  • 7
  • sounds like this could be possible - can you give an example? – user3065931 Sep 17 '15 at 09:31
  • Thanks @Borna, have given this a try and can't get it to work. Isn't there a scope issue here? So we close fancybox, but then call a function from within the script I'm running in the fancybox (which I've just closed) to trigger another function in the parent page. – user3065931 Sep 17 '15 at 09:51
  • Did not know you are running on form submit handler inside the fancybox. Why don't you place it in global scope of your app? Or did not I understand you well. – Borna Sep 17 '15 at 09:59
0

Why not check in your afterclose event if the form is submitted? you can just put a flag on your submit button thru your javascript like

var flag = 0;
$(".custom-class-of-your-submit-button").bind("click", function () {
    flag = 1;
});

In your afterclose event just put an if statement:

if (flag == 1) {
    \\ execute your AJAX code
}

hope it helps.

EDIT

You could try the on message to send a flag I think but I haven't tried it yet: How to communicate between iframe and the parent site?

Community
  • 1
  • 1
Cedric
  • 1,236
  • 2
  • 18
  • 35
  • I don't see how this could work. Isn't the submit button (in an iFrame) outside of the scope of the `afterClose` event which is called on the parent page? - I always get a `flag is not defined` error. – user3065931 Sep 17 '15 at 09:36
  • maybe you could try this one? http://stackoverflow.com/questions/9153445/how-to-communicate-between-iframe-and-the-parent-site – Cedric Sep 21 '15 at 03:19