[AJAX] Appel Thickbox non pris en compte

Version imprimable

12/06/2009, 01h47
maxou06

[AJAX] Appel Thickbox non pris en compte

Bonjour,
mon problème concerne mon site web, cela concerne une galerie de photo...
En effet, j'ai une page qui possède un DIV que je charge dynamiquement grâce à une fonction.
La page affichée dans le DIV possède un lien de classe ThickBox.

Problème, ce lien fonctionne comme un lien normal, sans prendre en compte le ThickBox.
Quand je charge seulement la page qui s'affiche dans le DIV, tout fonctionne normalement.

Il semble que ce soit le fait de charger dynamiquement le DIV qui bloque la possibilité d'utiliser Thickbox.

Quelqu'un a-t-il déjà rencontré ce problème ?

Je ne sais pas si je suis très clair, mais je reste à votre disposition pour tout complément d'info.

Merci par avance pour votre aide.
12/06/2009, 07h57
Bovino

La réponse est dans la FAQ :roll:
12/06/2009, 11h33
maxou06

appel thickbox

Ok merci, je vais regarder et je repost si je trouve pas...
Merci.
12/06/2009, 12h30
maxou06

Bonjour,

j'ai bien lu le FAQ, notamment celui ci : Pourquoi les événements disparaissent après une mise à jour avec AJAX ?

mais quoi mettre dans la fonction afterAjax(), je ne comprend pas ce qu'il veut dire par affectation d'evenement... il faut que je declare mes scripts (thickbox) a ce moment?

Merci par avance de votre aide
12/06/2009, 12h44
E.Bzz

Bonjour et bienvenue sur Developpez.com ;)

Comme indiqué dans la FAQ, une mise à jour via Ajax réinitialise le éléments recréés.
Il faut donc explicitement leur réaffecter chacun des évènements.
Dans la fonction AfterAjax(), tu auras donc des instructions du style

Code:

document.getElementById('id_element').onclick=function() {alert("Coucou");};

A+

Bonjour,
déjà merci pour vos réponses, mais je suis désolé j'arrive pas à résoudre mon problème...
je vais un peu plus le détaillé :

