ThickBox ne fonctionne pas lorsque les données du côté serveur

Question

Je suis en utilisant jQuery boîte épaisse pour afficher une page ASPX dans une de dialogue modale Cela fonctionne très bien dans mon page.In ma page, j'ai quelques liens sur lesquels quand je clique, en utilisant La méthode Load de jQuery, j'obtiens des données de la page du serveur et je charge (la data im get est une grille qui contient des images) .Mon problème est que ma thickbox fonctionne correctement quand elle est codée en dur dans ma page, mais quand je le prends du serveur et le chargement à un div, Son ne fonctionne pas, Au lieu de montrer la nouvelle page dans la boîte de dialogue modale, son redirigeant le navigateur pour charger cette page.

Je codé en dur cette ligne dans ma première page

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

et je suis générer ce tage du serveur lorsque je charge les données du serveur à la div

< a class = "thickbox" href = » ../Home/CostMetrics.aspx?Model=5 & & KeepThis = true TB_iframe = true & & hauteur = 300 width = 850" > boîte épaisse modal lien </a>

Les deux sont identiques.Mais ma lightbox ne fonctionne pas.Il y a-t-il des idées pour résoudre ce problème?

J'ai inclus le CSS thickbox et js dans ma première page du serveur page.My qui remplit la div est données retour comme cette

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

Merci à l'avance

Answer 1

Pour autant que je me souviens ThickBox est initialisé lorsque DOM est prêt (sur l'événement ready de jQuery). Au cours de cette initialisation, il remplace le gestionnaire de clic par défaut avec celui qui vous montrera modal. Lorsque vous utilisez la méthode Load de jQuery pour charger des données, il n'y a pas d'initialisation de ce type. Pour résoudre ce problème, vous devez initialiser manuellement ThickBox après avoir inséré du nouveau HTML dans la page sur ce nouveau HTML. Vous pouvez également Reinit ThickBox sur tous les éléments (après l'insertion nouvelle html dans dom), cela fonctionnera, mais ce n'est pas la solution optimale:

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

J'ai eu un problème similaire - thickbox fonctionne très bien sur les données qui se charge en la page - mais quand vous revenez du contenu dynamique (en utilisant la commande Ajax jQuery) « Une fois la page chargée » - liens contenus dans ces nouvelles données ne serait pas thickbox ouverte ...

Ma solution:
thickbox appelle la " tb_init "fonction dans le fichier thickbox.js - qui est seulement exécuté une fois, sur la page charger ... vous devez appeler à nouveau la fonction "tb_init" INSIDE votre fonction jQuery qui exécute le nouveau contenu du serveur dynamique!

Appelez le « tb_init » par les trois lignes suivantes (vous pouvez trouver ces lignes en haut de fichier « thickbox.js »):

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

À titre d'exemple - c'est un extrait de code de la façon dont i a-t-il travaillé avec thickbox sur du contenu généré de manière dynamique à l'aide de la commande jQuery Ajax (que je trouve similaire à la méthode 'Load' de jQuery que vous utilisez!?) ...

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

Voilà comment je l'ai fait (im nouveau à jQuery), il est probablement pas la meilleure solution, mais l'erreur d'essai & me conduire à cette méthode!

Espérons que ça aide?

Answer 3

Vous pouvez remplacer le code de la fonction tb_init d'origine à l'intérieur thickbox.js à celui-ci:

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

Ou vous pouvez simplement placer cette fonction dans la tête de votre page html étiquette à l'intérieur en fonction normale JS. Cela fonctionnera bien avec les charges de données externes.

Answer 4

Une variation de ce que Sergey dit, est d'utiliser la fonction .live() jQuery, quelque part dans votre .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); }  
}); 

en supposant que les ID de vos liens dynamiquement ajoutés a commencé avec 'my_thick _...'

Answer 5

Nous avons résolu le problème avec thickbox S'il vous plaît se référer this link détail