Is there a way to use Thickbox with dynamic content?

Question

Here's the scenario:

I have a textbox and a button on a web page. When the button is clicked, I want a popup window to open (using Thickbox) that will show all items that match the value entered in the textbox. I am currently using the IFrame implementation of Thickbox. The problem is that the URL to show is hardcoded into the "alt' attribute of the button. What I really need is for the "alt" attribute to pass along the value in the textbox to the popup.

Here is the code so far:

<input type="textbox" id="tb" />
<input alt="Search.aspx?KeepThis=true&TB_iframe=true&height=500&width=700" class="thickbox" title="Search" type="button" value="Search" />

Ideally, I would like to put the textbox value into the Search.aspx url but I can't seem to figure out how to do that. My current alternative is to use jQuery to set the click function of the Search button to call a web service that will set some values in the ASP.NET session. The Search.aspx page will then use the session variables to do the search. However, this is a bit flaky since it seems like there will always be the possibility that the search executes before the session variables are set.

Greenlet

Answer 1

Just handle the onclick of your button to run a function that calls tb_show(), passing the value of the text box. Something like

... onclick = "doSearch()" ...

function doSearch()
{
    tb_show(caption, 'Search.aspx?KeepThis=true&q=\"' +
            $('input#tb').val() +
            '\"&TB_iframe=true&height=500&width=700');
}

Scheel

That is EXACTLY what I was looking for. Thank you! If I could vote you up 10 times I would. :-) – Greenlet

Answer 2

If you read the manual, under the iframe content section, it tells you that your parameters need to go before the TB_iframe parameter. Everything after this gets stripped off.

Bellman

Answer 3

Here is an idea. I don't think it is very pretty but should work:

$('input#tb').blur(function(){ 
  var url = $('input.thickbox').attr('alt');
  var tbVal = $(this).val();

  // add the textbox value into the query string here
  // url = ..

  $('input.thickbox').attr('alt', url);

});

Basically, you update the button alt tag every time the textbox loses focus. Instead, you could also listen to key strokes and update after every one.

As far as updateing the query string, I'll let you figure out the best way. I can see putting a placeholder in there like: &TB=TB_PLACEHOLDER. Then you can just do a string replace.

Quantum

Tried that. The alt definitely takes effect but it doesn't appear that the Thickbox plugin is respecting it. It still uses the original URL. :-( – Greenlet

Answer 4

In the code-behind you could also just add the alt tag progammatically,

button1.Attributes.Add("alt", "Search.aspx?KeepThis=true&TB_iframe=true&height=500&width=700");

Baumgardner