écrire du javascript avec PHP

[freeman43]

bonjour,

Voila je voudrais crée une page javascript via du php or cela ne fonctionne pas.
Voila le code que j'utilise en vain:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
function VisuImg()
{
	var div = document.getElementById('res');
	var Img = document.getElementById('SelectImg').value;
      alert('test');
     var strHTML = '';
     switch (Img)
       {
    <?php
	include('IDconnect.inc.php'); //permet se connecter a la bdd
	$sql = "SELECT ID FROM Upload ";
	$requete = mysql_query ($sql);
	while ($Choix = mysql_fetch_assoc($requete))
	{
		echo "case ".$Choix[ID]." ";
			echo ' strHTML+= \'Visu'.$Choix["ID"].'(strHTML)\'; ';
			echo 'break; ';
	}
	?>
	}
    div.innerHTML = strHTML;
}

Merci de m'aider sur ce problème afin que je puisse avancer dans le création de mon site.

[rawsrc]

Bonsoir,

Je voudrais bien t'aider mais je ne comprends pas du tout ce que tu veux faire. Que doit faire ta fonction javascript ?

[freeman43]

En faite ma fonction javascript doit récupérer dans une base de données un ID et un nom de ficher afin que lorsque je change de valeur dans mon sélect, cela m'affiche l'image correspondante.
Or comme j'upload des fichiers sur mon site, cette fonctions javavascript doit pour chaque ID me créer un appelle de fonction.

Voila ce que je veux que php me 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
 
function VisuImg()
{
var div = document.getElementById('res');
var Img = document.getElementById('SelectImg').value;
//alert('test');
var strHTML;
switch (Img);
{
case "1":                                Cela doit être générer par php
strHTML = Visu1(strHTML);
break;
case "2":
......
}                                          Fin de génération par php
div.innerHTML = strHTML;
}
 
function Visu1(strHTML)          Générer par php
{
strHTML +=\'<img src="Namefile.jpg">\';
return (strHTML);
}

[RunCodePhp]

Salut

Le problème c'est que tu n'a pas mis le code concernant le SELECT, et à mon avis tout repose sur les infos que contiennent ce SELECT.

Rien ne dit qu'il faille faire une requête SQL pour rechercher l'image correspondante à celle sélectionnée dans le SELECT.
Faut voir.

[freeman43]

voila le code du select qui doit me générer le code javascipt:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
 
<?php
include('IDconnect.inc.php'); //ID de conncetion a ma bdd
$sql = "SELECT ID FROM Upload ";
$requete = mysql_query ($sql);
while ($Choix = mysql_fetch_assoc($requete))
{
	echo "case ".$Choix[ID].";";
		echo ' strHTML+= \'Visu'.$Choix["ID"].'(strHTML)\'; ';
		echo 'break; ';
}
?>

La table Upload est constituer comme cela:

-------------------------
| ID | Name |
-------------------------
| 1 | fleche.jpg |
-------------------------

et voila le code qui doit me générer les fonctions:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
<?php
$sql = "SELECT * FROM Upload ";
$requete = mysql_query ($sql);
while ($Functions = mysql_fetch_assoc($requete))
{
	echo 'function Visu'.$Functions["ID"].' ';
	echo ' { ';
	echo ' strHTML+ = \'<img src="'.$Functions["Name"].'" /> \';';
	echo ' return (strHTML) ';
	echo ' } ';
}
?>

[RunCodePhp]

Il y a un problème de compréhension concernant le SELECT.

Un SELECT théoriquement c'est une liste de choix, et en HTML ça donne ceci :

Code :

1
2
3
4
5
6
 
<select name="choix">
    <option value="1">Choix 1</option>
    <option value="2">Choix 2</option>
    <option value="3">Choix 3</option>
</select>

De plus ceci devrait être placé dans un formulaire.

Ca peut être aussi des bouton radios, voir autre technique.
Mais rien dans ton code (coté HTML) fourni une liste où il sera possible de faire un choix parmi les éléments.
Donc question : Où et comment est cette liste ?


Toujours est il que coté Php, tu ferais sensiblement la même chose cela 2 fois (une requête SQL sur la même table Upload).
C'est quasi certain que le faire qu'1 fois serait possible.
Mais il faut d'abord éclaircir le point ci-dessus.

[freeman43]

Pardon excuse moi je m' était emmêlé les pinceaux et je n' avais pas compris que tu voulais le code cote HTML pour la sélection.

Le voici:

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
<div id="title">Affichage des fichiers:
<?php
$sql = "SELECT * from Upload";
$requete = mysql_query ($sql);
if (mysql_num_rows($requete) == 0)
{
	echo "Aucun Fichier.";
}else
{
        echo '<select id="SelectImg" onchange="VisuImg()">';
        echo '<option value=""></option>';
	while ($Fichiers = mysql_fetch_assoc($requete))
	{
	echo '<option value="'.$fichiers["ID"].'">'.$Fichiers["Name"].'</option>';
	}
	echo '</select>';
}
?>
</div>
<div id="text">
<?php
echo '<div id="res"></div>';
?>
</div>

Or cela fonctionne parfaitement car si j enléve le code php qui doit me générer le code javascrript, je rentre bien dans la fonction VisuImg car ça m'affiche le alert.

[RunCodePhp]

Là c'est mieux.

Je te donne une idée (à tout hasard) :

Code :

1
2
3
4
5
 
