jQuery: Thickbox Hack to refresh parent window on tb_close() event
I was looking for a way to refresh the parent window on the remove event [tb_remove()] of thickbox jQuery plugin, developed by Cody Lindley, with/without modal and/or iframe popup windows. And here is what I did, hope this helps you guys too…
Step 1
Get the unpacked/unminified version of ThickBox.js. Open it up in your favorite text editor and find this function in the file.
function tb_remove() {
$("#TB_imageOff").unbind("click");
$("#TB_closeWindowButton").unbind("click");
$("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,
#TB_HideSelect').trigger("unload").unbind().remove();});
$("#TB_load").remove();
if (typeof document.body.style.maxHeight == "undefined") {//if IE 6
$("body","html").css({height: "auto", width: "auto"});
$("html").css("overflow","");
}
document.onkeydown = "";
document.onkeyup = "";
return false;
}
Now depending on how you want the close links or thickbox’s remove/close function to behave, in all of your pop-ups, you can modify the function to take up a true/false parameter, which when set to true would refresh the parent window, and false wouldn’t. This would give you some control over which thickbox pop-ups would refresh the parent window – this is what I have done.
Step 2-A: Modifying the function to accept parameters to refresh the parent.
We just edit the function to accept a parameter, and check if the passed variable is true or false. If true, refresh the parent window, if false, don’t, just close the window.
function tb_remove(closeparentwindow) {
if(closeparentwindow){
parent.location.reload(1);
}
$("#TB_imageOff").unbind("click");
$("#TB_closeWindowButton").unbind("click");
$("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,
#TB_HideSelect').trigger("unload").unbind().remove();});
$("#TB_load").remove();
if (typeof document.body.style.maxHeight == "undefined") {//if IE 6
$("body","html").css({height: "auto", width: "auto"});
$("html").css("overflow","");
}
document.onkeydown = "";
document.onkeyup = "";
return false;
}
That’s all there is to it 
Now when you call the function tb_remove(), just pass the boolean value to the function and voila your parent window would refresh.
Calling the tb_remove() function to close thickbox’s parent window.
<a href=”#” onclick=”window.parent.tb_remove(true);”>Close</a>
Step 2-B: Modifying the function to refresh parent, everytime any thickbox window is closed.
function tb_remove() {
parent.location.reload(1);
//just add this line without the if and without modifying
the function to accept parameters
$("#TB_imageOff").unbind("click");
$("#TB_closeWindowButton").unbind("click");
$("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,
#TB_HideSelect').trigger("unload").unbind().remove();});
$("#TB_load").remove();
if (typeof document.body.style.maxHeight == "undefined") {//if IE 6
$("body","html").css({height: "auto", width: "auto"});
$("html").css("overflow","");
}
document.onkeydown = "";
document.onkeyup = "";
return false;
}
Note: Step 2B The above will refresh the parent window every time any kind of thickbox popup is closed, iframe,modal, etc. and is only advised if you know what your are doing.
Step 3: Save and you are done.
Some info + resources
Thickbox.js is not maintained anymore, albeit you can still use it and it works wondersand is pretty simple. Here are some replacements, you might want to consider.Tags: jQuery, refresh parent, thickbox, thickbox hack
I am from Turkey. I not know english. But The paradise of God you.
for Turkish
Teşekkür ederim Dostum Allah seni cennetine alsın bu refresh işi çok işime yaradı.
Very thanks
I have used the thickbox with a form in it and have got everything working. The only problem is the new onlclick=”window.parent.tb_remove(true);” completely bypasses the for validation and just refreshes. is there a way to have the thingo check to see if validation is true then refresh if not let the error message appear.
Not up on the javascript lingo so please be gentle with me.
Ta, Rebecca
Hey Rebecca,
Try validating the form first and capturing the boolean value in a var, only when the var is true then go ahead and window.parent.tb_remove(true); you can also mail me the code I can help with it
for e.g.
if(var)
{
//validation failed show error messages
}
else
{
//use jquery “live” binding or equivalent to bind/add
window.parent.tb_remove(true);
}
hope this makes sense?
for those who are using lightwindow.js – you may have been loosing all over for the modification required to make the parent window refresh on close.
if ($(’lightwindow_title_bar_close_link’)) { Event.observe(’lightwindow_title_bar_close_link’, ‘click’, this.deactivate.bindAsEventListener(this)); $(’lightwindow_title_bar_close_link’).onclick =
function()
{ parent.location.reload(1);
return false;
};
}
nice.. thanks for the script.. its really save my time (^_^)
This works like charm!!!
Thanks for sharing…
Thanks mate, that worked like a charm!!
In my case, I need to refresh by default, without modifying every instance calling the original function, but regarding the opposite as well via parameter. So I’ve implemented:
function tb_remove(refreshparentwindow) {
if(refreshparentwindow==null) refreshparentwindow=true;
//this works in the case of missing parameter
if(refreshparentwindow) parent.location.reload(1);
….
you have exsample ?
hi, your page is so nice and helpful.
can you tell me how i can Redirect to specific page rather than the Refresh parent window.
hey, if need to exec an ajax function to relaod only one div.
And if i exec that function insted of the “reload” works fine, but when i click again to open something else, it opens in a new window. Any idea why?
Thanks! Just what I was looking for. This should be part of thickbox.
Leave a reply :)
Subscribe
Links
Eventify – Simple Events
NextGEN Resize Wordpress Plugin
Categories
- Action Script 3
- Barter
- Cappuccino
- CodeIgniter
- Design
- Development
- Eventify
- Flex
- Forms
- Guest Posts
- Insights
- Inspiration
- JavaScript
- jQuery
- NextGEN
- Photography
- PHP
- Resource
- Sales Barry
- Seasons
- sketchbook
- Tutorial
- Uploadify
- Wordpress Plugin
Recent Posts
- Christmas Ornament Stock Giveaway
- jQuery Validate: How-to Show Alert Box(s) with Regular Validation & Input Focus.
- Eventify™ 1.8.a Released
- Why Desktops Are the Way to Go
- About cloud hosting – By Jonas Bates
Every website I design/develop, I follow some essential steps to make your time and investment count. From free consultation to free post-production support. 
Loading ...
grazie