ThickBox funktioniert nicht, wenn Daten von der Serverseite stammen

Question

Ich benutze jQuery dicke Box, um eine aspx Seite in einem modalen Dialog zu zeigen Dies funktioniert gut in meiner Seite.In meiner Seite habe ich einige Links, auf denen wenn ich klicke, mit jQuery's Load-Methode, ich erhalte einige Daten von der Server-Seite und lade sie ein (die Daten sind ein Raster, das einige Bilder enthält). Mein Problem ist, dass meine Thickbox gut funktioniert, wenn sie auf meiner Seite fest codiert ist, aber Wenn ich es vom Server nehme und zu einem div lade, funktioniert es nicht. Stattdessen zeigt es die neue Seite im modalen Dialog an und leitet den Browser um, um diese Seite zu laden.

ich schwer, diese Linie in meiner ersten Seite codiert

<a class='thickbox' href='../Home/CostMetrics.aspx?Model=6&KeepThis=true&TB_iframe=true&height=300&width=850'>modal thick box link</a> 

und ich bin Erzeugung dieser tage vom Server, wenn ich Daten zu laden vom Server an den div

< eine class = "thickbox" href = “& ../Home/CostMetrics.aspx?Model=5 KeepThis = true & TB_iframe = true & height = 300 & width = 850" > modal dicke Kastenverbindung </a>

Beide sind gleich. Aber mein Leuchtkasten funktioniert nicht. Irgendwelche Ideen, um das zu lösen?

ich die thickbox CSS und JS in meinem ersten page.My Server-Seite enthalten sind, welche die div füllt ist Rückgabedaten wie diese

<div><div><img src='abc.jpg' /> <a class="thickbox" href="../Home/CostMetrics.aspx?Model=5&KeepThis=true&TB_iframe=true&height=300&width=850">modal thick box link</a></div></div> 

Vielen Dank im Voraus

Answer 1

Soweit ich erinnere ThickBox ist Initialisiert, wenn DOM bereit ist (bei Bereit-Ereignis von jQuery). Während dieser Initialisierung wird der Standard-Klick-Handler durch einen ersetzt, der Ihnen modal anzeigt. Wenn Sie die Load-Methode von jQuery zum Laden von Daten verwenden, gibt es keine solche Initialisierung. Um dies zu beheben, sollten Sie ThickBox manuell initialisieren, nachdem Sie neues HTML in die Seite dieses neuen HTML eingefügt haben. Oder Sie können auch ThickBox auf alle Elemente reinit (nachdem Sie neue HTML-Code in dom einfügen), dies funktionieren wird, aber dies ist nicht optimale Lösung:

tb_init('selector for newly added anchor (a tag)'); // only for new one 
tb_init('a.thickbox'); // to reinit thickbox on all anchors with class thickbox 

Answer 2

hatte ich ein ähnliches Problem - thickbox auf Daten einwandfrei funktioniert, dass Belastungen in Seite - aber wenn Sie dynamische Inhalte (mit jQuery Ajax-Befehl) ‚nachdem die Seite geladen‘ zurückkehren - Links in diesen neuen Daten enthalten nicht öffnen thickbox ...

Meine Lösung:
Thickbox ruft die " tb_init "Funktion in der Datei thickbox.js - die nur einmal auf der Seite ausgeführt wird load ... müssen Sie die Funktion "tb_init" erneut aufrufen INSIDE Ihre jQuery-Funktion, die den neuen dynamischen Serverinhalt ausführt!

Rufen Sie die ‚tb_init‘ durch die folgenden drei Zeilen (Sie diese Zeilen an der Spitze der „thickbox.js“ Datei finden):

tb_init('a.thickbox, area.thickbox, input.thickbox, button.thickbox');//pass where to apply thickbox 
imgLoader = new Image();// preload image 
imgLoader.src = tb_pathToImage; 

Als Beispiel - das ist ein Code-Schnipsel, wie ich Get Thickbox Arbeiten an Inhalt ich dynamisch mit dem jQuery Ajax-Befehl generiert (was ich denke, ist ähnlich wie jQuery 'Load' -Methode, die Sie verwenden!?) ...Diese

$.ajax({ 
method: 'get',url: '<?php echo $url;?>incl_ajax_prices.php',data: 'h=<?php echo $Hid;?>', 
beforeSend: function(){$('#PriceLoad').show('fast');}, //show loading just when link is clicked 
complete: function(){ $('#PriceLoad').hide('fast');}, //stop showing loading when the process is complete 
success: function(html){ //so, if data is retrieved, store it in html 
$('#Prices').show('slow'); //animation 
$('#Prices').html(html); //show the html inside .content div 

// ThickBox - this allows any dynamically created links that use thickbox to work! 
tb_init('a.thickbox, area.thickbox, input.thickbox');//pass where to apply thickbox 
imgLoader = new Image();// preload image 
imgLoader.src = tb_pathToImage; 

} 
}); //close ajax 

ist, wie ich es getan habe (im neuen zu jQuery), seine wahrscheinlich nicht die beste Lösung, aber Versuch & Fehler zu dieser Methode führen Sie mich!

Hoffe, dass hilft?

Answer 3

Sie können original tb_init Funktionscode innerhalb thickbox.js ersetzen, um diese:

function tb_init(){ 
    $(document).click(function(e){ 
    e = e || window.event; 
    var el = e.target || e.scrElement || null; 
    if(el && el.parentNode && !el.className || !/thickbox/.test(el.className)) 
    el = el.parentNode; 
    if(!el || !el.className || !/thickbox/.test(el.className)) 
    return; 
    var t = el.title || el.name || null; 
    var a = el.href || el.alt; 
    var g = el.rel || false; 
    tb_show(t,a,g); 
    el.blur(); 
    return false; 
    }); 
}; 

Oder Sie können einfach diese Funktion legen Sie in den Kopf Ihrer HTML-Seite innerhalb Tag als Funktion normale JS. Es wird dies mit externen Datenlasten gut funktionieren.

Answer 4

Eine Variation von dem, was Sergey sagt ist jQuery .live() Funktion, irgendwo in Ihrer Js:

$('[id^="my_thick_"]').live("click", function(event) { 
    try { 
      // This block is taken from tb_init() 
     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; 
    } catch(e) { alert(e); }  
}); 

die IDs Ihrer dynamisch hinzugefügt Links unter der Annahme, begann mit 'my_thick _...'

Answer 5

Wir haben das Problem mit thickbox Bitte this link für