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

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

Je viens de suivre tes conseils et tout fonctionne maintenant ! Un grand merci à toi, pour le temps que tu as passé à analyser et résoudre mon problème !

Je met de suite le topic en résolu.

**Pahcixam** · 21/11/2006, 13h04

C'est encore moi,

j'ai un autre problème, toujours dans ces select, quand je modifiie la selection du permier select, j'aimerai que le 3ème select soit remis à zéro en attente d'être actualisé à partir du premier choix, car il ne correspond plus du coup.

Je pense que pour les connaisseurs ça ne doit pas être compliqué, mais moi je voix vraiment pas comment faire, et je n'ai trouvé d'explications nul part.

Merci

**Mr N.** · 21/11/2006, 13h38

Comme ceci :

Code :

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

1
2
3
4
5
 
        var len = selectbox.options.length; 
        for (i = len; i >= 0; i--) {
            selectbox.options[i] = null;
        }

**Pahcixam** · 21/11/2006, 14h04

Merci de ta réponse,

mais comme je l'ai dit, j'ai pompé le js sur le tuto,

où dois-je mettre ce bout de code ?

**Mr N.** · 21/11/2006, 14h21

Ce n'est pas le tout de pompé un code, il faut aussi le comprendre

**Pahcixam** · 21/11/2006, 17h36

Je sais d'ailleur j'ai bien du le comprendre pour l'adapter à mon code.

Donc je pense qu'il faut ajouter ce code à la fin de chaque fonction de mon js, sauf la première c'est ça ?

**Pahcixam** · 21/11/2006, 17h58

Bon j'ai cherché, et finalement, j'ai ajouté ce code:

Code :

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

1
2
3
var len = sel.options.length; 
for (i = len; i >= 0; i--) {
sel.options[i] = null;

juste après celui-ci dans mon code:

Code :

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

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

Mais au lieu de remettre mon select à zéro, celui-ci est effacé (normal à cause du null) dès que mon onchange du select suivant est activé.

Donc il doit encore y avoir une subtilité que je n'ai pas vu. Un peu d'aide serait le bienvenue

Merci

**Pahcixam** · 21/11/2006, 18h42

Bon, j'ai finalement compris le fonctionnement du code, et mon select et bien vidé, mais comment je fait pour lui attribuer la valeur Aucun après l'avoir vidé ? J'ai essayé ça:

Code :

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

1
2
3
4
5
6
 
		var len = nb.options.length; 
		for (i = len; i >= 0; i--) {
		nb.options[i] = null;
		nb.options[0].text="Aucun";
		}

Mais ça reste vide, et en enlevant nb.options[i] = null; , la première option devient bien Aucun mais le rest n'est pas vidé.

Merci

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

J'ai finit par trouver mon erreur, j'ai remlplace le

Code :

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

for (i = len; i >= 0; i--) {

par

Code :

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

for (i = len; i > 0; i--) {

et tout marche

Merci pour votre aide

**Snowboarder69** · 21/11/2006, 19h40

Salut,
ce code n'a pas besoine d'être dans ta boucle:

nb.options[0].text="Aucun";

Pour chaque élément de ton select tu réffecte le premier.
Un seul fois ça suffit... met le après

**Mr N.** · 21/11/2006, 19h42

Ce n'est pas la bonne méthode, mais bravo pour la persévérence

Je te conseille de faire plutot comme ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
//{{{ On vide la selectbox
var len = nb.options.length; 
	for (i = len; i >= 0; i--) {
	nb.options[i] = null;
}
//}}}
 
//{{{ On rajoute l'option par défaut
var default_option = new Option('Aucun', '-1');
nb.appendChild(default_option);
//ou alors nb.options[] = default_option; ?
//}}

Ainsi ton code est plus lisible (d'abord on vide, ensuite on ajoute l'option), optimal (pas d'affectation de "Aucun" à chaque tour de boucle) et surtout plus juste (Tu changes peut-être .text, mais tu oublies .value...)

**Pahcixam** · 21/11/2006, 20h45

Bon, et bien j'aurai pas perdu ma journée moi,

donc du coup étant sur une bonne lancé, j'ai ajouté une autre petit fonction, vous la verrez surement, et je me demande si c'est la bonne méthode cette fois encore.

Voici le code de ma fonction remixée

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
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;
		//On remet le select 3 à zéro
		//{{{ On vide la selectbox
		var len = nb.options.length; 
		for (i = len; i >= 0; i--) {
		nb.options[i] = null;
		}
		//}}}
 
		//{{{ On rajoute l'option par défaut
		var default_option = new Option("Choisir le nombre d'employés", "-1");
		nb.appendChild(default_option);
		//ou alors nb.options[] = default_option; ?
		//}}
		/*var len = nb.options.length; 
		for (i = len; i > 0; i--) {
		nb.options[i] = null;
		nb.options[0].text="Choisir le nombre d'employés";
		}*/
		if(sel.options.selectedIndex == 0){
		var len2 = pr.options.length; 
		for (i = len2; i > 0; i--) {
		pr.options[i] = null;
		pr.options[0].text="Choisir une surface";
		}
	}
}
}
 
// 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');
				nb = document.getElementById('nb_personnes');
				pr = document.getElementById('prix');
				idsecteur = sel.options[sel.selectedIndex].value;
				xhr.send("idSecteur="+idsecteur);
 
 
			}

Et la partie "faite-maison":

Code :

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

1
2
3
4
5
6
7
8
 
if(sel.options.selectedIndex == 0){
var len2 = pr.options.length; 
for (i = len2; i > 0; i--) {
pr.options[i] = null;
pr.options[0].text="Choisir une surface";
}
}

Merci d'avance

**Snowboarder69** · 21/11/2006, 21h47

Je commence a être perdu, est-ce que tu peut nous mettre l'ordre des dépendances de tes select, stp.

Ce qui est marrant, c'est que tu veux faire 2 fois la même chose et que tu refait le même erreur qu'avant. Ton code fait maison ça doit être la meme que celui d'avant mais en changeant juste le nom du select.

De plus je ferait la remise à zéro avant la requette Ajax pour le temps de réponse ou au cas oû le serveur est un petit prob.

Dis-moi, Mr N. , il n'est pas possible de faire comme ça pour remmettre le select à Zéro?

Code :

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

document.getElementById('prix').innerHTML = "<option value='-1'>Choisir une surface</option>";

**Pahcixam** · 21/11/2006, 21h57

Bon, alors voici l'ordre de dépendence de manière schémantique:

select 1 --> nom js = surface
select 2 --> nom js = prix (et pr) --> dépend du premier
select 3 --> nom js = nb_personnes (et nb)--> dépend du 2nd

Le deuxième code a la mêmez fonctionnalité c'est vrai, mais il agit différemment, enfin je crois.

Autre problème que je viens de voir, sous IE , quand je selctionne une option du premier select, les autres sont vidés.

Voilà

[AJAX] Actualisation de select

JavaScript

Discussions similaires

Partager

Partager