Jquery Ajax response Using ThickBox

Question

Quindi ho una chiamata Ajax a un servizio (usando JQuery) che restituisce HTML valido:

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

Questo HTML restituito viene assegnato correttamente e viene visualizzato sulla pagina, MA quando faccio clic sul " a " tag viene aperta una nuova pagina anziché un " ThickBox " con il contenuto di iFrame.

Ecco la parte confusa se copio questo codice nella pagina e poi lo eseguo nel browser, agisce nel modo corretto (visualizzando l'elemento thickbox)

Perché la risposta AJAX non visualizzerà correttamente l'elemento ThickBox?

La mia ipotesi è che class = 'thickbox' nel testo della risposta non trovi il javascript che sa come analizzare quell'elemento.

Answer 1

Penso che il problema sia che questo <a class='thickbox' non ha l'evento associato.

Ho avuto esattamente gli stessi problemi, quando ho copiato elementi dom esistenti che contenevano collegamenti e tutti gli eventi associati hanno smesso di funzionare su quegli elementi appena creati. tutto quello che dovevo fare era legare eventi anche a quegli elementi.

Quindi fai solo la tua chiamata thickbox a questo nuovo elemento. Non usare solo lo stesso codice che usi in $ (documento). Già. Quando ho fatto qualcosa del genere, gli eventi hanno iniziato a lavorare su nuovi elementi, ma hanno sparato due volte su elementi vecchi.

Modifica in risposta al commento: Non ho idea di come funzioni thickbox. Ho sempre preferito Slimbox. Ho trovato alcuni esempi che potrebbero aiutarti. Leggi questo (si tratta di thickbox): http://15daysofjquery.com/jquery-lightbox/19/

Fondamentalmente, quando la pagina viene caricata, questa funzione viene attivata:

function TB_init(){

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

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

    TB_show(t,this.href);

    this.blur();

    return false;

    });

ora tutti i tag con classe thickbox apriranno i punti di collegamento roba nella finestra thickbox. Se nuovi elementi a vengono aggiunti alla pagina, non hanno questo evento associato a loro, quindi dopo aver fatto la magia ajax e tirato fuori quel nuovo contenuto da qualche parte, devi associare quel $ (& Quot; a.thickbox "). fai clic su (function () {per il nuovo link a. quindi aggiungi qualcosa come

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

nella sceneggiatura, subito dopo il luogo in cui si esegue il rendering delle cose che ajax ti restituisce.

Answer 2

Puoi anche inserire il seguente script nella risposta ajax:

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

Inizializzerà la casella spessa per ogni volta che compare una risposta Ajax.

Answer 3

Ho avuto lo stesso problema. La risposta rapida: aggiungi la seguente riga dopo aver popolato il HTML interno: tb_init ( 'a.thickbox'); // Inizializza di nuovo

Questo reinizializza il gestore eventi per il tag anchor. Ha funzionato come un incanto per me ...

Answer 4

Sostituisci tb_init () con quanto segue:

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

Questo vincola l'evento click con un metodo jQuery live che considera il contenuto generato dinamicamente.