Friday, May 8, 2009

Calling ThickBox From Server-side Code

I'm actively engaged in replacing as many of the AJAX Control Toolkit components as I can with jQuery Plugin equivalents.

In terms of replacing the Modal Popup Extender, I did a lot of research and have decided to go with ThickBox. It's simple to use, has been around for some time, and appears to be fairly flexible. For ASP.Net developers there are several good articles about using it. This was one of the best.

Everything I read referred to wiring up a ThickBox to either a hyperlink or button. That's fine but I wanted to see if I could access it programatically, so that I could call it from server-side code, just like I do with the Modal Popup Extender.

So I searched through the ThickBox source code and found this:

function tb_show(caption, url, imageGroup) {//function called when the user clicks on a thickbox link

And here's how I implemented it with C# code:

string script = "$(document).ready(function() {tb_show('Sample Title', '#TB_inline?height=200
&width=400&inlineId=sampleContent', null);});";
ScriptManager.RegisterStartupScript(Page, typeof(Page), "", script, true);

Incidentally, one thing I could not achieve was implementing buttons that called server-side code. When I tested them, the server-side event was not fired. Perhaps someone will figure out a way to do this and leave a comment on here about that.


  1. Fantastic blog.. I have been using ThickBox on a clients Website for a few months for a guest book utilizing ThickBox and PHPMail.. kind of a patched together job seeing that I am not a web-design type person. I have recently tried to implement the same code in to my Blog but have had to modify some of the parameters seeing that blogger does not seem to be standard on how it deals with code. Couple of things I need to work on is the cancel button

    <input name="Reset" type="reset" onclick="tb_remove()" value="cancel">

    will not work

    and the cookie control only works with a value of one .. it will not work if I want to show it for more than once if I change the code it always shows.

    <script type="text/javascript">
    if ($.cookie('guest') != '1') {
    tb_show("Guest Book", '', 'false');

    $.cookie('guest', '1', { expires: 2 });

    so continuing to work on it and some of your code has helped

    Thank you

  2. I had this same requirement. Obviously your samples helped to solve.

    Thanks for sharing.

  3. I was having the same issue and this was not documented anywhere.