[AJAX] Double appel javascript

Version imprimable

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:

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:

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.

24/11/2008, 18h37
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+
24/11/2008, 18h46
RomainVALERI

Citation:

Envoyé par sliderman

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.

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

Citation:

Envoyé par E.Bzz

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

Citation:

Envoyé par E.Bzz

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

à un element HTML
le code javascript :

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

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

24/11/2008, 19h21
E.Bzz

Citation:

Envoyé par sliderman

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+
24/11/2008, 19h32
sliderman

Citation:

Envoyé par E.Bzz

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
25/11/2008, 09h20
E.Bzz

Citation:

Envoyé par sliderman

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+
25/11/2008, 09h42
sliderman

Citation:

Envoyé par E.Bzz

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:

if(this.value.length==5)