Discussion :

[samuel4256]

Bonjour, j'ai une liste déroulante et je voudrais qu'en fonction de ce que je choisis dans cette liste une table soit rempli avec différentes valeurs mais quand je choisi une option rien ne se passe et je n'arrive pas à comprendre pourquoi. Qulqu'un peut m'aider svp ?

La liste :

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
<form name = "formulaire">
          <select name = "formationVoulue" size = "1" onClick="envoiRequete()">' ;
 
		  foreach($bdd->afficherNomSFormationS() as $key=>$formation)
		  {
			echo'<option>'.$formation.'</option>' ;
		  }
 
		  echo'
		  </select>
	  </form><br><br>
	<!--div id="formationChoisie" style="width:850px ; height:220px ;display:block ; background-color:red"></div-->
	<table id="formationChoisie" border="1" width="45%">
			  <tr><td width="33%" align="center">Sequence</td>
			  <td width="33%" align="center">Cours</td>
			  <td width="33%" align="center">Ressource</td></tr>
	</table>

Requete Ajax :

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
function envoiRequete()
{
	objetRequete = new XMLHttpRequest() ;
 
    for (i=1 ; i<=16 ; i++)
        {
            if (this.document.formulaire.formationVoulue.options[i-1].selected)
                {
                    objetRequete.open("GET", "/groupoffice-com-3.5.7/modules/testmodule/classes/FormationVoulue.php?form="+i, true) ;
                    objetRequete.onreadystatechange = traiteReponse ;
                    objetRequete.send(null) ;
                }
        }
}
 
function traiteReponse()
{
	objetRequete = new XMLHttpRequest() ;
    if (objetRequete.readyState == 4)
        {alert("aaa") ;
            document.getElementById("formationChoisie").innerHTML = objetRequete.responseText ;
        }
}

FormationVoulue.php

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<?php
 
    $choix = $_GET['form'] ;
	$_SESSION['choix'] = $choix ;
 
 foreach($bdd->afficherParcours() as $key=>$parcours)
		{
			echo'<tr><td width="25%" align="center">'.$parcours['Sequence'].'</td>';
			 echo'<td width="25%" align="center">'.$parcours['Cours'].'</td>'; 
			echo'<td width="25%" align="center">'.$parcours['NomRessource'].'</td></tr>'; 
                }

[micetf]

Bonjour,

Plutôt que l'événement onclick sur le select, j'aurais utilisé l'événement onchange.
Ensuite, j'aurais utilisé l'attribut value des balises option comme ça, dans le javascript, j'aurais eu accès directement à l'option choisie :

Code :

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

this.document.formulaire.formationVoulue.value

Enfin, ta gestion de la requête Ajax ne me parait pas correcte :
Les fonctions envoiRequete et traiteReponse devraient manipuler le même objet xhr (objetRequete), ce qui n'est pas le cas.

Je te propose un squelette que tu peux peut-être adapter à ton problème :
Liste déroulante à faire générer par le 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
 
<form name = "formulaire">
<select name = "formationVoulue" size = "1" onchange="envoiRequete()">
<option value="0">-----------</option>
<option value="1">Formation 1</option>
<option value="2">Formation 2</option>
<option value="3">Formation 3</option>
<option value="4">Formation 4</option>
<option value="5">Formation 5</option>
<option value="6">Formation 6</option>
</select>
</form>
<br/>
<br/>
 
<table id="formationChoisie" border="1" width="45%">
  <tr>
    <td width="33%" align="center">Sequence</td>
    <td width="33%" align="center">Cours</td>
    <td width="33%" align="center">Ressource</td>
  </tr>
</table>

Requête Ajax :

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
<script type="text/javascript">
function getXhr(){
	var xhr = null; 
	if(window.XMLHttpRequest) // Firefox et autres
		xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject){ // Internet Explorer 
		try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
	}
	else { // XMLHttpRequest non supporté par le navigateur 
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
	   xhr = false; 
	} 
	return xhr;
}
function envoiRequete()
{
  var xhr = new XMLHttpRequest() ;
  var i=this.document.formulaire.formationVoulue.value;
  xhr.open("GET", "formationVoulue.php?form="+i, true) ;
  xhr.onreadystatechange = function() {
    document.getElementById("formationChoisie").innerHTML = xhr.responseText ;
  }
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  xhr.send(null) ;
}
</script>

Traitement de la requete Ajax :

Code :

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

1
2
3
4
5
6
7
8
9
10
<?php 
$choix = $_GET['form'] ;
// A remplacer par l'accès à la BDD
$fv=array(0=>array("Séquence","Cours","Ressource"),1=>array("s1","c1","r1"),2=>array("s2","c2","r2"),3=>array("s3","c3","r3"),4=>array("s4","c4","r4"),5=>array("s5","c5","r5"),6=>array("s6","c6","r6"));
?>
<tr>
<td width="25%" align="center"><?php echo $fv[$choix][0]; ?></td>
<td width="25%" align="center"><?php echo $fv[$choix][1]; ?></td>
<td width="25%" align="center"><?php echo $fv[$choix][2]; ?></td>
</tr>

Fred

[samuel4256]

Ca fonctionne merci beaucoup.