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

**argon** · 04/05/2009, 09h13

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 +

**andry.aime** · 04/05/2009, 09h48

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

**argon** · 15/05/2009, 21h23

Bonsoir tout le monde

Voici ce que j'ai fais.

Partie html:

Code :

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

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

partie js:

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
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 :

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
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 +

**emmanuel.remy** · 15/05/2009, 22h17

Salut,

Code :

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

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 :

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

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 :

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

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

**argon** · 16/05/2009, 07h52

Bonjour tout le monde

Rien ne s'affiche.

Voici les modiffications.

fichier js

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
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 :

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
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 +

**Bovino** · 16/05/2009, 09h03

Code :

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

var parametres = "anticache="+temps;

Il manquait la quote ouvrante !

**argon** · 16/05/2009, 09h53

Rebonjour

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
 
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 +

**Bovino** · 16/05/2009, 11h32

Il faut transmettre l'objet xhr à ton callback :

Code :

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

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 :

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

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

et

Code :

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

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); 
	}
}

**argon** · 17/05/2009, 09h54

Bonjour tout le monde

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

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
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 :

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

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 +

**emmanuel.remy** · 17/05/2009, 10h00

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

**argon** · 17/05/2009, 11h50

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 +

**emmanuel.remy** · 17/05/2009, 12h02

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 :

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

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

**argon** · 17/05/2009, 20h38

Bonsoir tout le monde

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

Le combobox ne peut interagire avec javascript?

A +

**emmanuel.remy** · 17/05/2009, 22h57

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

**argon** · 18/05/2009, 21h18

Bonsoir tout le monde

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

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
 
<?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 +

**emmanuel.remy** · 18/05/2009, 22h27

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

ERE

**chess12** · 14/06/2009, 22h12

creation une base nommer cheque et un table nommer tireur

Code SQL :

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
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 PHP :

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
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

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

AJAX

Discussions similaires

Partager

Partager