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.

    Like it? Share it.