bug avec getJSON() sous jquery 1.4.1

**gtraxx** · 06/02/2010, 20h02

Bonsoir, afin de passer vers cette nouvelle mouture en douceur, j'ai commencer par vérifier chaque exécution de script.
Seulement, j'ai un petit script qui rempli un select via une requête json et qui fonctionne très bien avec jquery 1.3.2.
Depuis le passage vers la 1.4 le script ne fonctionne plus correctement.
Dans firebug je vois bien la requête mais le select n'est jamais rempli.
Voici le script :

Code :

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

1
2
3
4
5
6
7
8
$("select#idclc").change(function(){
	   $.getJSON("/json/getidclc="+ $(this).val(),function(j){
	    var options = '<option value="0">Aucune sous-catégorie</option>';
	    for (var i = 0; i < j.length; i++) {
	      options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
	    }
	    $("select#idcls").html(options);
	  });

LE html ce présente comme 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
<tr>
<td class="label"><label for="idclc" class="inlinelabel">Catégorie :</label></td>
</tr>
<tr>
<td><select id="idclc" name="idclc" class="select">
<option value="0">Aucune catégorie</option>
<option value="1">maison à vendre</option>
<option value="2">vente chateau</option></select>
</td>
<tr>
<td class="label"><label for="idcls" class="inlinelabel">Sous catégorie :</label>
</td>
</tr>
<tr>
<td>
<select id="idcls" name="idcls">
<option value="">Sélectionner une catégorie</option>
</select>
</td>

**danielhagnoul** · 06/02/2010, 20h37

Bonsoir.

Votre code JSON doit être mal formé. jQuery 1.4.1 est très strict sur le format JSON. Voir : http://api.jquery.com/jQuery.getJSON/

Un exemple de code JSON bien formé :

Code :

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

1
2
3
4
5
{
  "foo": "The quick brown fox jumps over the lazy dog.",
  "bar": "ABCDEFG",
  "baz": [52, 97]
}

**gtraxx** · 06/02/2010, 22h10

voila la réponse de firebug avec jquery 1.3.2 :

Code :

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

[{optionValue: 1, optionDisplay: "grande maison"},{optionValue: 2, optionDisplay: "petite maison"}]

J'ai également tester ceci :

Code :

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

{"optionValue": [1,2], "optionDisplay": ["grande maison","petite maison"]}

Mais il ne fais rien seule la 1er méthode fonctionne uniquement avec jquery 1.3.2 j'y perd mon wallon

**danielhagnoul** · 07/02/2010, 01h41

Bonsoir.

Je ne vois pas de problème, voici mes codes de test, fichier testWallon.html :

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title>Document sans nom</title>
	<script charset="CP-1252" src="../lib/jquery-1.4.1.min.js"></script>
	<script>
		$(function() {
			$.getJSON("testWallon.js", function(json){
				$.each(json, function(i,item) {
					$("<p>élément[" + i + "] = " + item.optionValue + ", " + item.optionDisplay + "</p>").appendTo("#conteneur");
				});
			});
		});
	</script>
</head>
<body>
	<div id="conteneur"></div>
</body>
</html>

fichier testWallon.js :

Code :

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

1
2
3
4
5
6
7
8
9
10
[
    {
        "optionValue": 1,
        "optionDisplay": "grande maison"
    },
    {
        "optionValue": 2,
        "optionDisplay": "petite maison"
    }
]

**gtraxx** · 08/02/2010, 00h04

Le probléme venais bien du format optionValue manquais de double quote

J'ai aussi utiliser un each plutôt que for :

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
$("select#idclc").change(function(){
		$.getJSON("/json/getidclc="+ $('#idclc').val(),function(j){
			if(j == undefined){
				console.log(j);
			}else{
				var subcat = $('#idcls');
				subcat.empty();
				if(j !== null){
					$.each(j, function(i,item) {
						$('<option value="' +item.optionValue + '">' + item.optionDisplay + '</option>').appendTo("#idcls");
						//$("<option>élément[" + i + "] = " + item.optionValue + ", " + item.optionDisplay + "</option>").appendTo("#idcls");
					});
				}else{
					subcat.empty();
				}
			}
		});
	});

A mon avis y à moyen d'aller plus loin en terme de debug car mon petit if undefine ne suffira pas

Je vais tester les formats json (retourner via php par exemple), voir ceux qui passent et les autres.
merci en tout cas

bug avec getJSON() sous jquery 1.4.1

jQuery

Discussions similaires

Partager

Partager