[AJAX] Actualisation de select
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:
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:
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:
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² -->
Prix: '.$prix.' pk </option>';
echo "\n";
}
}
echo "</select>\n\n";
?> |
ajax_personnel.php
Code:
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é(s)</option>';
echo "\n";
}
}
echo "</select>\n\n".$_POST["idPrix"];
?> |
Voila merci.
