Fancybox: Reload Parent Page When Closed

This caused me a bit of a headache. I knew you had to use the onClosed option in your Fancybox call, but wasn’t sure how to use it. For example, if you have a page full of images, and use Fancybox to add/edit those images, then you want that parent page to refresh when you close the Fancybox to show any changes you made.

In this example, I attach a Fancybox to any link with the class “editImage.” When it’s closed, the parent will refresh:

$("a.editImage").fancybox({
  'width': 800,
  'height': 450,
  'onClosed': function() {
    parent.location.reload(true);
  }
});

If you’re not sure what this means or how to use Fancybox, you should hop over here.

Update August 10, 2011:

Note that if you have something like this in your file:

$(".iframe").fancybox({
  'width': 800,
  'height': 400   
});

That it should go before anything else, otherwise if your fancy box link has both of these classes, the iframe class will cancel out anything you declare before it. So in this example, if my link was like <a class=”iframe editImage” href=”whatever”> then in my javascript, I’d want to declare the iframe before the editImage, like so:

$(".iframe").fancybox({
  'width': 800,
  'height': 400   
});

$("a.editImage").fancybox({
  'width': 800,
  'height': 450,
  'onClosed': function() {
    parent.location.reload(true);
  }
});

28 thoughts on “Fancybox: Reload Parent Page When Closed

  1. Ok. I had some trouble getting this to work. I sed this code below. Can anyone tell me what I am doing wrong. This code stops the pop up from firing.

    $(document).ready(function() {

    $(“a.iframeFancybox1″).fancybox({
    ‘width’ : 500,
    ‘height’ : 560,
    ‘overlayOpacity’ : ’0.7′,
    ‘overlayColor’ : ‘#000′,
    ‘hideOnContentClick’ : false,
    ‘autoScale’ : false,
    ‘transitionIn’ : ‘elastic’,
    ‘transitionOut’ : ‘elastic’,
    ‘type’ : ‘iframe’
    ‘onClosed’: function() {parent.location.reload(true); ;}
    });
    });

  2. OK. So, I can get it to work with this:

    $(document).ready(function() {

    $(“a.iframeFancybox1″).fancybox({
    ‘width’: 800,
    ‘height’: 450,
    ‘onClosed’: function() {
    parent.location.reload(true); ;
    }
    });

    });

    —————

    But not with this:

    $(document).ready(function() {

    $(“a.iframeFancybox1″).fancybox({
    ‘width’: 800,
    ‘height’: 450,
    ‘type’ : ‘iframe’
    ‘onClosed’: function() {
    parent.location.reload(true); ;
    }
    });

    });

    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 page to refresh when the box closes?
    Thanks!

  3. ok. So I was missing a comma after ‘iframe’.

    I’ve fixed that now, but I still can’t get this to reload the page on close. Ideas?

  4. Hey Dave – could you post a test page somewhere to look at? The only immediate thing I see is that you might need a comma after ‘iframe’.

  5. Just wanted to say thanks for posting this, I’ve been trying to find a solution for refreshing the parent page for ages. Found a few for other Lightbox alternatives but could never get them to work with Fancybox – thanks again, really appreciated!

    S

  6. Hey mate, thanks for the code. Wondering if you are aware of a way to submit a form from within a fancybox, which will close the iframe and post the input variables to the parent? For example, I have a search form in a iframe, and would like to post the search string back to the parent for searching. Cheers!

  7. Hi Jared – I might try using fancybox to display inline content (a hidden div on the same page), instead of an iframe. That way you’re not juggling windows.

  8. Update: Problem solved, i made an error, the code was working fine!

    Thanks a $*!& load for this topic, exactly that i needed!

  9. i am having issue of using parent.location.reload(true); in google chrome. another work around this would help alot…thanks

  10. Thanks for your code, so useful!

    I’m trying to delay the reload, let’s say 2sec after closing it and then refresh the same page. Could anybody enlighten me please? Thanks.

  11. @dave
    you forgot to add a comma after your ‘iframe’.. :)

    @author
    thnx for the solution saved me a lotta time

  12. I am try to refresh page when fancybox close, but below code is not working, please help.

    $(document).ready(function() {
    $(‘a.fb_dynamic’).each(function(){
    var dWidth = parseInt($(this).attr(‘href’).match(/width=[0-9]+/i)[0].replace(‘width=’,”));
    var dHeight = parseInt($(this).attr(‘href’).match(/height=[0-9]+/i)[0].replace(‘height=’,”));
    $(this).fancybox({
    ‘width’:dWidth,
    ‘height’:dHeight,
    ‘autoScale’ : false,
    ‘transitionIn’ : ‘none’,
    ‘transitionOut’ : ‘none’,
    ‘type’ : ‘iframe’,
    ‘onClosed’ : function() {
    parent.location.reload(true);
    }

    });
    });

  13. @manish – you’re missing a }); at the end of your code block there. If it’s still not working, I’d remove your width and height stuff just to see if that’s causing the issue – is the javascript console reporting any errors? If you need more help, please provide a link to the page you’re working on.

  14. hello
    I got parent.location.reload(true);
    working for me as well, however there is another pop up window that comes, the window title is “Windows Internet Explorer” with a message that says “To display the webpage again, the web browser needs to resend the information you’ve previously submitted. If you were making a purchase, you should click cancel to avoid duplicate transaction. Otherwise, click retry to display the webpage again.”

    as you see, that is not very desirable whenever the page get refreshed, how do I get rid of that message?

    Thanks

  15. I wanted to refresh a page in which i put a fancybox, I went to google and i ve found your site. my needs was satisfied. I thank you very much. Keep it going guys!!!!!!!

  16. If anybody would like help with a problem, please post a link to your page so people can diagnose *in the browser* – the best way to troubleshoot javascript.

  17. I was working with same thing and onClosed was not working. After lots of research I figured out that there is some kind of versioning problem and onClosed works in older versions of fancy box. The other approach, which worked for me, is as following using beforeClose instead of onClosed.

    ‘beforeClose’: function() { alert(‘test’) },

    This might be helpful for some of the readers.

  18. thx ALI that helps me to resolve problem with this window in IE “To display the webpage again, the web browser needs to resend the information you’ve previously submitted…” after closing fancybox window.

  19. Hi ALI, thanks a lot for your guide.. as it helped me to solve my problem..
    where “onClosed” is not working, but “beforeClose” is work..!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>