Mise à jour de champs

Version imprimable

Voir 40 message(s) de cette discussion en une page

10/01/2006, 12h33
siddh

verifie ton id (majuscules/minuscules)

remet ton code ici s'il te plait

Bon alors ça a avancé depuis que j ai changé les ' par des " dans cette ligne :

Code:

document.getElementById("machine").innerHTML = lesoptions;

Voici mon code ... Ensuite j expliquerai ce qui arrive maintenant :

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
69
70
71
72
73
74
 
<?php
?>
<html>
	<head>
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
		<script type='text/JavaScript'>
			var xhr = null;
                        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; 
			} 
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				if(xhr){
					// 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){
							lesoptions = xhr.responseText;
								alert(document.getElementById("machine").innerHTML);
                                                        // On se sert de innerHTML pour rajouter les options a la liste
							document.getElementById("machine").innerHTML = lesoptions;
							alert(document.getElementById("machine").innerHTML);
						}
					}
 
					// Ici on va voir comment faire du post
					xhr.open("POST","species.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('lieu');
					idlieu = sel.options[sel.selectedIndex].value;
					xhr.send("idLieu="+idlieu);
				}
				else // xhr n'existe pas
					alert("Houston on a un problème !");
 
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Lieu</label>
				<select name='lieu' id='lieu' onchange='go()'>
					<option value='-1'>choisir un lieu</option>
					<option value='1'>France</option>
					<option value='2'>Angleterre</option>
				</select>
				<label>Machines</label>
				<select name='machine' id='machine'>
					<option value='-1'>Choisir une machine</option>
				</select>
			</fieldset>
		</form>
	</body>
</html>
           <?php ?>

et species.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
        if(isset($_POST['idLieu'])){
                mysql_connect("localhost","root","pass");
                mysql_select_db("maintenance");
                $res = mysql_query("SELECT id_machine,nom FROM machine
                        WHERE id_lieu='".$_POST['idLieu']."' ORDER BY id_machine");
 
                while($row = mysql_fetch_assoc($res)){
                        echo "<option value='".$row['id_machine']."'>".$row['nom']."</option>";
                }
                mysql_close();
        }
?>

Maintenant l alerte s affiche. Comme tu peux le voir j en ai mis deux une avant l affectation et une autre après.
LA premiere m affiche "<OPTION value=-1 ..." donc tout va bien
La seconde, et là c est bizarre : "Paris </OPTION><OPTION>..."
Comme tu vois il me zappe la balise <OPTION> avant Paris ... et du coup c est plutot logique que ça ne fonctionne pas ! Par contre pourquoi la zappe t il ???

10/01/2006, 12h54
siddh

et un alert de lesoptions ou de xhr.responseText t affiches bien tout, ca te mange rien ?
10/01/2006, 12h57
Mil

Oui, j ai bien tout dans lesoptions ...
10/01/2006, 13h03
siddh

met un

Code:

<div id='mondiv'></div>

dans ta page et fais le innerHTML sur lui pour voir ce que ça donne

c'est quand meme bien bizarre :evil:
10/01/2006, 13h05
Mil

J ai pas bien compris ce que tu voulais que je fasse ... Moi etre un peu blonde :wink:
J ai remarqué un autre comportement bizarre ... Mais c est peut etre lié .. Qd je tente de changer à nouveau le lieu je n arrive même pas aux alerts mais je me dis que c est peut etre parce que ça a merdé avant ...

Bon j ai fait ça :

Code:

1
2
3
4
5
6
lesoptions = xhr.responseText;
 
							// On se sert de innerHTML pour rajouter les options a la liste
							//document.getElementById("machine").innerHTML=lesoptions;
							document.getElementById("mondiv").innerHTML=lesoptions;
							alert(document.getElementById("mondiv").innerHTML);

Alors les 3 villes s affichent bien à l ecran mais mon alert apparait tt de même sans le "<OPTION ...".

10/01/2006, 13h09
Mil

Et je confirme, je ne peux choisir le lieu qu une seule fois !
10/01/2006, 13h12
siddh

alors,
en fait c'etait pour voir si c'etais lié au select ou pas. (oui je sais c'est un peu tiré par les cheveux).

Pour le re-changement, ca vient peut etre de la oui.

Et donc je résume :
sous ffx ca marche et sous ie il mange juste le premier <option> quand on fait le innerHTML alors qu'il existe avant.
10/01/2006, 13h17
Mil

oui il me vire la premiere balise <OPTION value=1> ...Mais seulement sous Internet Explorer !!!
Sous Firefox no soucy ...
10/01/2006, 14h35
siddh

bon je regarde ça, je revient ce soir ;)
10/01/2006, 14h39
Mil

OK ... Merci beaucoup ...
J essaye de voir moi aussi de mon coté ...

Bon aprem'

bon alors, c'est un bug ie qui n'accepte pas de innerHTML dans un select :twisted:

du coup, il faut mettre un div autour du select et faire le innerHTML dessus et renvoyer la balise select depuis php :

Code:

1
2
3
4
5
<div id='machine' style='disply:inline'>
<select name='machine'>
      <option value='-1'>Choisir une machine</option>
</select>
</div>

et donc dans le javascript :

Code:

1
2
3
4
if(xhr.readyState == 4 && xhr.status == 200){
        leselect = xhr.responseText;
        document.getElementById("machine").innerHTML = leselect;
}

et dans la page php:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<?php
   if(isset($_POST['idLieu'])){
      mysql_connect("localhost","root","pass");
      mysql_select_db("maintenance");
      $res = mysql_query("SELECT id_machine,nom FROM machine
         WHERE id_lieu='".$_POST['idLieu']."' ORDER BY id_machine");
 
      echo "<select name='machine'>";
      while($row = mysql_fetch_assoc($res)){
         echo "<option value='".$row['id_machine']."'>".$row['nom']."</option>";
      }
      echo "</select>";
      mysql_close();
   }
?>

11/01/2006, 09h54
Mil

Hello !

Bon effectivement ça fonctionne mais y a toujours un hic ...
Je ne peux faire qu une seule fois cette opération car ensuite ça ne marche plus ! Je pensais que ça venait du bug mais a priori non ...

ah oui pardon :D

j'ai oublié un truc, toujours a cause de ie :

tu transforme

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
      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;
         }

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
 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;
         }
}

