Discussion :

[sliderman]

Bonjour,

J'ai développé une petite fonction ajax dans le but de mettre à jour le HTML d'un page (un td) en fonction d'une valeur d'un champ dans une base de donnée.
Voici cette fonction

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
 
if(this.value==5)
{ 
       function citySeek(evt)
       {
                        method: 'post',
                        contentType: 'application/x-www-form-urlencoded',
                        charset: 'UTF-8',
                        parameters: 'zip=01000',
                        onSuccess: function(transport)
                        {
                                var root = transport.responseXML.firstChild;
                                if(root.childNodes.length -1 > 1)
                                {
                                        var input = document.createElement('select');
                                        input.className='inputBox';
                                        for(var i = 0 ; i <= root.childNodes.length - 1 ; i++)
                                        {
                                                var city = root.childNodes[i].firstChild.nodeValue;
                                                var elt = document.createElement('option');
                                                var label = document.createTextNode(city);
                                                elt.value=city;
                                                elt.appendChild(label);
                                                input.appendChild(elt);
                                        }
                                }
                                else if(root.childNodes.length -1 == 1)
                                {
                                        var input = document.createElement('input');
                                        input.type='text';
                                        input.readonly='readonly';
                                }
                                else
                                {
                                        alert('Veuillez saisir un code postal valide');
                                }
                                $('puter').appendChild(input);
                                $('puter').size="120";
                        }
                });
        }
}

mais voila, elle est effectuée deux fois (enfin deux appels à Ajax sont passés).
première question pourquoi ?
seconde interrogation de ma part : lorsque je fais un

Code :

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

 alert()

que je déclanche sur l'événement onkeyup (lors de la saisie), puisque je saisie cinq charactères, la fonction se déclenche (normal). quelconque l'appel et bien passé une fois, et un seule fois.

[E.Bzz]

Bonjour,
sur onkeyup, ça peut être la frappe du 5° caractère (1° fois), puis la validation du champ par TAB ou ENTER (2° fois).
Pourquoi ne pas utiliser onchange ?

Sinon, à quoi fait référence le "this" de ta fonction ?

A+

[RomainVALERI]

mais voila, elle est effectuée deux fois (enfin deux appels à Ajax sont passés).
première question pourquoi ?

Justement, pour comprendre mieux la situation, montre-nous plutôt l'appel ajax, dont le bout de code que tu nous as montré utilise vraisemblablement la réponse.

[sliderman]

[QUOTE=E.Bzz;3810468]Bonjour,
sur onkeyup, ça peut être la frappe du 5° caractère (1° fois), puis la validation du champ par TAB ou ENTER (2° fois).

Pourquoi ne pas utiliser onchange ?

parce justement il faut appuer sur TAB
mon but c'est que dès que l'utilisateur à taper ces cinq caractères, on modifie le contenu d'un champ (input)
differencier ces deux actions, sera la solution mais je ne sais aps comment faire

Sinon, à quoi fait référence le "this" de ta fonction ?

à un element HTML
le code javascript :

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
window.onload=init;
function init()
{
	$('cp').onkeyup=citySeek;
}
function citySeek(evt)
{
	if(this.value.length==5)
	{
		new Ajax.Request('city-chooser.php', 
		{
  			method: 'post',
			contentType: 'application/x-www-form-urlencoded',
			charset: 'UTF-8',
			parameters: 'zip='+this.value,
  			onSuccess: function(transport) 
			{
				var root = transport.responseXML.firstChild;
				if(root.childNodes.length > 2)
				{
					var input = document.createElement('select');
					input.className='inputBox';
					input.id='ville';
					for(var i = 0 ; i <= root.childNodes.length - 1 ; i++)
					{
						var city = root.childNodes[i].firstChild.nodeValue;
						var elt = document.createElement('option'); 
						var label = document.createTextNode(city);
						elt.value=city;
						elt.appendChild(label);
						var att= document.createAttribute('style');
						att.value='width: 126px';
						input.setAttributeNode(att);
						input.appendChild(elt);
					}
				}
				else if(root.childNodes.length == 1)
				{
					var input = document.createElement('input');
					input.id='ville';
					input.className='inputBox';
					input.type='text';
					input.value=root.childNodes[0].firstChild.nodeValue
					var att= document.createAttribute('readonly');
					att.value='readonly';
					input.setAttributeNode(att);
					var att= document.createAttribute('style');
					att.value='width: 120px';
					input.setAttributeNode(att);
				}
				else
				{
					alert('Veuillez saisir un code postal valide');
					var input = document.createElement('input');
					input.id='ville';
					input.className='inputBox';
					input.type='text';
					input.value='Aucune ville correspondante';
					var att= document.createAttribute('readonly');
					att.value='readonly';
					input.setAttributeNode(att);
					var att= document.createAttribute('style');
					att.value='width: 120px';
					input.setAttributeNode(att);
				}
				$('puter').replaceChild(input,$('ville'));
  			}
		});
	}
}

le code 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
        require_once('../include/param.inc');
        require_once('../class/Connexion.php');
        header('Content-type: application/xml; charset=UTF-8');
        $code=$_POST['zip'];
        $sql='SELECT `ville` FROM CODE_POSTAUX WHERE `code` = "'.$code.'"';
        $dbh=new Connexion();
        $rst=$dbh->execute($sql);
        unset($dbh);
        echo '<xml>';
        if(count($rst[0]) > 0)
        {
                for($i = 0 ; $i <= count($rst) - 1 ; $i++)
                {
                        echo '<city>'.ucfirst(strtolower(trim($rst[$i][0]))).'</city>';
                }
        }
        else
        {
                echo '<city></city>';
        }
        echo '</xml>'; 
?>

[E.Bzz]

parce justement il faut appuer sur TAB
mon but c'est que dès que l'utilisateur à taper ces cinq caractères, on modifie le contenu d'un champ (input)

Tu sais maintenant pourquoi il se déclenche 2 fois (cf. ci-dessus)

A+

[sliderman]

Tu sais maintenant pourquoi il se déclenche 2 fois (cf. ci-dessus)

A+

ouai
mais je sais pas comment faire pour qu'il ne se déclanche q'une fois
(sans onchange, parce que ça oblige l'utilisateur à appuyer sur TAB)
j'ai donc résolu le soucis en rajoutant une condition
if(evt.which!=13) // le 13 correspond au entrée

[E.Bzz]

if(evt.which!=13) // le 13 correspond au entrée

Tu as donc toujours le problème avec TAB, non ?
Il serait plus simple de tester la longueur saisie et ne déclencher qu'à 5 (sans TAB)

A+

[sliderman]

Tu as donc toujours le problème avec TAB, non ?
Il serait plus simple de tester la longueur saisie et ne déclencher qu'à 5 (sans TAB)

A+

c'est ce que je fais

Code :

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

if(this.value.length==5)