variable javascript dans tableau php

Version imprimable

Bonjour

mon problème est le suivant :
je dispose d'un tableau associatif php et j'aurai voulu savoir si lors de l'exécution d'une fonction java script il était possible de faire passer une variable java script comme indice.

Je vous joint le code si dessous pour être plus clair :
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 <div id='gallery'> <script language="javascript"> function ChangeImage(i) { var image = "<?php $tableau["+i+"]['nomFichier']; ?>" alert(image) alert(i) } </script> <?php echo "<em id='miniImages'>"; if(isset($_GET['page']) ) { $i = $_GET['page']; } else // Sinon { $i= 0; } $j = 0; while ($j <= $nb && $i <= $total-1 ){ echo " <img id='img' onClick=\"ChangeImage(".$i.");\" src='upload/".$images[$i]['nomFichier']."' WIDTH=50px /> "; $j++; $i++; }
la fonction ChangeImage est bien appelé car le alert(i) me retourne bien l'indice (il ne marche que quand les deux première ligne de la fonction sont en commentaire).

J'ai lus dans la fac qu'on pouvait convertir un tableau associatif php en tableau javas sript mais cela semblait difficile voila pourquoi je demande si une solution de ce genre existe.

Merci d'avance

19/12/2009, 11h01
sebhm

Bonjour,

le PHP s'execute avant que ta page ne soit chargée.
Le Javascript apres.

Donc impossible de lancer une instruction PHP dans ta fonction en Javascript.
Pour t'en persuader, regarde le code source de ta page HTML générée.

Si tu veux utiliser un tableau existant en PHP dans ton code Javascript, il faudra convertir ton tableau PHP en Javascript lors du chargement de ta page, donc comme c'est dit dans la FAQ.
Tu trouveras également plein de posts là dessus en utilisant la fonction Rechercher
19/12/2009, 12h09
zeroara

d'accord merci de répondre si vite à mon interrogation.

Je verrais ça cette après midi en espérant que ça fonctionne.
19/12/2009, 13h13
micetf
Bonjour,

Est-ce que la boucle while qui génère les balises img
avec un id="img" ne risque pas de poser problème ?
L'attribut id est censé être unique sur une page.

Personnellement,
je ne connais pas la finalité de la fonction changeImage(),
mais j'aurais fait en sorte que la boucle while génère des balises img
avec des attributs id numérotés (img0,img1,...),
Code:

1 2 3 4 5 while ($j <= $nb && $i <= $total-1 ){ echo '<img id="img'.$i.'" onClick="ChangeImage('.$i.');" src="upload/'.$images[$i]['nomFichier'].'" width="50px" /> '; $j++; $i++; }
Ainsi, dans la fonction changeImage(i),
j'accèderais aux attributs de ces balises
grace à la méthode document.getElementById.
Par exemple, pour avoir le nom du fichier image :

Code:

document.getElementById('img'+i).src;

La construction d'un tableau javascript ne serait alors peut-être plus nécessaire.

Fred
19/12/2009, 13h35
zeroara

en fait c'est une galerie la boucle sert à généré des miniatures des images de la galerie et la fonction changeImage sert a récupéré l'indice de l'image sur laquelle on clic pour l'afficher (avec diverse info comme sont nom, description ...)

si tu pense que ton idée est toujours une bonne option pourrais tu l'expliquer un peu plus je ne l'ai pas totalement compris

edit : j'ai utilisé json et ça marche malheureusement lorsque je fais un document.write il me change de page pour m'afficher ce qu'il faut sur une page blanche.

Je pensais à quelque chose de ce type :

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
 
<script language="javascript">
function ChangeImage(i) {
	 var image = document.getElementById('img'+i);
   document.getElementById('image').src=image.src;
   document.getElementById('image').alt=image.alt;
   document.getElementById('no').innerHTML=i;
   document.getElementById('titre').innerHTML=image.title;
}
</script> 
 
<div  style="text-align:center;">	
<h1>Miniatures avec toutes les infos nécessaires<br/>(nom, description)</h1> 
<p>
<?php 
$images = array(
  array('oiseau','magnifique photo d\'un oiseau'),
  array('chien','magnifique photo d\'un chien'),
  array('chat','magnifique photo d\'un chat'),
  array('lapin','magnifique photo d\'un lapin')
  );
foreach ($images as $iImg => $image){
?>
<img id="img<?php echo $iImg; ?>" onClick="ChangeImage(<?php echo $iImg; ?>);" src="upload/<?php echo $image[0].'.png'; ?>" alt="<?php echo $image[0]; ?>"  title="<?php echo $image[1]; ?>" width="50px" style="cursor:pointer;" />&nbsp;
<?php 
}
?>
</p>
 
 
 
<h1>Agrandissement de l'image choisie avec sous-titrage<br/>(Mis à Jour par la fonction ChangeImage())</h1>
<h2><img id="image" src="" alt="" width="200px" /></h2>
<p style="background-color:yellow;">Image n° <span id="no"></span> - Titre = <span id="titre"></span></p>
</div>
 
<script type="text/javascript">ChangeImage(0);</script>

Fred

19/12/2009, 14h43
zeroara

Je viens d'esseyer vite fait ta solution mais cela ne marche pas (je l'ai surment fais trop vite)

Comme dis plus haut j'arrive a avoir mes valeurs avec le Json seul bemol je n'arrive pas a modifier la valeur du background de la balise div galleri
19/12/2009, 15h03
micetf

Pour mettre à 'blue' la valeur du background de la balise div gallery
tu dois pouvoir essayer ceci :

Code:

document.getElementById('gallery').style.backgroundColor='blue';

Fred
19/12/2009, 15h18
zeroara

J'ai esseyer ça mais ça ne marche pas je continue de chercher.

Code:

document.getElementById("gallery").style.backgroundImage = 'upload/'+image
19/12/2009, 15h26
Bovino

Code:

document.getElementById("gallery").style.backgroundImage = 'url(upload/'+image+')';
19/12/2009, 15h32
zeroara

aaaah ça marche merci beaucoup j'avais esséyé avec url mais j'avais du me tromper dans un ' .

Je passe en résolu un grand merci encore vous m'enlever une grosse épine du pied