Discussion :

[pierre50]

Ds le code ci-dessous, je saisis des caractères dans la boite ID_ville
A chaque frappe, (onkeyup), la fonction alors est appelée.(affichage de villes commencant par les caractères saisis)

Je voudrais simplement appeler la fonction uniquement à partir de 4 caractères saisis. Je bute sur la syntaxe. Merci à tous.

Code :

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

1
2
3
4
5
6
7
8
9
10
<INPUT type="text" ID="ID_VILLE" value="" name="nom" />
<SCRIPT TYPE="text/javascript" LANGUAGE="Javascript"> 
var text=document.getElementById("ID_VILLE");
 
function alors() { 
.......
} 
 
text.onkeyup=alors;
</SCRIPT>

[Bovino]

Code :

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

1
2
3
4
5
text.onkeyup=function(){
    if(text.value.length>3){
        alors();
    }
}

[pierre50]

Un grand merci !

Juste un point...et idependamment de la longueur, mon script fonctionne parfaitement sour Firefox et pas sous IE.

onkeyup ne serait-il pas reconnu ?

[Bovino]

Si IE reconnait onkeyup
Essaye peut-être d'éviter les majusculres :

Code :

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

<input type="text" id="ID_VILLE" value="" name="nom" />

[pierre50]

Merci pour votre patience...

Le problème persiste en minuscule...
Je ne vois pas comment utiliser autre chose qu'un onkeyup

Dès qu'un caractère est saisie dans ma boite, je dois déclencher ma fonction alors()
Quelle fonction compatible avec tous les navigateurs pour réagir à la frappe d'un caractère saisi ?

[Bovino]

Le problème ne vient pas de onkeyup.
En revanche, il faudrait que tu montres un peu plus de code (et que tu nous expliques un peu ce qui ne fonctionne pas avec IE) pour que l'on puisse t'en dire plus !

[pierre50]

Volià tout le code.
On saisis un nom de ville et à partir de la troisième lettre, et pour chaque caractère frappé, on appelle la fonction alors() qui en ajax interroge une table de codes postaux. Un fichier xml est généré puis parsé sur le client pour extraction du code postal. (Il y a plus simple, mais c'est exercice imposé )

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
<script type="text/javascript" src="prototype.js"></script>
<input type="text" id="ID_VILLE" value="" name="nom" />
<SCRIPT TYPE="text/javascript" LANGUAGE="Javascript"> 
var text=document.getElementById("ID_VILLE");
function reponse (transport){
 
		var docXML=transport.responseXML;
		var nbfils = docXML.firstChild.childNodes.length;
		var reponse = "";
		for ($i=0; $i<nbfils; $i++) {
			if ($i != 0) reponse += "\n";
			reponse += docXML.firstChild.childNodes[$i].childNodes[0].childNodes[0].nodeValue+'<br>';		
	}
document.getElementById("codes").innerHTML=reponse;
} 
 
function alors() { 
	new Ajax.Request('hello.php',{
			method:'get',
			parameters: {nom : document.getElementById("ID_VILLE").value},
			onSuccess: reponse,
			onFailure:function (){ alert("le fichier hello.php n'existe pas")}
			});
  } 
text.onkeyup=function(){
    if(text.value.length>2){
        alors();
    }
}
</SCRIPT>
<p>Codes Postaux<p/>
<div id="codes"></div>

et hello.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
<?php
if (isset($_GET['nom'])) 
   $nom=$_GET['nom'];
else echo "Passer un nom en parametre";
 
$connexionDB=mysql_connect("localhost","root","");
mysql_select_db("codes_postaux")or die('Erreur de selection '.mysql_error());
$sql = 'SELECT `code`, `ville` FROM `codes_postaux` WHERE `ville` LIKE \''.$nom.'%\'';
$resultat=mysql_query($sql) or die('Erreur de requête '.mysql_error());
 
$tmp='<LesVilles>';
while ($row = mysql_fetch_assoc($resultat)) {
$ville=$row['ville'];
$code=$row['code'];
$tmp = $tmp ."<Ville><Code>".$code."</Code><Nom>".$ville."</Nom></Ville>";
}
$tmp = $tmp ."</LesVilles>";
 
header('Content-type: text/xml');
$xml = simplexml_load_string($tmp);
echo $xml->asXML();
mysql_close($connexionDB);
?>

Tout cela fonctionne merveilleusement bien avec un onkeyup sur Firefox mais pas sous IE
Le unkeypress ne fonctionne pas ds les 2 navigateurs.

[Bovino]

Code :

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

var nbfils = docXML.firstChild.childNodes.length;

et

Code :

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

reponse += docXML.firstChild.childNodes[$i].childNodes[0].childNodes[0].nodeValue+'<br>';

Attention, IE et FF n'interprètent pas le DOM de la même manière (gestion différente des espaces, sauts de lignes etc.) donc tes firstChild sont susceptibles de ne pas pointer sur les mêmes noeuds, d'où l'erreur avec IE !

EDIT : plus d'infos dans la FAQ

[pierre50]

Bon là, je suis completement perdu !
Dans la Faq, le probleme des espaces se pose pour Firefox et pas pour IE ...

En ajoutant un alert,

Code :

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

1
2
3
4
                var docXML=transport.responseXML;
 
		var nbfils = docXML.firstChild.childNodes.length;
		alert(nbfils);

nbfils est correct sous Firefox mais vaut effectivement 0 sous IE

Pour info, mon arbre xml est par exemple

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
<LesVilles>
−
<Ville>
<Code>22600</Code>
<Nom>LOUDEAC</Nom>
</Ville>
−
<Ville>
<Code>65510</Code>
<Nom>LOUDENVIELLE</Nom>
</Ville>
−
<Ville>
<Code>65240</Code>
<Nom>LOUDERVIELLE</Nom>
</Ville>
−
<Ville>
<Code>43320</Code>
<Nom>LOUDES</Nom>
</Ville>
−
<Ville>
<Code>31580</Code>
<Nom>LOUDET</Nom>
</Ville>
−
<Ville>
<Code>57670</Code>
<Nom>LOUDREFING</Nom>
</Ville>
−
<Ville>
<Code>86200</Code>
<Nom>LOUDUN</Nom>
</Ville>
</LesVilles>

Pour memoire, je veux recuperer que les codes