et
tu transforme

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
function go(){
            if(xhr){
               // 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){
                     lesoptions = xhr.responseText;
                        alert(document.getElementById("machine").innerHTML);
                                                        // On se sert de innerHTML pour rajouter les options a la liste
                     document.getElementById("machine").innerHTML = lesoptions;
                     alert(document.getElementById("machine").innerHTML);
                  }
               }
 
               // Ici on va voir comment faire du post
               xhr.open("POST","species.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('lieu');
               idlieu = sel.options[sel.selectedIndex].value;
               xhr.send("idLieu="+idlieu);
            }
            else // xhr n'existe pas
               alert("Houston on a un problème !");
 
         }

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
 
function go(){
            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){
                     lesoptions = xhr.responseText;
                        alert(document.getElementById("machine").innerHTML);
                                                        // On se sert de innerHTML pour rajouter les options a la liste
                     document.getElementById("machine").innerHTML = lesoptions;
                     alert(document.getElementById("machine").innerHTML);
                  }
               }
 
               // Ici on va voir comment faire du post
               xhr.open("POST","species.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('lieu');
               idlieu = sel.options[sel.selectedIndex].value;
               xhr.send("idLieu="+idlieu);
 
         }

on le reconstruit a chaque fois 8O

j'ai pas encore trouvé d'aurte solution,
dire que dans firefox tout marche bien du premier coup .....

11/01/2006, 12h14
Mil

Perfect !
Merci beaucoup Siddh !!!

A moi de faire en sorte maintenant que ça marche pour plusieurs champs ...
C est cool tu m as bien aidée ...

Encore merdi !
11/01/2006, 17h11
siddh

de rien
si tu as d'autres questions, créé un nouveau sujet par contre ;)

Voir 40 message(s) de cette discussion en une page