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 the tb_remove function in the file.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

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 argument passed is true or false. If true, refresh the parent window. If false, don’t, just close the window.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

function tb_remove(refreshParentWindow) { 

    refreshParentWindow = typeof refreshParentWindow !== undefined ? refreshParentWindow : false; //defaults to false
    if(refreshParentWindow){
            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;
}

From Line 1 to Line 6 in the above code is edited and 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 is as follows:

 <a href="#" onclick="window.parent.tb_remove(true);">Close</a>;

Step 2-B: Modifying the function to refresh the parent window everytime any thickbox window is closed.

In the case when you want the parent window to refresh everytime you close the thickbox, just add one line to the tb_remove function as shown below:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

function tb_remove() {
    parent.location.reload(1); 
    //just add the line without the if and without modifying
    //the function to accept a parameter as shown in 2-A
    $("#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: IN Step 2B i.e. The above code will refresh the parent window every time any kind of thickbox popup is closed like, iframes, modals, etc. and is only advised if you know what your are doing.

You can also download the modified thickbox.js from my github here. This file is modified with the modifications made in Step 2-A only.