Discussion :

[Equinoxe5]

Bonjour,
J'ai un souci pour faire réafficher une image choisie dans un div.
Pour commencer, je vais expliquer ce que je souhaite faire.
J'ai une fenêtre de type <div> ou les utilisateurs peuvent afficher une photo de leur choix. Pour ça, L'utilisateur clique sur une vignette (une liste de photos), le nom de la vignette est stocké dans un cookie pour être ensuite affiché dans le div. Seulement, je n'arrive pas à réafficher mon div pour voir la photo choisie sauf avec le bouton actualiser de mon navigateur.

Voici donc mes portions de code.
Mon <div> pour afficher la photo se nomme 'photo_equipe'
Le choix de la vignette:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
               <?php
                $vignette=array();
                foreach (glob("$chemin/$zenith/*_small.jpg") as $filename) {
                $vignette=explode('.jpg',$filename);
                $equipe=str_replace(" ","_",$equipe);
                echo "<a href='#' onclick=\"envoieRequete('setequipe.php?abrev=$abrev&equipe=$equipe&photo=$filename','photo_equipe');\" ><img src='".$vignette[0].".jpg' border='0' width='86' height='62'></a>";
                }
               ?>

L'enregistrement dans le cookie:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<?php
        if ($_GET['photo'] !=''){
	$expire = 365*24*3600;
	$valeur = "".$_GET['abrev']."_".$_GET['equipe']."";
        $photo = str_replace('_small','',$_GET['photo']);
        setcookie("photo_".$valeur."","".$photo."",time()+$expire);
	}
?>

Ma fonction javascript:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function envoieRequete(url,id)
{
	var xhr_object = null;
	var position = id;
	   if(window.XMLHttpRequest)  xhr_object = new XMLHttpRequest();
	  else
	    if (window.ActiveXObject)  xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); 
 
	// On ouvre la requete vers la page désirée
	xhr_object.open("GET", url, true);
	xhr_object.onreadystatechange = function(){
	if ( xhr_object.readyState == 4 )
	{
		// j'affiche dans la DIV spécifiées le contenu retourné par le fichier
		document.getElementById(position).innerHTML = xhr_object.responseText;
	}
	}
	// dans le cas du get
	xhr_object.send(null);
 
}

Et là malheureusement, y'a rien qui est renvoyé dans le div.
J'ai juste réussi à rajouter une ligne qui dit de rafraichir la page pour voir la photo choisie.
Quelqu'un peut me mettre sur une piste svp ?

Merci d'avance

[devyan]

Bonjour,

Puisque tu sais "construire" le nom exact de ton image en javascript il n'est pas indispensable de faire un appel AJAX.
Une simple modification du src d'un tag IMG ou du background de ton DIV devrait faire l'affaire (mais cela ne répond pas directement à ton problème)


Voyons ton code de plus près...

Il nous manque le contenu de la réponse AJAX (xhr_object.responseText)

devyan.

[Equinoxe5]

Tu veux dire que ma fonction est incomplète ?
Seulement, je l'ai trouvée sur un autre site et testée en local. Ca fonctionnait.
Après je me suis contenté de l'adapter en changeant juste les URL et nom des <div>. Je n'ai rien enlevé ni rajouté.

Tu peux me dire comment récupérer le contenu de la réponse AJAX ?

[devyan]

Bonjour,

Tu nous dis "y'a rien qui est renvoyé dans le div."
Hors le DIV est rempli comme suit : "document.getElementById(position).innerHTML = xhr_object.responseText;"

Il serait donc intéressant de voir à quoi ressemble la réponse "xhr_object.responseText" qui est insérée dans le DIV

devyan

[andry.aime]

Bonjour,
+1 devyan
Peut-on aussi voir le bout de code HTML généré?

A+.