J'ai une galerie de photo qui s'affiche sur mon site, Ces photos se chargent sur ma page en utilisant Ajax, cela marche bien, seulement mes "miniatures", lorsque je clique dessus je voudrais ouvrir une lightbox (j'utilise tickbox 3.1).
Sans utiliser Ajax et si je fais afficher mes miniatures, cela marche. (quand je clique sur une des miniatures, cela me lance bien ma lightbox).

Passons au code :
Dans ma page photos.php, j'ai une div comme ceci pour accueillir le resultat de ma requete Ajax :
Code:

1 2 <div id="results"> </div>
puis dans cette page 'photos.php', j'ai un select qui regroupe mes categories de photos et lorsque je clique sur une des catégories, cela charge avec Ajax les photos de la bonne catégorie (Utilisation d'une BD pour les url...), voici le code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 Veuillez séléctionner une catégorie : <select id="categorie" name="categorie" onchange="refresh2('refreshPicture.php', this);"> <?php // Affiche les resultat d'un requete dans une liste déroulante $connection=mysql_connect("mysql","nomBDD","mdp") or die('erreur'); $db = mysql_select_db("nomBDD", $connection) or die ("erreur"); $requete=mysql_query("SELECT categorie FROM photos"); $nombrelignes = mysql_numrows($requete); for ($i=0;$i<$nombrelignes;$i++) { $categorie = mysql_result($requete,$i,"categorie"); ?> <option value="<?php echo $categorie; ?>"> <?php echo $categorie; ?> </option> <?php } ?> </select>
Grace à l'évenement onchange, je fais appel à une page 'refreshPicture.php' qui va me fait le travail d'aller chercher le bon chemin dans la BDD, voici le code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 <?php header("Content-Type:text/html; charset=iso-8859-1"); function refreshPicture($url){ if ($dir = opendir($url)) { while($file = readdir($dir)) { if(!in_array($file, array(".",".."))){ $nomimage = $file; echo ' <div class="liste_image"><a href="../photos/'.$nomimage.'" class="thickbox"><img src="../photos/miniatures/'.$nomimage.'" alt="'.$nomimage.'" title="'.$nomimage.'" /></a><br /> '.$nomimage.'</div> '; } } closedir($dir); } } if (isset($_POST['value'])){ $categorie = $_POST['value']; // D'abord, on se connecte à MySQL mysql_connect("mysq", "nomBDD", "mdp"); mysql_select_db("nomBDD"); $reponse = mysql_query("SELECT * FROM photos where categorie = '$categorie'"); $donnees = mysql_fetch_array($reponse); $url = $donnees['url']; // On se déconnecte de MySQL mysql_close(); refreshPicture($url); } ?>
Voir en gras dans la fonction refreshPicture car c'est ici que je dis que mes liens font partie de la class thickbox.

voici la partie ajax :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 function refresh2(url, select){ var value = select.options[select.selectedIndex].value; //try with Mozilla, opera, etc. if (window.XMLHttpRequest){ req = new XMLHttpRequest(); } //else IE else if (window.ActiveXObject){ req = new ActiveXObject("Microsoft.XMLHTTP"); } req.onreadystatechange = callback; req.open("POST",url,true); req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); req.send("value=" + value); } function callback(){ var div = document.getElementById('results'); if (req.readyState==4){ if (req.status == 200){ //it works: div.innerHTML = req.responseText; //afterAjax(); } else{ //problem: div.innerHTML = "refresh failed"; } } }
Voila j'espère avoir été clair, donc que faire dans mon cas svp dans la fonction afterAjax(), je pense qu'il faudrait réaffecter l'attribut class="thickbox" à tous mes liens mais je n'arrive pas...
Merci par avance pour votre aide.

12/06/2009, 17h23
E.Bzz
Citation:

Envoyé par maxou06

je pense qu'il faudrait réaffecter l'attribut class="thickbox" à tous mes liens mais je n'arrive pas...

Dans ce cas (si les liens sont dans results)
Code:

1 2 3 var les_liens = document.getElementById("results").getElementsByTagName("a"); for (var i=0; i<les_liens.length; i++) les_liens[i].className="thickbox";
A+

Bonjour,

J'ai fais ce que tu m'as dis, j'ai bien vérifier avec firebug qu'il m'ajoute bien la propriété class="thickbox" tout est ok mais malheureusement cela ne marche pas...
Cela doit venir d'ailleurs...

Svp, avez vous une autre idée, voila ce que je fais actuellement :

code js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
function refresh2(url, select){
	var value = select.options[select.selectedIndex].value;
	//try with Mozilla, opera, etc. 
	if (window.XMLHttpRequest){
        req = new XMLHttpRequest();
    }
    //else IE
    else if (window.ActiveXObject){
        req = new ActiveXObject("Microsoft.XMLHTTP");
    }
	req.onreadystatechange = callback;
    req.open("POST",url,true);
    req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	req.send("value=" + value);
 
}
 
function callback(){
    var div = document.getElementById('results');
    if (req.readyState==4){
        if (req.status == 200){
            //it works:
            div.innerHTML = req.responseText;
            afterAjax();
        }
        else{
            //problem:
            div.innerHTML = "refresh failed";
        }
    }
 
}
 
function afterAjax(){
	var les_liens = document.getElementById("results").getElementsByTagName("a");
	for (var i=0; i<les_liens.length; i++)
	les_liens[i].className="thickbox";
}

Merci par avance de votre aide, j'espère que l'on trouvera une solution.

13/06/2009, 12h58
Bovino

Il ne suffit pas d'affecter la classe pour que la thickbox prenne en compte les nouveaux éléments !

Il n'y a pas de délégation en JavaScript comme il peut y en avoir en CSS par exemple.
La thickbox prend en compte des objets JavaScripts repérés par leur nom de classe mais présents au chargement de la page, si tu rajoutes des éléments il faut leur affecter les comportements de ta box !
13/06/2009, 15h11
maxou06

ok d'accord je comprend mieu, merci pour cette réponse, mais justement comment faire pour faire fonctionner ma thickbox sur mes éléments qui sont pas présents au chargement de la page??
Comment leur affecter le comportement de ma thickbox?
Désolé mais je suis débutant en ajax, javascript...
Merci par avance de votre aide
14/06/2009, 08h38
Bovino

Cela peut dépendre du fonctionnement de ta thickbox, mais dans le principe, en général ce genre de script est appelé en passant en paramètre un nom de classe CSS qui va permettre au script de récupérer la collection d'éléments sur lesquels appliquer les effets.

Donc dans ton cas, ce que je ferais serait de donner un nouveau nom de classe aux éléments ajoutés et de réappeler le script de ta box sur le callback Ajax avec la nouvelle classe en paramètre.