Open/Call thickbox without using the “class” attribute.

The Quest

Sometimes we want to open a Thickbox in a different fashion than a anchor-class-title combination. For example:

  1. When the thickbox needs to be open concerning some logic.
  2. When you want to open a thickbox immediately after your web document is loaded.
  3. Any other case in which you need to have more control.

Mitigation

Use the tb_show JavaScript function.

This function is defined inside the thickbox.js file (or thickbox-compressed.js).

   1: tb_show('Title String','URL&ThickboxVars',imageGroup)

This is an example:

   1: <a onclick="tb_show('Clients','options/clients.aspx?KeepThis=trueTB_iframe=true&height=430&width=600')"
   2:                                             href="#" title="Clients">Manage Clients</a>

Title String

This is just the title you want to appear in the top of the thickbox (as long the thickbox is not modal).

Url&ThickboxVars

This is the URL you want to be loaded inside the thickbox.

Just in case, lets explain that a little more:

  • options/clients.aspx: This is the URL, nothing strange here, right?
  • KeepThis=true: This is just a variable we want to pass to the page using the GET protocol (QueryString).
  • It is not necesary that you use KeepThis var in al your thickbox calls. I mean, this is perfectly valid:
  •    1: <a onclick="tb_show('Clients','options/clients.aspx?otherValue=trueTB_iframe=true&height=430&width=600')"
       2:                                             href="#" title="Clients">Manage Clients</a>

  • TB_iframe=true&height=430&width=600: This string is used by the thickbox to know the dimensions it should be. And also, if the thickbox is going to be inline or not. Also you can define if the thickbox is modal or not like this so:
  •    1: TB_iframe=true&height=430&width=600&modal=true

Some thing you’ve maybe noticed is that there´s not an & between the TB_iframe and the KeepThis=true strings.

This is not really necessary because  the thickbox splits this string and TB_Iframe and rest of the strings after that is not passed to the URL via GET protocol. (Yes, you wil not have any var “width” or “height” defined in the destination page).

If you add an & like this anything bad is going to happen though :

   1: KeepThis=true&TB_iframe=true&height=430&width=600&modal=true

But for your understanding, you are actually defining a new GET variable, an empty one.

Things you don’t want to do while using tb_show

 

Do not write any GET (query string) variable after the TB_iframe or TB_inline.

If you do this:

   1: TB_iframe=true&height=430&width=600&modal=true&MyVar=value

That variable MyVar will be ignored. Since all the Query String after TB_iframe will be cropped.

Be careful using character, like “, or ´ inside the title string, since this will brake the JS code.

This may be trivial, but for example, if you are using thickbox inside a GridView Item Template, and you use something like:

   1: <ItemTemplate>
   2:  <a class="link" onclick="tb_show('<%# Eval("articleName") %>','articleDetail.aspx?articleID=<%# Eval("artID") %>TB_iframe=true&height=599&width=1000');">
   3:      <%
   1: # DataBinder.Eval(Container, "DataItem.masterNumber")

%>

   4:  </a>
   5: </ItemTemplate>

If the articleName have “ or ‘, this will brake the thickbox JS code.

Escape the characters, or replace them.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: