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+

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

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