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); } });
By ashish October 4, 2011 - 5:13 am
@dave
you forgot to add a comma after your ‘iframe’.. :)
@author
thnx for the solution saved me a lotta time
By dmoliiina July 9, 2011 - 4:35 pm
Thanks a lot guy! I was looking for it!
By Niltrog April 27, 2011 - 6:38 am
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.
By igiladera February 16, 2011 - 2:21 am
Thanks… You saved my day…
By lilsizzo February 9, 2011 - 9:31 pm
i am having issue of using parent.location.reload(true); in google chrome. another work around this would help alot…thanks
By Toon January 29, 2011 - 7:02 pm
Update: Problem solved, i made an error, the code was working fine!
Thanks a $*!& load for this topic, exactly that i needed!
By Toon January 29, 2011 - 6:44 pm
Dis someone solve Dave’s problem? I have the same problem! (the page wil not reload with an iframe)
By Jared October 28, 2010 - 5:54 pm
Thanks mate. Nice and simple.
By Matt October 18, 2010 - 7:49 am
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.
By jared October 18, 2010 - 3:43 am
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!
By Azki Hakim August 23, 2010 - 5:09 pm
Thx..works fine!
By Steven_F August 11, 2010 - 4:50 am
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
By Matt July 17, 2010 - 8:26 am
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’.
By dave July 16, 2010 - 11:00 pm
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?
By dave July 16, 2010 - 7:18 pm
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!
By dave July 16, 2010 - 7:04 pm
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); ;}
});
});
By jokonardi June 22, 2010 - 11:01 pm
thanks friends….this is my problem …your my inspired :)
parent.location.reload(true);