[DOM] Longueur de chaine

Version imprimable

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:

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>

Code:

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

28/03/2009, 13h48
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 ?
28/03/2009, 14h04
Bovino

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

Code:

<input type="text" id="ID_VILLE" value="" name="nom" />
28/03/2009, 14h40
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 ?
28/03/2009, 15h15
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 !

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:

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:

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.

28/03/2009, 15h50
Bovino

Code:

var nbfils = docXML.firstChild.childNodes.length;

et

Code:

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

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:

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:

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