Existe uma maneira de usar Thickbox com conteúdo dinâmico?

Question

Aqui está o cenário:

Eu tenho uma caixa de texto e um botão em uma página da web. Quando o botão é clicado, eu quero uma janela pop-up para abrir (usando Thickbox) que irá mostrar todos os itens que correspondem ao valor inserido na caixa de texto. Atualmente, estou usando a implementação IFrame de Thickbox. O problema é que a URL para show está codificado no "atributo alt' do botão. O que eu realmente preciso é para o 'atributo alt' para repassar o valor na caixa de texto para o pop-up.

Aqui está o código até agora:

<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" />

Idealmente, eu gostaria de colocar o valor caixa de texto para a url Search.aspx mas eu não consigo descobrir como fazer isso. Minha alternativa atual é usar jQuery para definir a função clique do botão Pesquisar para chamar um serviço web que irá definir alguns valores na sessão ASP.NET. A página Search.aspx irá então usar as variáveis ??de sessão para fazer a pesquisa. No entanto, este é um pouco esquisito, uma vez que parece que sempre haverá a possibilidade de que executa a busca antes de as variáveis ??de sessão estão definidos.

Answer 1

Apenas lidar com o onclick do seu botão para executar uma função que chama tb_show(), passando o valor da caixa de texto. Algo como

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

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

Answer 2

Se você ler o manual, na seção conteúdo iframe, diz-lhe que os seus parâmetros precisa ir antes do parâmetro TB_iframe. Tudo após este se despiu.

Answer 3

Aqui está uma idéia. Eu não acho que é muito bonito, mas deve funcionar:

$('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);

});

Basicamente, você atualizar a tag botão alt cada vez que a caixa de texto perde o foco. Em vez disso, você também pode ouvir a golpes de tecla e atualização depois de cada um.

Quanto updateing a string de consulta, eu vou deixar você descobrir o melhor caminho. Eu posso ver colocando um espaço reservado lá como: & TB = TB_PLACEHOLDER. Então você pode apenas fazer um texto de substituição.

Answer 4

Na code-behind você também pode simplesmente adicionar a tag alt progammatically,

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