while ($Fichiers = mysql_fetch_assoc($requete))
{
echo '<option id="id_'.$fichiers["ID"].'" rel="'.$Fichiers["Name"].'" value="'.$fichiers["ID"].'">'.$Fichiers["Name"].'</option>';
}

En faite, on triche un peu en exploitant l'attribut rel, en y rajoutant le nom de cette image, ce qui va éviter de faire une requête SQL pour ça.
(Sans compter que ce n'était pas vraiment possible de le faire, sauf en utilisant de l'Ajax, soit de l'artillerie lourde pour aussi peu).

Théoriquement, tu dois maintenant pouvoir récupérer la valeur de l'attribut id de l'option sélectionnée.
La valeur ici sera quelque chose comme : id_10
Et grâce à cet id, tu devrais ainsi pouvoir récupérer la valeur de l'attribut rel correspondante, c'est à dire le nom de l'image.
Une fois obtenu le nom, reste plus qu'à générer le code HTML, c'est à dire l'image (<img src="..." />).

Avec les fonctions :
document.getElementById('');
document.getElementByName('');

[rawsrc]

Ah RunCodePhp m'a devancé,
voici comment j'aurais simplifié le tout :

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
<script type="application/javascript">
function visuImg(src) {
   var img = '';
   if (src.length) {
      img = '<img src="'+src+'" />';
   }
   document.getElementById('res').innerHTML = img;
}
</script>
<div id="title">Affichage des fichiers:
<?php
$sql = "SELECT * from Upload";
$requete = mysql_query($sql);
if (mysql_num_rows($requete) === 0): ?>
   <span>Aucun fichier</span>
<?php else: ?>
   <select id="SelectImg" onchange="VisuImg(this.options[this.selectedIndex].value)">
      <option value=""></option>
      <?php while ($data = mysql_fetch_assoc($requete)): ?>
      <option value="<?php echo $data['Name']; ?>"><?php echo $data['Name']; ?></option>
      <?php endwhile; ?>
   </select>
<?php endif; ?>
</div>
<div id="text">
   <div id="res"></div>
</div>

Bon aucun tests, rien, juste sorti du four
Il faut juste s'assurer que les noms des fichiers soient bien uniques

[RunCodePhp]

@rawsrc
Attention tout de même, car tu changes un peu les règles.
Si à la validation du formulaire (si formulaire il y a d'ailleurs), ce ne sera plus l'ID de l'image qui sera renvoyée, mais son nom.
Du coup, faut voir.

C'est pour ça que je n'ai pas modifié ça, et opté pour un attribut rel en y rajoutant le nom.
Ca complique un peu plus les choses, c'est vrai.


@freeman43
D'où l'utilité de fournir des infos complètes.
Le SELECT, formulaire ou pas ... qui sait, il y a peut être autre chose.

[rawsrc]

Envoyé par RunCodePhp

@rawsrc
Attention tout de même, car tu changes un peu les règles.
Si à la validation du formulaire (si formulaire il y a d'ailleurs), ce ne sera plus l'ID de l'image qui sera renvoyée, mais son nom.
Du coup, faut voir.

Je me suis posé la question et après en avoir discuté avec moi-même je suis tombé d'accord sur l'idée que ce n'était qu'une simple visionneuse donc faisable sans trop de problèmes par la suite.
Bon après s'il faut conserver l'id, c'est aisément modifiable (mix avec ton code) :
On perd juste au passage la validation W3C sauf si c'est du HTML 5 :

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
<script type="application/javascript">
function visuImg(src) {
   var img = '';
   if (src.length) {
      var img = '<img src="'+src+'" />';
   }
   document.getElementById('res').innerHTML = img;
}
</script>
<div id="title">Affichage des fichiers:
<?php
$sql = "SELECT * from Upload";
$requete = mysql_query($sql);
if (mysql_num_rows($requete) === 0): ?>
   <span>Aucun fichier</span>
<?php else: ?>
   <select id="SelectImg" onchange="VisuImg(this.options[this.selectedIndex].rel)">
      <option value=""></option>
      <?php while ($data = mysql_fetch_assoc($requete)): ?>
      <option value="<?php echo $data['ID']; ?>" rel="<?php echo $data['Name']; ?>"><?php echo $data['Name']; ?></option>
      <?php endwhile; ?>
   </select>
<?php endif; ?>
</div>
<div id="text">
   <div id="res"></div>
</div>

Je n'y ai pas pensé au premier coup mais il est possible de récupérer le text donc la source du fichier tout en conservant l'id :

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
<script type="application/javascript">
function visuImg(src) {
   var img = '';
   if (src.length) {
      var img = '<img src="'+src+'" />';
   }
   document.getElementById('res').innerHTML = img;
}
</script>
<div id="title">Affichage des fichiers:
<?php
$sql = "SELECT * from Upload";
$requete = mysql_query($sql);
if (mysql_num_rows($requete) === 0): ?>
   <span>Aucun fichier</span>
<?php else: ?>
   <select id="SelectImg" onchange="VisuImg(this.options[this.selectedIndex].text)">
      <option value=""></option>
      <?php while ($data = mysql_fetch_assoc($requete)): ?>
      <option value="<?php echo $data['ID']; ?>"><?php echo $data['Name']; ?></option>
      <?php endwhile; ?>
   </select>
<?php endif; ?>
</div>
<div id="text">
   <div id="res"></div>
</div>