[AJAX] Listes liées

**@po©alypse** · 12/09/2011, 13h59

Bonjour,

J'ai parcouru les différents sujet sur ce type de problème mais je n'arrive pas à corriger le mien

.

Sur ma page j'ai 4 items de sélection:
- Compétition
- Poule
- Equipe A
- Equipe B

Une équipe appartient à une poule.
Une poule Appartient à une compétition.
Une compétition contient n poules.

J'aimerai que les équipes soient actualisées en fonction du select de la poule.
De même j'aimerai que les poules soient actualisées en fonction de la compétition.

Le problème est que lorsque je change la sélection de la compétition le select de la poule est bien changé mais pas celui des équipes.
Autre problème encore plus incompréhensible pour moi qui suit novice en développement web: lorsque je sélectionne une poule les équipes se mettent bien à jour, cependant si je change la compétition (De A en B, et que je reviens aussitôt en A) les équipes cette fois ne sont plus mise à jour lors du changement de la poule....

Voici mon js ainsi que mes select :

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
 
<script type=\"text/javascript\">
		/*****METHODE POUR L'AJAX*****/
		var xhr = null; 
 
		   function getXhr(){
			  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; 
			  } 
		   }
 
		/**
		* Fonctions qui seront appelées sur le click du select competition
		*/
		function change_equipe()	{
		  //alert(\"equipe\");
		  getXhr();
		  // On défini ce qu'on va faire quand on aura la réponse
		  xhr.onreadystatechange = function(){
						// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
						if(xhr.readyState == 4 && xhr.status == 200){
							leselect = xhr.responseText;
							// On se sert de innerHTML pour rajouter les options a la liste
							document.getElementById('equipe_A').innerHTML = leselect;
							document.getElementById('equipe_X').innerHTML = leselect;
						}
		  }		  
		  // Ici on va voir comment faire du post
		  xhr.open(\"POST\",\"select_equipe.php\",true);
		  // ne pas oublier ça pour le post
		  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');		  
 
		  // ne pas oublier de poster les arguments
		  // ici, l'id de la poule
		  sel = document.getElementById('select_poule');
		  id_poule = sel.options[sel.selectedIndex].value;
		  //alert(\"id: \"+id_poule);
		  xhr.send(\"id_poule=\"+id_poule);
		}
 
		function change_poule(){
		  //alert(\"poule\");
		  getXhr();
		  // On défini ce qu'on va faire quand on aura la réponse
		  xhr.onreadystatechange = function(){
						// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
						if(xhr.readyState == 4 && xhr.status == 200){
							leselect = xhr.responseText;
							// On se sert de innerHTML pour rajouter les options a la liste
							document.getElementById('poule').innerHTML = leselect;
						}
		  }
 
		  // Ici on va voir comment faire du post
		  xhr.open(\"POST\",\"select_poule.php\",true);
		  // ne pas oublier ça pour le post
		  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		  // ne pas oublier de poster les arguments
		  // ici, l'id de la compétition
		  sel = document.getElementById('competition');
		  id_competition = sel.options[sel.selectedIndex].value;
		  xhr.send(\"id_competition=\"+id_competition);
		  //alert(\"id: \"+id_competition);
		  //change_equipe();
		}
	</script>
	<div id=\"titre_contenu\">".$titre."</div>
	".$form."
		<table class=\"simple\">
			<tr>
			   <td>Date (JJ/MM/AAAA)</td>
			   <td><input type=\"text\" name=\"date_resultat\" size=\"25\" maxlength=\"10\" value=\"".$date_resultat."\" /></td>
			</tr>
 
			<tr>
			   <td>Competition</td>
			   <td>
			   	<select name=\"competition\" id=\"competition\" onchange=\"change_poule()\">".$options_competitions."</select>
			   </td>
			</tr>
 
			<tr>
			   <td>Poule</td>
			   <td id=\"poule\" >
			    <select name=\"poule\" id =\"select_poule\" onchange=\"change_equipe()\">".$options_poules."</select>
			   </td>
			</tr>
 
			<tr>
			   <td>Equipe A</td>
			   <td>
			    <select name=\"equipe_A\" id=\"equipe_A\">".$options_equipes."</select>
			   </td>
			</tr>
 
			<tr>
			   <td>Equipe X</td>
			   <td>
			    <select name=\"equipe_X\" id=\"equipe_X\">".$options_equipes."</select>
			   </td>
			</tr>
 
		</table>
		<div id=\"submit_add\">
			".$hidden."
			<input type=\"submit\" name=\"save\" value=\"Valider\" />
		</div>
	</form>

select_poule.php qui est utilisée lors de la sélection de la compétition:

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
 
<?php
	session_start();
	include("fonction.php");
	$connexion=connexion();
 
	$id_competition=$_POST['id_competition'];
 
	$select_poules = "SELECT `id_poule`, `libelle` FROM `poules` WHERE `id_competition` = '".$id_competition."'";
	$select_p = select_gen($select_poules, $connexion);
 
	$options_poules = "";
	for($i=0; $i<count($select_p); $i++)	{
 
		$options_poules .= "
		<option value=\"".$select_p[$i]->id_poule."\" >".$select_p[$i]->libelle."</option>";
	}
 
	echo "<select name=\"poule\" id =\"poule\" onchange=\"change_equipe()\">".$options_poules."</select>";
?>

select_equipe.php qui est utilisée lors de la sélection de la poule:

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
 
<?php
	session_start();
	include("fonction.php");
	$connexion=connexion();
 
	$id_poule=$_POST['id_poule'];
 
	$select_poule = "SELECT `id_equipe` FROM `poule_equipe` WHERE `id_poule` = '".$id_poule."'";
	$select_p = select_gen($select_poule, $connexion);
 
	$options_equipes = "";
	for($i=0; $i<count($select_p); $i++)	{
 
		$select_equipes = "SELECT `libelle` FROM `equipes` WHERE `id_equipe` = '".$select_p[$i]->id_equipe."'";
		$select_e = select_gen($select_equipes, $connexion);
 
		$options_equipes .= "
		<option value=\"".$select_p[$i]->id_equipe."\" >".$select_e[0]->libelle."</option>";
	}
	echo $options_equipes;
?>

J'attends avec impatience votre aide

Invité · 12/09/2011, 23h55

Bonjour,
normalement, si tu suis cette méthode, ca devrait aller.

**@po©alypse** · 13/09/2011, 12h37

Envoyé par jreaux62

Bonjour,
normalement, si tu suis cette méthode, ca devrait aller.

Merci.
J'avais vu cette discussion le problème est que je ne voulais pas tout chambouler et je me suis dis que quelqu'un de plus apte que moi aurais vu le problème et m'aurait aidé à le corriger

Invité · 13/09/2011, 13h05

A priori, c'est toi le plus apte à comprendre et à corriger ton propre code.

[AJAX] Listes liées

AJAX

Vue hybride

Discussions similaires

Partager

Partager