How to fire an event from thickbox without closing it?

Question

I'm working with thickbox where i need to use asp controls and have to call the events of the corresponding controls as well. Recently i faced an issue like, asp control's events are not getting fired when used within the thickbox. Following are the step by step procedure on my issue:

1. I need to fire an asp button click event from the thickbox without closing the thickbox.

2. In order to solve #1, i used the following script:

     function doPostBack(element) {
       tb_remove();
       setTimeout('__doPostBack(\'' + element.name + '\',\'\')', 500);
   }
   

3. #2 fires the event and closes the thickbox window. I need to display a label on the thickbox window and closing the window makes it impossible.

I tried the tb_show() method for displaying the thicbox but the window will be displayed while debugging using firebug only and the close button will not work then. Any suggestions will be helpful...

Answer 1

First, some info on why your original workaround is necessary.

Most of these modal dialog plugins, like Thickbox, pull your div that contains the dialog content out of its original place in the DOM, and attach it again under the body tag. This mainly has to do with getting the overlay behind the popup to display properly.

One side-effect of this, especially in an ASP.NET page where everything is inside only ONE form tag, is that your form controls are no longer within the <form> tag. So when you click on the button to submit the form, nothing happens (because it's not inside a form that it can submit).

The workaround you found above, which is the easiest solution, closes the Thickbox first, so that your form content is now back in its original position in the DOM, inside the <form> tag. Then it initiates the submit of the form. It uses a timeout to make sure the dialog has had a chance to close properly before trying the submit.

If you want the Thickbox dialog to stay open during your postback, you have to deal with the real issue above. One way, is to not really do a postback, and instead use AJAX to call a webservice/method with the values from your form fields. Another option is to modify the thickbox.js to keep everything inside the form tag. A third option, is to have another page with your form on it, and then load that inside a Thickbox in an iframe.

Whatever the solution, it will either involve keeping the dialog contents inside the form tag in the DOM, or using an alternative way of posting the form data so that it doesn't matter if it's outside the form.

Hope this helps you find a solution to your specific situation.

---

Original answer for original question about opening thickbox without a standard link tag

Have you tried the following?

tb_show('Title for thickbox','WHATEVER-YOU-WOULD-NORMALLY-PUT-IN-THE-HREF');

I don't use Thickbox, but this is the function it uses internally when you click on a link.