[AJAX] Actualisation de select

**Pahcixam** · 19/11/2006, 21h47

Bonjour,

je me suis mis il n'y a pas longtemps à l'ajax dans mes codes php. J'ai d'ailleur suivit un tuto du site. Seulement j'ai un problème. Mon code affiche trois select de suite, le premier actualise le second qui lui même actualise le 3ème (j'espère que c'est claire). A la première selction tout va bien, mais dès que je change d'option dans un select qui a déjà actualisé le suivant, je me retrouve avec un select dans un select, et ainsi de suite à chaque actualisation !! Ce qui rend le code pas très fonctionnel. Je voudrai donc savoir si je dois ajouter une condition pour eviter ce problème, sachant que je connait pas trop le JS.

Voici mes sources:

ajax.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
63
64
65
66
67
68
			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; 
				} 
			}
 
			/**
			* Ajax qui définit les surfaces et les prix
			*/
			function prix_surface(){
				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('prix').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","include/game/ajax_prix.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 l'auteur
				sel = document.getElementById('secteur');
				idsecteur = sel.options[sel.selectedIndex].value;
				xhr.send("idSecteur="+idsecteur);
			}
			/**
			* Ajax qui définit le personnel possible
			*/
			function personnel(){
				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('nb_personnes').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","include/game/ajax_personnel.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 l'auteur
				sel = document.getElementById('prix');
				idprix = sel.options[sel.selectedIndex].value;
				xhr.send("idPrix="+idprix);
			}

index.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
48
49
50
51
52
53
54
55
56
57
58
59
 
<?php
if(isset($_SESSION['id'])){
include 'config.php';
echo'<script type="text/javascript">';
include 'include/ajax.js';
echo '</script>';
//Ici on fait les opérations de premières visite | etape 1
 
	if(($_SESSION['initialise'] == '0') && (!isset($_POST['ok']))){
	echo '
	<table border=0 align="justify">
	<tr><td>
	<form action="index.php?cat=game&act=index" name="choix_init" method="POST">
	<INPUT TYPE="radio" CHECKED NAME="choix" VALUE="1"> Je veux creer mon entreprise<br>
	<INPUT TYPE="radio" NAME="choix" VALUE="2"> Je veux devenir salarier<br>
	<INPUT TYPE="radio" NAME="choix" VALUE="3"> Je veux travailler pour la mairie<br><br>
	<input type="submit" name="ok" value="Rejoindre la ville">
	</form>
	</td></tr>
	</table>';
 
	}
 
	//Ici on fait les opérations de premières visite | etape 2
	if(($_SESSION['initialise'] == '0') && ($_POST['ok'] == 'Rejoindre la ville')){
 
		if($_POST['choix'] == 1){
		echo "<form name='entreprise'>
		<select name='secteur' id='secteur' onchange='prix_surface()'>
		<option value='-1'>Aucun</option>";
 
		//Secteur d'activité ||||||||||||||||||||||||||||||||
		for($i=0;$i<sizeof($activites);$i++)
		{
		echo "<option value='".$activites[$i]."'>".$activites[$i]."</option>";
		echo "\n";
		} 
		echo "</select>\n\n";
 
		//Surface |||||||||||||||||||||||||||||
 
		echo "<div id='prix' style='display:inline'>
		<select name='prix' id='prix' onchange='personnel()'>";
		echo "<option value='-1'>Choisir une surface</option>";
		echo "</select>\n\n</div>";
		echo "<div id='nb_personnes' style='display:inline'>
		<select name='nb_personnes' id='nb_personnes'>";
		echo "<option value='-1'>Choisir le nombre d'employés</option>";
		echo "</select>\n\n</div>";
		echo "</form>";		
		}
		}
 
 
	}
 
}
?>

ajax_prix.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
 
<?php
include '../../config.php';
        echo "<select name='prix' id='prix' onchange='personnel()'>";
        if(isset($_POST["idSecteur"])){
                for($i=0;$i<sizeof($surface_dispo);$i++)
                {
                $prix = $surface_dispo[$i] * constant('PRIX_'.$_POST['idSecteur']);
                echo '<option value="'.$surface_dispo[$i].'">'.$surface_dispo[$i].' m&sup2;&nbsp;&nbsp;&nbsp;&nbsp;-->
                &nbsp;&nbsp;&nbsp;&nbsp;Prix: '.$prix.' pk </option>';
                echo "\n";
                } 
                }
                echo "</select>\n\n";
?>

ajax_personnel.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
 
<?php
include '../../config.php';
        echo "<select name='nb_personnes' id='nb_personnes'>";
        if(isset($_POST["idPrix"])){
                for($i=1;$i<=($_POST["idPrix"]*0.8);$i++)
                {
                echo '<option value="'.$i.'">'.$i.' employ&eacute;(s)</option>';
                echo "\n";
                } 
                }
                echo "</select>\n\n".$_POST["idPrix"];
 
?>

Voila merci.

**julien.63** · 20/11/2006, 16h25

peut être que tu pourrais essayer de ne pas viser toujours le même élément html
. Au lieu d'avoir seulement.

Code :

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

document.getElementById('prix').innerHTML = leselect;

Tu pourrais avoir trois div qui contiennent chacun un select. Et en fonction de l'étape à laquelle tu te trouves tu vises le div approprié (j'espère moi aussi être clair

). ça aura l'avantage de séparé ton code.

**Pahcixam** · 20/11/2006, 16h29

Salut,

tout d'abord, merci de ta réponse.

En ce qui concerne les div, j'ai bien deux div pour les selects géré par ajax, le premier étant gérer uniquement par php à l'execution du script.

Après je sais pas si j'ai compris, mais une étape veut dire un changement de valeur dans le select ? En gros au onchange ?

Si c'est ça, je pense que c'est déjà ce que j'ai fait mais bon ..

Pourrais tu donner un exemple ou autre ?

Merci

**Snowboarder69** · 20/11/2006, 21h32

Je pense que ton erreur viens de là:

echo "<div id='prix' style='display:inline'>
<select name='prix' id='prix' onchange='personnel()'>";

Ton id est censé être unique et tu le met à deux endroit...

++

**Pahcixam** · 20/11/2006, 22h30

Merci de ta réponse.

J'ai fait des test et l'erreur dois effectivement ce trouver par la car voici les résultat:

quand je change les id des div, j'ai tout de suite un select dans le premier select, et quand je change l'id dans le select (donc dans index.php, ajax_personnel.php, et ajax_prix.php, mon 3 ème select n'est plus alimenté.

Alors as-tu une idée du problème ?

**Snowboarder69** · 20/11/2006, 23h02

Ton idée est de changer l'interieur des "select" et non de le refaire entierement...

- Change le nom de tes div car ce n'est pas eux que tu utilises dans ton javascript.
- Supprime ces lignes:

Code :

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

1
2
3
echo "<select name='prix' id='prix' onchange='personnel()'>";
...
echo "</select>\n\n";

comme ça tu ne renvois que les options.

--------

Sinon change le nom des Select mais fait aussi attention à ce que tu met à jour dans ton JS et pas que le PHP.

[AJAX] Actualisation de select

JavaScript

Vue hybride

Discussions similaires

Partager

Partager