[AJAX] Actualisation de select

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

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, 15h25

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, 15h29

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, 20h32

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, 21h30

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, 22h02

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