Respuesta de Jquery Ajax con ThickBox

Question

Entonces tengo una llamada ajax a un servicio (usando JQuery) que devuelve 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>

Este html de retorno se asigna correctamente y se muestra en la página, PERO cuando hago clic en " a " etiqueta se abre una nueva página en lugar de un " ThickBox " con el contenido de iFrame.

Aquí está la parte confusa si copio este código en la página y luego lo ejecuto en el navegador, actúa de la manera correcta (mostrando el elemento del cuadro grueso)

¿Por qué la respuesta AJAX no muestra el elemento ThickBox correctamente?

Supongo que class = 'thickbox' en el texto de respuesta no encuentra el javascript que sabe cómo analizar ese elemento.

Answer 1

Creo que el problema es que esto <a class='thickbox' simplemente no tiene el evento vinculado a él.

He tenido exactamente los mismos problemas, cuando copié elementos dom existentes que contenían enlaces y todos los eventos enlazados dejaron de funcionar en esos elementos recién creados. todo lo que tenía que hacer era vincular los eventos a esos elementos también.

Entonces, simplemente haga su llamada de caja gruesa a este nuevo elemento también. No solo use el mismo código que usa en $ (document) .ready. Cuando hice algo así, los eventos comenzaron a funcionar en elementos nuevos, pero dispararon dos veces en elementos antiguos.

Editar en respuesta al comentario: No tengo idea de cómo funciona Thickbox. Siempre he preferido Slimbox. Encontré algún ejemplo que podría ayudarte. LEA esto (se trata de thickbox): http://15daysofjquery.com/jquery-lightbox/19/

Básicamente, cuando la página se carga, esta función se activa:

function TB_init(){

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

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

    TB_show(t,this.href);

    this.blur();

    return false;

    });

ahora todas las etiquetas con clase thickbox abrirán los puntos de enlace de cosas en la ventana de thickbox. Si se agregan nuevos elementos a la página, no tienen este evento vinculado a ellos, por lo que después de hacer la magia ajax y extraer ese nuevo contenido de alguna parte, debe vincular ese $ (& Quot; a.thickbox "). haga clic en (function () {al nuevo enlace a. así que simplemente agregue algo como

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

en la secuencia de comandos, justo después del lugar donde renderiza las cosas que la llamada ajax le devuelve.

Answer 2

También puede poner el siguiente script dentro de la respuesta ajax:

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

Inicializará una caja gruesa para cada vez que aparezca una respuesta ajax.

Answer 3

Tuve el mismo problema. La respuesta rápida: agregue la siguiente línea después de llenar el innerHTML: tb_init ('a.thickbox'); // Inicializar de nuevo

Esto reinicia el controlador de eventos para la etiqueta de anclaje. Funcionó como un encanto para mí ...

Answer 4

Reemplace tb_init () con lo siguiente:

   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;
    });
}

Esto vincula el evento click con un método jQuery live que considera el contenido generado dinámicamente.