[AJAX] combobox et php (sélectionner les données d'un champs d'une table mysql)

Version imprimable

04/05/2009, 09h13
argon

[AJAX] combobox et php (sélectionner les données d'un champs d'une table mysql)

Bonjour tout le monde

Voici ma question, comment afficher dans un combobox les données récupéré par un script php.

Les données vienne d'un champ d'une table.

A +
04/05/2009, 09h48
andry.aime

Salut, tu peux t'inspirer avec ce tutoriel
http://siddh.developpez.com/articles/ajax/#LIV-A

Bonsoir tout le monde

Voici ce que j'ai fais.

Partie html:

Code:

1
2
3
4
5
6
 
<select name="theme" id="theme" >
 
 
	<option selected="selected" >Sélectionner le théme</option>
 </select>

partie 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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
window.onload=testerNavigateur;
 
 
function testerNavigateur() {   
	objetXHR = creationXHR();
	if(objetXHR==null) {
		var erreurNavigateur="Erreur Navigateur : Création d'objet XHR impossible";
		remplacerContenu("info", erreurNavigateur);
	    document.getElementById("info").style.visibility="visible";
	}
	document.getElementById("theme").onchange=function() {selecTheme();}
}
 
function selecTheme(){
 
 
 document.getElementById("theme").options.length = 1;
 
	objetXHR4 = creationXHR();
 
	var temps = new Date().getTime();
 
	var parametres = anticache="+temps;
 
	objetXHR4.open("GET","selectTheme.php?"+parametres, true); 
 
	objetXHR4.onreadystatechange = creationMenu;
 
	objetXHR4.send(null);
 
}
 
function creationMenu(){
 
 
	if (objetXHR4.readyState == 4) {
 
		if (objetXHR4.status == 200) {
 
	          var nouveauResultat = objetXHR4.responseText;
 
		  var objetJSON=nouveauResultat.parseJSON();
 
			for (i=0; i<objetJSON.listeTheme.length; i++)
			{
			 var elementOption = document.createElement('option'); 
			 var texteOption = document.createTextNode(objetJSON.listeTheme[i].theme); 
			 elementOption.setAttribute('value',objetJSON.listeTheme[i].theme); 
			 elementOption.appendChild(texteOption); 
			 document.getElementById("theme").appendChild(elementOption); 
			}
 
 
 
	}
	}
 
}

Partie php:

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
40
41
42
43
44
45
46
47
 
 
 
<?php
 
header("Content-Type: text/plain ; charset=utf-8");
header("Cache-Control: no-cache , private");
header("Pragma: no-cache");
 
 
 
require_once('ConnexionMysql.php');
 
mysql_select_db($base);
 
$requeteSQL="SELECT them FROM themevideo";
 
$reponseSQL = mysql_query($requeteSQL);
 
$debut = true;
$nbColonnes=mysql_num_fields($reponseSQL);
 
echo "{\"listeTheme\":[";
 
