resposta jQuery Ajax Usando ThickBox

Question

Então, eu tenho uma chamada ajax para um serviço (usando JQuery) que retorna html válido:

<table class='datagrid' style='width: 600px; text-align:left'>
<tr><th>User</th><th>Full Name</th><th>Company</th><th>New Prints</th><th>Reprints</th></tr><tr>
<td>
<a class='thickbox' href='UserSessionReportPopup.aspx?user=1&start=9/2/2009&end=9/30/2009&TB_iframe=true&height=450&width=700'>carbon</a>

</td><td>Carbon County</td>
<td></td>
<td>5</td>
<td>4</td>
</tr>
</table>

Esta html retorno é atribuído corretamente e exibe na página, mas quando clico no "a" tag uma nova página é aberta em vez de um "ThickBox" com o conteúdo iFrame.

Aqui está a parte confuso se eu copiar este código na página e, em seguida, executá-lo no navegador age da maneira correta (exibindo o item thickbox)

Por que não vai a exibição de resposta AJAX o item ThickBox corretamente?

Meu palpite é que a classe = 'thickbox' no texto de resposta não é encontrar o javascript que sabe como analisar esse item.

Answer 1

Eu acho que o problema é, que este <a class='thickbox' só não tem o evento ligado a ele.

Eu tive exatamente os mesmos problemas, quando eu copiado elementos DOM existentes que continham links e todos os eventos vinculados parou de funcionar sobre os elementos recém-criados. Tudo o que eu tinha a fazer era a eventos se ligam a esses elementos também.

Então, basta fazer a sua chamada thickbox a este novo elemento também. Não basta usar o mesmo código que você usa em US $ (document) .ready. Quando eu fiz algo parecido com que os eventos começaram a trabalhar em novos elementos, mas atirou duas vezes em elementos antigos.

Editar em resposta do comentário: Eu não tenho nenhuma idéia de como thickbox funciona. Eu sempre preferi Slimbox. Eu fiz encontrar algum exemplo que poderia ajudá-lo. Leia este (seu thickbox sobre): http://15daysofjquery.com/jquery-lightbox/19/

Basicamente, quando a página é carregada beeing, este fogos de função:

function TB_init(){

    $("a.thickbox").click(function(){

    var t = this.title || this.innerHTML || this.href;

    TB_show(t,this.href);

    this.blur();

    return false;

    });

Agora todos a tags com thickbox classe irá abrir o link aponta coisas no thickbox janela. Se os elementos de novos são adicionados à página, eles não têm este evento vinculado a eles, para depois de fazer a mágica ajax e puxando que o novo conteúdo de algum lugar, você precisa vincular que $ ( "a.thickbox"). Click (function () {para o novo link para. então basta adicionar algo como

$(newlinkselector).click(function{ etc.. etc.. 

no script, logo após o lugar que você processar o material que ajax chamada dá volta para você.

Answer 2

Você também pode colocar seguinte script dentro ajax resposta:

<script type="text/javascript">
    self.parent.tb_init('a.thickbox, area.thickbox, input.thickbox');
</script>

Ele irá inicializar a caixa de espessura para cada momento em ajax resposta chegar.

Answer 3

Eu tive o mesmo problema. A resposta rápida - adicione a seguinte linha depois de preencher o innerHTML: tb_init ( 'a.thickbox'); // Inicializar novamente

Esta re-inicializa o manipulador de eventos para a marca de âncora. Trabalhou como um encanto para mim ...

Answer 4

Substituir tb_init () com as seguintes:

   function tb_init(domChunk){
    $(domChunk).live("click", function(){
    var t = this.title || this.name || null;
    var a = this.href || this.alt;
    var g = this.rel || false;
    tb_show(t,a,g);
    this.blur();
    return false;
    });
}

Isso vincula o evento Click com um método jQuery ao vivo que considera o conteúdo gerado dinamicamente.