Mise à jour de champs

**siddh** · 10/01/2006, 12h33

verifie ton id (majuscules/minuscules)

remet ton code ici s'il te plait

**Mil** · 10/01/2006, 12h50

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

Code :

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

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

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

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
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 :

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

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 ???

**siddh** · 10/01/2006, 12h54

et un alert de lesoptions ou de xhr.responseText t affiches bien tout, ca te mange rien ?

**Mil** · 10/01/2006, 12h57

Oui, j ai bien tout dans lesoptions ...

**siddh** · 10/01/2006, 13h03

met un

Code :

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

<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

**Mil** · 10/01/2006, 13h05

J ai pas bien compris ce que tu voulais que je fasse ... Moi etre un peu blonde

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

**Mil** · 10/01/2006, 13h08

Bon j ai fait ça :

Code :

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

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

**Mil** · 10/01/2006, 13h09

Et je confirme, je ne peux choisir le lieu qu une seule fois !

**siddh** · 10/01/2006, 13h12

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.

**Mil** · 10/01/2006, 13h17

oui il me vire la premiere balise <OPTION value=1> ...Mais seulement sous Internet Explorer !!!
Sous Firefox no soucy ...

**siddh** · 10/01/2006, 14h35

bon je regarde ça, je revient ce soir

**Mil** · 10/01/2006, 14h39

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

Bon aprem'

**siddh** · 10/01/2006, 18h16

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

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

Code :

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

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 :

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

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 :

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
 
<?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();
   }
?>

**Mil** · 11/01/2006, 09h54

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

**siddh** · 11/01/2006, 11h29

ah oui pardon

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

tu transforme

Code :

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

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;
         }

en

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
 
 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 :

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
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 !");
 
         }

en

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

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

**Mil** · 11/01/2006, 12h14

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 !

**siddh** · 11/01/2006, 17h11

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

Mise à jour de champs

JavaScript

Vue hybride

Discussions similaires

Partager

Partager