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 jokonardi June 22, 2010 - 11:01 pm
thanks friends….this is my problem …your my inspired :)
parent.location.reload(true);
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 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 - 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 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 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 Azki Hakim August 23, 2010 - 5:09 pm
Thx..works fine!
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 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 28, 2010 - 5:54 pm
Thanks mate. Nice and simple.
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 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 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 igiladera February 16, 2011 - 2:21 am
Thanks… You saved my day…
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 dmoliiina July 9, 2011 - 4:35 pm
Thanks a lot guy! I was looking for it!
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 Manish February 20, 2012 - 1:14 am
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);
}
});
});
By Matt February 21, 2012 - 3:32 pm
@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.
By Mubarak March 8, 2012 - 3:14 pm
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
By Ing-Web March 9, 2012 - 7:59 am
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!!!!!!!
By Matt March 9, 2012 - 9:04 am
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.
By Ali April 5, 2012 - 3:22 am
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.
By liexi May 30, 2012 - 4:15 am
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.
By Wayne July 18, 2012 - 2:51 am
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..!
By Mohammed October 21, 2012 - 8:20 am
Thanks ALI!
you saved my day. specially with the beforeClose
cheers!
By Aditya December 4, 2012 - 12:34 pm
Thanks a Ton Ali :)
Great Solution Dude :P
By hema February 27, 2013 - 4:01 am
It is useful
parent.location.reload(true);
for iframe in C#.net