Alex Rivera | Logout

Fancy Box - how to refresh parent page when close iframe popup?

Asked 2010-07-17T01:49:41.473
13

I want my parent page to refresh when I close a Fancy Box popup frame. I have a login page inside the popup, so I need the parent page to refresh to show the new login state when the Fancy Box closes.


I can get it to work without the iFrame code:

<script type="text/javascript">
 $(document).ready(function() {
  $("a.iframeFancybox1").fancybox({
   'width': 800,
   'height': 450,   
   'onClosed': function() {   
     parent.location.reload(true); 
    ;}
   });
 });
</script>

But I can't get it to work with the iFrame code:

<script type="text/javascript">
 $(document).ready(function() {
  $('a.iframeFancybox1').fancybox({
   'width': 800,
   'height': 450,
   'type' : 'iframe'
   'onClosed': function() {
     parent.location.reload(true); 
    ;}
   });
 });
</script>

The problem is to do with this line:


'type' : 'iframe'


As soon as I add that line, the popup stops working.


Can anyone suggest a solution as to how I can get an iframe to popup in Fancy Box, and still get the parent page to refresh when the box closes?
 Thanks!

Edit
Report

1 Answer

29
$(".fancybox").fancybox({
    type: 'iframe',
    afterClose: function () { // USE THIS IT IS YOUR ANSWER THE KEY WORD IS "afterClose"
        parent.location.reload(true);
    }
});

Alternatively:

Go to your jquery.fancybox.js file and go line 1380 it is look like this and add parent.location.reload(true);

afterClose: function (opts) {
    if (this.overlay) {
        this.overlay.fadeOut(opts.speedOut || 0, function () {
            $(this).remove();
            parent.location.reload(true);
        });
    }
    this.overlay = null;
}
answered 2012-07-17T21:44:25.673

Your Answer