Change Thickbox Title in runtime

June 8, 2009

The Quest.

You want to change the thickbox title, runtime or thought the ASP vb/c# code.

Mitigation

The thickbox title is stored inside a div ID TB_ajaxWindowTitle

image

Simply use Jquery to get your way to this DIV and change the value to the one you want:

   1: $("#TB_ajaxWindowTitle").val("New Title")

I request you to use jquery, because if you’re using thickbox, this means you already have jquery included in your page.

But if you do not want to use jquery, do this:

   1: window.document.getElementById("TB_ajaxWindowTitle").innerHTML = "New Title"

Doing that in Runtime with ASP.NET

Ok, first ask yourself “why” would you do that?. I Recommend you always (when possible) keep all your client code in the cient side, but if you have found a good reason, then, simply call the RegisterClientScriptBlock.

   1: ClientScript.RegisterClientScriptBlock(Me.GetType(), "scriptKey", "$("#TB_ajaxWindowTitle").val("New Title")", True)

This will work if you are in a ASPX page (inheriting directly or indirectly from System.Web.UI.Page).

If you are inside a component, call Me.ClientScript.Page.RegisterClientScriptBlock.

And yes, use Me.Page.getType() to fill the first parameter.

Advertisements

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

June 7, 2009

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.