Discussion :

[tidus_6_9_2]

Bonjour à tous,

J'ai un soucis que je n'arrive pas du tout à trouver depuis quelques heures déjà...

J'utilise l'autocomplete de JQuery avec JSonP ici(tout simplement parce que c'est la seul autocompletion de JQuery UI que j'ai pus programme pour faire en sorte qu'il cherche avec une limite afin de ne pas charger toutes les valeurs trouvées)

Donc mon code donne ceci :

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
$('#champ').autocomplete({
		source:function(request,response){
			$.ajax({
				url:'url.....',
				dataType: "jsonp",
				data:{TermeSaisieDansChamps:request.term},
				success:
					function(data){
						response($.map(data.JsonPRequete,
							function(item){
								return{
									label:item.Nom,value:item.Num
								}
							}
						));
					}
				});
			},
			minLength: 2,
			select:function(event,ui){
				$('#champ2').val(ui.item.value);
			}
	});

et le JSonP généré est comme suit :

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
 
jsonp1308146948252(
{
'totalResultsCount':'4',
'JsonPRequete':[
{
'Num':'102',
'Nom':'XXX'
},
{
'Num':'246',
'Nom':'XXX'
},
{
'Num':'413',
'Nom':'XXX'
},
{
'Num':'620',
'Nom':'XXX'
}
]
}
);

Donc tout le JSonP est sur une ligne, je l'ai juste séparé pour mieux vous permettre de lire.

Donc le soucis, comme expliqué dans le titre, c'est que IE m'affiche une erreur "unterminated string constant" avec une ligne du genre 258393920 (donc impossible de trouver cette ligne qu'on soit bien d'accord )

D'après ce que j'ai pus lire il s'agirait d'une erreur du JSonP, mais je ne vois pas du tout ou elle est, étant donné que j'ai bien mon autocompletion qui fonctionne.... Mais j'ai toujours cette erreur en bas de page que je n'arrive pas à comprendre

Merci d'avance pour vos idées/solutions.

Cordialement Tidus

[SpaceFrog]

essaye avec des " au lieu de ' dans ton json ?

[tidus_6_9_2]

Alors essayé et non concluant :-(

Voici le JSonP donné en sortie :

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
 
jsonp1308209151899(
{
"totalResultsCount":"4", 
"TermeSaisieDansChamps":[
{
"Num":"102", 
"Nom":"XXX()"
},
{
"Num":"246", 
"Nom":"XXX()"
},
{
"Num":"413",
"Nom":"XXX()"
},
{
"Num":"620", 
"Nom":"XXX()"
}
]
});

Que en réalité je reçois comme ceci toujours :

Code :

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

jsonp1308209151899({"totalResultsCount":"4", "TermeSaisieDansChamps":[{"Num":"102", "Nom":"XXX()"},{"Num":"246", "Nom":"XXX()"},{"Num":"413", "Nom":"XXX()"},{"Num":"620", "Nom":"XXX()"}]});

J'ai aussi essayé d'enlever les accents et tout autre caractères dans les Noms mais toujours pas d'amélioration :-(((

[SpaceFrog]

ben c'est pas un json ...
c'est un appel à une fonction avec un json en paramètre

[tidus_6_9_2]

C'est justement le but du JSonp en faite :-)

Tu fais appel à ton callback en tant que fonction avec ton JSon en paramètre. D'après ce que j'ai compris ^^

http://en.wikipedia.org/wiki/JSONP

[SpaceFrog]

Code :

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

alert(data)

te retourne quoi dans le success ?

[tidus_6_9_2]

Un "[Object Object]" vus que dans le dataType c'est en JSonP il va traduire le texte en tant qu'objet normalement


[EDIT] Au cas ou, avec IE9 et leurs débogueur ou on peut voir toutes les variables il m'affiche bien comme il faut le contenus de l'objet

[danielhagnoul]

[EDIT 2011-06-20]

Ce message ne réponds pas à la question, mais... , voir le message n° 10.

----------------
Bonsoir

Dans la base de données de geonames, l'autocomplete permet de choisir un nom de ville. Avec le nom de la ville choisie, on relance une transaction AJAX pour obtenir les données sur les villes qui portent ce nom ou un nom proche.

Exemple :

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/humanity/jquery-ui.css">
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/jPicker/css/jPicker.dvjh-1.1.6.min.css" />
	<style>
		/* Base */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0px; padding:0px; }
		body {background-color:rgba(146, 216, 98, 0.5); color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:serif; padding:6px; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p {padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		.conteneur {width:95%; min-width:800px; min-height:400px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* article */
		/*
		.conteneur {border-spacing:4px; }
		.ligne {display:table-row; }
		article {display:table-cell; text-align:center; vertical-align:middle; border:1px dotted grey; }
		article:nth-of-type(1) {width:400px; height:120px; }
		*/
 
		/* -- */
		.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
		#city { width: 25em; }
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
		<div class="ui-widget">
			<label for="city">Your city: </label>
			<input id="city" />
			Powered by <a href="http://geonames.org">geonames.org</a>
		</div>
 
		<div class="ui-widget" style="margin-top:2em; font-family:Arial">
			Result:
			<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
		</div>
 
		<div class="cityData"></div>
 
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2011-06-18T22:30:00.000+02:00" pubdate>2011-06-18</time> <span itemprop="name">Daniel Hagnoul</span> <a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.2rc1.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/jPicker/jpicker-1.1.6.min.js"></script>
	<script>
		$(function(){
			/* -- */
			function log( message ) {
				$( "<div/>" ).text( message ).prependTo( "#log" );
				$( "#log" ).attr( "scrollTop", 0 );
			}
 
			$( "#city" ).autocomplete({
				source: function( request, response ) {
					$.ajax({
						url: "http://ws.geonames.org/searchJSON",
						dataType: "jsonp",
						data: {
							featureClass: "P",
							style: "full",
							maxRows: 12,
							name_startsWith: request.term
						},
						success: function( data ) {
							response( $.map( data.geonames, function( item ) {
								return {
									label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
									value: item.name
								}
							}));
						}
					});
				},
				minLength: 2,
				select: function( event, ui ) {
					log( ui.item ?
						"Selected: " + ui.item.label :
						"Nothing selected, input was " + this.value);
 
					cityData(ui.item.value);
				},
				open: function() {
					$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
				},
				close: function() {
					$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
				}
			});
 
			function cityData(ville){
				$.ajax({
					url: "http://ws.geonames.org/searchJSON",
					dataType: "jsonp",
					data: {
						featureClass: "P",
						style: "full",
						maxRows: 12,
						name_startsWith: ville
					},
					success: function(data) {
						// [0] contient les données de la réponse la plus probable
						//console.log(data.geonames[0]);
 
						$.map(data.geonames, function(item){
							$(".cityData").append("<p>adminCode1 = " + item.adminCode1 + "<br/>" +
												   "adminName1 = " + item.adminName1 + "<br/>" +
												   "name = " + item.name + "<br/>" +
												   "toponymName = " + item.toponymName + "<br/>" +
												   "continentCode = " + item.continentCode + "<br/>" +
												   "countryCode = " + item.countryCode + "<br/>" +
												   "countryName = " + item.countryName + "<br/>" +
												   "fcodeName = " + item.fcodeName + "<br/>" +
												   "lat = " + item.lat + "<br/>" +
												   "lng = " + item.lng + "<br/>" +
												   "population = " + item.population + "<br/>" +
												   "gmtOffset = " + item.timezone.gmtOffset + "<br/>" +
												   "timeZoneId = " + item.timezone.timeZoneId + "</p>");
							});
					},
					error: function(){
						console.log("Erreur !", arguments);
					}
				});
			}
 
			/* jPicker : http://www.digitalmagicpro.com/jPicker/, outil pour choisir rapidement une couleur */
			$.fn.jPicker.defaults.images.clientPath="http://danielhagnoul.developpez.com/lib/jPicker/images/";$(".conteneur").jPicker({window:{expandable:true,title:"jPicker : choissisez une couleur :",alphaSupport:true,position:{x:'screenCenter',y:'top'}},color:{ active:new $.jPicker.Color({ r: 146, g: 216, b: 98, a: 128 })}},function(color, context){var c = color.val("all");if (c){$("body").css("backgroundColor", "rgba(" + c.r + "," + c.g + "," + c.b + "," + (c.a/255).toFixed(2) + ")");}});
		});
	</script>
</body>  
</html>

[tidus_6_9_2]

Merci pour ta réponse, mais cela ne m'aide pas énormément XD

Je sais ce que fait geoname par rapport aux noms des villes, mais j'aimerais pouvoir faire exactement la même chose avec ma BDD personnelle. La seul chose que je ne comprend pas, c'est pourquoi IE me renvoit une erreur (l'autocomplete fonctionne donc, on peut sélectionner le nom du client sans soucis et le numéro ainsi que le nom sont bien sélectionné).

Surtout le gros soucis c'est ça, ce n'est pas que cela ne fonctionne pas, mais que IE me renvoit une erreur "unterminated string constant" et qu'il me donne un numéro de ligne incohérant.


[EDIT] Je vais regarder s'il peut sagir du fait que ma requête ne retourne aucuns résultats peut-être... Je test et vous redis si cela est concluant.

[danielhagnoul]

Bonjour

Oops !

Par quel cheminement mon cerveau a-t-il focalisé sur geonames. Certainement parce que c'est le sujet de l'exemple JSONP dans UI Accordion, que la structure du JSONP ressemble au vôtre et que le décorticage des renseignements sur les villes m'a intéressé. Mais effectivement, cela n'a qu'un lointain rapport avec votre question. Je vais tout de même laisser ma réponse et le code, il servira peut-être à un lecteur.

[tidus_6_9_2]

Hehehe pas de soucis ^^ ça arrives quand on travaille ^^

Mais j'ai peut-être une piste (qui n'est ABSOLUMENT pas bonne à mon goût... mais qui fonctionne pour l'instant...)

J'ai mis dans la longueur minimum du champ pour lancer la recherche à 3 au lieu de 2 initialement initié

L'erreur ne se reproduit plus pour l'instant... Mais j'attend des tests pour voir si cela se reproduit. Merci pour votre aide, je laisse toujours la discussion ouverte si quelqu'un a le même problème et qu'on arrive à y trouver une solution :-)

[tidus_6_9_2]

J'ai trouvé le problème, cela vient des datas, apparemment il n'accepte pas les accents. J'ai corrigé et désormais l'erreur n'apparait plus. Voilà tout ^^ merci pour votre aide

[SpaceFrog]

ça vient plutot de tes charset ...
mets tout en utf8 ...