Discussion :

[jexl]

Bonjour à tous,

je ne connais pas très bien le fonctionnement d'ajax / jquery, et je tente d'apprendre par le biais d'un tuto : http://x-zolezzi.developpez.com/tuto...utocompletion/

Bien entendu, pour comprendre correctement, j'ai modifié le script pour n'avoir qu'un seul champ TEXT au lieu de deux dans l'exemple

j'ai donc créé ma page php qui attend le formulaire POST, tout marche bien.

En revanche j'ai une erreur dans firebug que je n'arrive pas a comprendre :

ReferenceError: response is not defined
response($.map(data, function (item){

voila le code de mon form

Code html :

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

<input name="form[ville]" id="ville" type="text" class="formT" value="" />

et mon JS :

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
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.10/jquery-ui.js"></script>
<script type="text/javascript" language="Javascript" >
$(function (){
	$("#ville").autocomplete({
		source: function (request, response)
		{},
		minLength: 3,
		delay: 600
	});
});
var objData = {};
if($(this.element).attr(\'id\') == \'ville\'){
	objData = { ville: request.term};
}
$.ajax({
	url: "../ajax/ville.php",
	dataType: "json",
	data: objData,
	type: \'POST\',
	success: function (data){
		response($.map(data, function (item){
			return {
				label: item.cp + " - " + item.libelle,
				value: function (){
					if ($(this).attr(\'id\') == \'ville\')
					{
						$(\'#ville\').val(item.libelle);
						return item.cp;
					}
				}
			}
		}));
	}
});
</script>

quand j'exécute mon php, j'ai un tableau JSON avec toutes les données.

je n'arrive pas a comprendre, j'ai l'impression que mon autocompletion ne fonctionne pas.

Vous avez un indice ?
merci

[Invité]

Bonjour,

Firebug vous dit que la fonction "response" n'est pas définie.
Et on ne voit pas sa définition dans le morceau de code que vous avez posté.

[jexl]

Merci pour ce retour qui m'a permis de comprendre une de mes erreurs.....

J'avais laissé dans le .htaccess la mise en cache des js, donc forcément, mes modifications n'étaient pas prisent en compte.

Maintenant, je n'ai plus d'erreur, même si ca ne marche toujours pas
je continue de chercher et vous tiens au courant.

[Invité]

Sans les précieux messages d'erreurs, il est difficile de comprendre une erreur.
1) Votre code est-il syntaxiquement correct ? (jsLint.com)
Il me semble étrange de voir des choses comme attr(\'id\') == \'ville\'. Pourquoi les quotes sont "échappées" ? \' au lieu de ' ?
2) Votre requête (../ajax/ville.php) arrive-t-elle à bon port ? Pour le savoir, jetez un œil du coté de l'onglet réseau de Firebug.
3) Votre fonction de callback (success) s'exécute-t-elle correctement ? Pour le savoir, et une fois le point 2 résolu, placez-y un point d'arrêt depuis Firebug, et faites du pas à pas, en inspectant les variables utilisées, pour être sûr qu'elles contiennent ce que vous attendez.

La fonction d'auto-completion n'est pas utile pour comprendre ajax.

[jexl]

Merci chanyslas pour ce retour.

Les échappements sont présents car j'intègre ce code JS dans un php qui fait un simple echo. Du coup, ils n'apparaissent pas dans la page.

j'ai compris une grosse de mes erreur, même si ca ne fonctionne toujours pas comme souhaité, je n'encapsulait pas toute les fonctions dans autocomplete, c'est pour cela que je n'avais pas de retour.


Je vais maintenant faire les reste des tests et également apprendre à me servir correctement de firebug avec cette notion de point d'arrêt qui a l'air très interressante.

Je vous tiens au courant, et merci encore.

[jexl]

j'ai réussi à faire ce que je voulais au final réaliser, c'est pas sorcier, mais je ne suis pas habitué de jquery.

Voici donc ce que j'ai fait en js, en modifiant l'exemple du tuto :

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
$(function (){
	$("#ville").autocomplete({
		source: function (request, response){
			var objData = {};
			if($(this.element).attr('id') == 'ville'){
				objData = { ville: request.term};
			}
			$.ajax({
				url: "../ajax/ville.php",
				dataType: "json",
				data: objData,
				type: 'POST',
				success: function (data){
					response($.map(data, function (item){
						return {
							value: function (){											
								document.getElementById("id_ville").value = item.id_ville;	
								return item.cp + " - " + item.ville;
							}
						}
					}));
				}
			});
		},
		minLength: 2,
		delay: 300
	});
});

dans mon fichier ville.php, j'ai un retour de ma base de données via json

en espérant que cela puisse servir à d'autre.

n'hésitez pas si vous voyez une incohérence dans le code.

Bonne soirée