thickbox help to call method from parent html on close

Question

I use thickbox to load an html. This html has a form that i need to add some stuff to the database. I have a select box in the main html (the one that i load thickbox from). What i want to do is when i press the close button in thickbox, the select box has to be updated with the stuff i just added in the database. I was thinking to modify the thickbox close method and to call my method that updates the select box but thickbox crashes when i do that. Any hint would be greatly appreciated.

Answer 1

If you inspect the thickbox in action using Firebug, you can see that the thickbox modal is actually a div inside the main page. You can just call any function in the main page from the thickbox.

For example, this code will 'hijack' the thickbox close link and do extra stuffs:

$("#TB_closeWindowButton").click(function(){
  tb_remove();
  //do extra stuffs, such as get a new select
  var select_parent = $('#theselect').parent();
  $.get('new_select.php',
        {},
        function(data){
          select_parent.html(data);
        });
});

Beside hijack the thickbox close link, you can also put the code into any link inside the thickbox. Just make sure you call tb_remove() to close the thickbox window, before or after your custom code. If it involve submitting a form, use jQuery form plugins to submit the form via AJAX, and then run your close function on a successful form submit.

About updating the select box, see my answer here about how to do make it run in every browser.

To make sure that your function always called, you can set the thickbox to use modal mode that will disable the escape key. Remember to put the close code, because by default, the thickbox bar will not displayed.