if (mysql_num_rows($reponseSQL)){
 
while ($ligne = mysql_fetch_array($reponseSQL)) {
 
	if ($debut){
		echo "{";
		$debut = false;
	} else {
		echo ",{";
	}
 
		for($j=0;$j<$nbColonnes;$j++){
		$colonne=mysql_field_name($reponseSQL,$j);
 
		echo "\"".$colonne."\":\"". utf8_encode($ligne[$colonne])."\"";
 
		if ($j != $nbColonnes-1)	echo ",";
 
		}
	echo "}";
	}
 
echo "]}";

Mon souci est que rien ne s'affiche dans le select.

A +

Salut,

Code:

1
2
3
4
5
6
7
8
9
function testerNavigateur() {   
	objetXHR = creationXHR();
	if(objetXHR==null) {
		var erreurNavigateur="Erreur Navigateur : Création d'objet XHR impossible";
		remplacerContenu("info", erreurNavigateur);
	    document.getElementById("info").style.visibility="visible";
	}
	document.getElementById("theme").onchange=selecTheme;
}

Code:

1
2
3
4
5
6
 
for (i=0; i<objetJSON.listeTheme.length; i++) {
  var elementOption = new Option( objetJSON.listeTheme[i].theme, objetJSON.listeTheme[i].theme); 
 document.getElementById("theme").options[document.getElementById("theme").options.length] =elementOption;
...
}

remplace ta boucle WHILE:

Code:

1
2
3
4
5
6
 
$lignes = array();
while ($ligne = mysql_fetch_array($reponseSQL)) {
 $lignes[] = $ligne;
}
echo(json_encode($lignes));

A voir ensuite pour le résultat car cela fait quand même beaucoup de modifs....

ERE

Bonjour tout le monde

Rien ne s'affiche.

Voici les modiffications.

fichier 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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
window.onload=testerNavigateur;
 
 
function testerNavigateur() {   
	objetXHR = creationXHR();
	if(objetXHR==null) {
		var erreurNavigateur="Erreur Navigateur : Création d'objet XHR impossible";
		remplacerContenu("info", erreurNavigateur);
	    document.getElementById("info").style.visibility="visible";
	}
	document.getElementById("theme").onchange=selecTheme;
}
 
function selecTheme(){
 
 
 document.getElementById("theme").options.length = 1;
 
	objetXHR4 = creationXHR();
 
	var temps = new Date().getTime();
 
	var parametres = anticache="+temps;
 
	objetXHR4.open("GET","selectTheme.php?"+parametres, true); 
 
	objetXHR4.onreadystatechange = creationMenu;
 
	objetXHR4.send(null);
 
}
 
function creationMenu(){
 
 
	if (objetXHR4.readyState == 4) {
 
		if (objetXHR4.status == 200) {
 
	          var nouveauResultat = objetXHR4.responseText;
 
		  var objetJSON=nouveauResultat.parseJSON();
 
			for (i=0; i<objetJSON.listeTheme.length; i++)
			{
			 var elementOption = document.createElement('option'); 
 			document.getElementById("theme").options[document.getElementById("theme").options.length] =elementOption;
			 var texteOption = document.createTextNode(objetJSON.listeTheme[i].theme);
			 elementOption.setAttribute('value',objetJSON.listeTheme[i].theme); 
			 elementOption.appendChild(texteOption); 
			 document.getElementById("theme").appendChild(elementOption); 
			}
 
 
 
	}
	}
 
 
 
}

partie php

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
 
<?php
 
header("Content-Type: text/plain ; charset=utf-8");
header("Cache-Control: no-cache , private");
header("Pragma: no-cache");
 
 
 
require_once('ConnexionMysql.php');
 
mysql_select_db($base);
 
$requeteSQL="SELECT them FROM themevideo";
 
$reponseSQL = mysql_query($requeteSQL);
 
 
echo "{\"listeTheme\":[";
 
if (mysql_num_rows($reponseSQL)){
 
$lignes = array();
while ($ligne = mysql_fetch_array($reponseSQL)) {
 $lignes[] = $ligne;
}
echo(json_encode($lignes));
        }
 
echo "]}";
 
 
 
?>

Ne manquerait il pas une instruction au fichier php?

A +

16/05/2009, 09h03
Bovino

Code:

var parametres = "anticache="+temps;

Il manquait la quote ouvrante !

Rebonjour

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
function selecTheme(){
 
 
 document.getElementById("theme").options.length = 1;
 
	objetXHR4 = creationXHR();
 
	var temps = new Date().getTime();
 
	var parametres = "anticache="+temps;
 
	objetXHR4.open("GET","selectTheme.php?"+parametres, true); 
 
	objetXHR4.onreadystatechange = creationMenu;
 
	objetXHR4.send(null);
 
}

J'ai corrigé, mais ca ne fonctionne toujour pas.

A +

Il faut transmettre l'objet xhr à ton callback :

Code:

objetXHR4.onreadystatechange = function(){creationMenu(objetXHR4)};

Ceci dit, il serait préférable de faire les tests sur le status et readyState avant l'appel au callback :

Code:

1
2
3
4
5
objetXHR4.onreadystatechange = function(){
    if(objetXHR4.status==200 && objetXHR4.readyState==4){
        creationMenu(objetXHR4.responseText);
    }
}

Code:

1
2
3
4
5
6
7
8
9
10
11
function creationMenu(resultat){
	var objetJSON=nouveauResultat.parseJSON();
	for (i=0; i<objetJSON.listeTheme.length; i++){
	    var elementOption = document.createElement('option');
            document.getElementById("theme").options[document.getElementById("theme").options.length] =elementOption;
	    var texteOption = document.createTextNode(objetJSON.listeTheme[i].theme);
            elementOption.setAttribute('value',objetJSON.listeTheme[i].theme); 
	    elementOption.appendChild(texteOption);
	    document.getElementById("theme").appendChild(elementOption); 
	}
}

Bonjour tout le monde

Ca ne fonction pas, le problème ne viendrait il pas de mon fichier php.

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
 
<?php
 
header("Content-Type: text/plain ; charset=utf-8");
header("Cache-Control: no-cache , private");
header("Pragma: no-cache");
 
 
 
require_once('ConnexionMysql.php');
 
mysql_select_db($base);
 
$requeteSQL="SELECT them FROM themevideo";
 
$reponseSQL = mysql_query($requeteSQL);
 
 
echo "{\"listeTheme\":[";
 
if (mysql_num_rows($reponseSQL)){
 
$lignes = array();
while ($ligne = mysql_fetch_array($reponseSQL)) {
 $lignes[] = $ligne;
}
echo(json_encode($lignes));
        }
 
echo "]}";
 
 
 
?>

De plus manque t'il un élément à la parti html?

Code:

1
2
3
4
5
6
 
<select name="theme" id="theme" >
 
<option selected="selected" >Sélectionner le théme de la vidéo</option>
 
</select>

A +

17/05/2009, 10h00
emmanuel.remy

Salut,

As tu essayer vérifié ce que te renvoie ton appel AJAX ?
Et as tu essayé de vérifier le passage dans ta boucle for de creationMenu(resultat) ?

ERE
17/05/2009, 11h50
argon

Rebonjour

J'ai mis une alert élace il ne retourne rien lors du teste.

C'est comme ci, le combox n'était pas relier à ajax.

A +

Citation:

C'est comme ci, le combox n'était pas relier à ajax.

Essaie ce petit bout de code et je crois que tu vas comprendre ton problème:
Code:

1 2 3 4 5 6 7 8 <html> <body> <select name="theme" id="theme" onchange="alert('changement ?');"> <option selected="selected" >Sélectionner le théme de la vidéo</option> </select> </body> </html>
ERE

17/05/2009, 20h38
argon

Bonsoir tout le monde

Là, je ne comprends pas, alert ne s'affiche pas.

Le combobox ne peut interagire avec javascript?

A +
17/05/2009, 22h57
emmanuel.remy

Citation:

Envoyé par argon

Bonsoir tout le monde

Là, je ne comprends pas, alert ne s'affiche pas.

Le combobox ne peut interagire avec javascript?

A +

Si tu n'as qu'un seul élément dans ta combo, comment veux tu percevoir l'événement change, alors qu'il ne peut y avoir de changement de l'élément sélectionné ?

ERE

Bonsoir tout le monde

Vue que je ne peux m'attarder sur ce problème, j'ai fais comme ceux ci.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<?php
        require_once('ConnexionMysql.php');
        mysql_select_db($base);
        $requeteSQL="SELECT DISTINCT them FROM themevideo";
 
        $reponseSQL = mysql_query($requeteSQL);
 
                        echo "<select name='theme' id='theme'>";
 
 
                        echo "<option value=''>Sélectionner le théme de la vidéo</option>";
                        while ($donnees = mysql_fetch_array($reponseSQL)) {
                        echo "<option value='".$donnees['them']."'> ".$donnees['them']." </option>";
         }
 
                        echo "</select>";
 
?>

Je m'excuse de vous avoir pris du temps.

A +

18/05/2009, 22h27
emmanuel.remy

C'est aussi une excellente solution. Ajax n'est pas toujours le meilleur choix...

ERE

alimenter une combo a partir de mysql

creation une base nommer cheque et un table nommer tireur

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
CREATE DATABASE `cheque` ;
 
CREATE TABLE `cheque`.`tireur` (
`numero` INT( 4 ) NOT NULL ,
`nom` VARCHAR( 8 ) NOT NULL ,
`prenom` VARCHAR( 8 ) NOT NULL 
) ENGINE = MYISAM 
 
insertion des quelque information 
 
INSERT INTO `test`.`cheque` (
`numero` ,
`nom` ,
`prenom` 
)
VALUES (
'1', 'amine', 'chess'
);
 
INSERT INTO `cheque`.`tireur` (
`numero` ,
`nom` ,
`prenom` 
)
VALUES (
'2', 'arnolem', 'sim'
);
 
INSERT INTO `cheque`.`tireur` (
`numero` ,
`nom` ,
`prenom` 
)
VALUES (
'3', 'simo', 'othman'
);

dans fichier index.php

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
<html>
 
<head>
 
<title>Editer</title>
</head>
 
<body>
 
<?php
    $connect=mysql_connect("localhost", "root", "") or die ("Echec de la connexion au serveur !");
    $select=mysql_select_db("cheque");
    $sql="select prenom from tireur";
    $result=mysql_query($sql) or die ("requete pas compris");
 
 
    echo "<form action='scripts/edite_tir.php' method='post' name='editer' enctype='multipart/form-data'>
    
    <table><tr><td>prenom 
     <select name = 'prenom'>";
 
      while ($row=mysql_fetch_array($result))
      {
 
        echo"<option>$row[0]</option>"; 
 
      }
 
    echo"</select></td></tr> 
</table> 
</form>"; 
?> 
 
 
 
</body>
 
</html>

bonne chance