Discussion :

[okoweb]

Bonjour à tous,
Pour un besoin, je souhaite stocker un retour json ajax dans un attribut data-*. J'ai donc ce code qui marche parfaitement pour signifier que le retour est bon :

Code :

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

1
2
3
4
5
6
7
8
9
10
$.ajax({
	//***
	dataType: 'json',
	success: function(data){
		var items = data.obj
		for(var i in items){
			$("<option/>",{value: items[i].id, html: items[i].name}).appendTo("#elt");
		}
	}
});

Je souhaite maintenant sauvegarder mon objet dans un dataset :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
$.ajax({
	//***
	dataType: 'json',
	success: function(data){
		$("#elt").data("items",data.obj);
		// or $("#elt").attr("data-items",data.obj);
		var items = $("#elt").data("items");
		// or var items = $("#elt").attr("data-items");
		for(var i in items){
			$("<option/>",{value: items[i].id, html: items[i].name}).appendTo("#elt");
		}
	}
});

Pourtant c'est le même objet json que j'ai juste sauvegardé et rappelé. Pourquoi le second code ne marche pas ?

Et firebug me montre ceci :

Code :

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

<select id="elt" data-items="[object Object]">

l'attribut se créé bien mais comporte un tableau bizarre [object Object]

Qu'est-ce qui ne va pas ?

Merci d'avance...

[SpaceFrog]

Code :

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

myjson=$.parseJSON($('#obj').data('item') )

[okoweb]

Code :

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

myjson=$.parseJSON($('#obj').data('item') )

J'ai ce message d'erreur :

SyntaxError: JSON.parse: unexpected character

Merci d'avance...

[Bovino]

Il y a de fortes chances que ton JSON soit tout simplement mal formé.
Il ressemble à quoi ?

[SpaceFrog]

c'est que le contenu de dta-item n'est pas un string json correctement formatté

Code :

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

data-item="{'key1':'data1', 'key2':'data2'}"

[Bovino]

Code :

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

"{'key1':'data1', 'key2':'data2'}"

Ce n'est pas un format valide pour du JSON justement. Le seul délimiteur accepté pour les attributs et les valeurs est la double quote : "

Code :

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

'{"key1":"data1", "key2":"data2"}'

[SpaceFrog]

:red:
sinon suffit de faire un replace sur la chaine...

bref mais pas un array en tout état de cause []

[okoweb]

voici un modèle json de retour de success ajax

Code :

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

1
2
 
{"obj":[{"id":"49","name":"Dja et Lobo"},{"id":"50","name":"Mvila"},{"id":"51","name":"Oc\u00e9an"},{"id":"52","name":"Vall\u00e9e du Ntem"}]}

depuis firebug.

[SpaceFrog]

et tu les mets ou ce retour ???
quel rapport avec data-item ??

[okoweb]

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$.ajax({
	//***
	dataType: 'json',
	success: function(data){
		$("#elt").data("items",JSON.stringify(data.obj));
		var items = $.parseJSON($("#elt").data("items"));
		for(var i in items){
			$("<option/>",{value: items[i].id, html: items[i].name}).appendTo("#elt");
		}
	}
});

Ce code marche, mais un autre souci surgit. IE et JSON.stringify().
Que faire ?

[SpaceFrog]

????
quel est le souci avec stringify ???

concatène toi même le json

[okoweb]

????
quel est le souci avec stringify ???

Il ne marche pas avec IE < 8.

concatène toi même le json

Je ne comprends pas.

[SpaceFrog]

dis nous plutoy ce que tu cherches à faire avec ton stringify ??
tu l'utilises ou et pour faire quoi ?

[okoweb]

concatène toi même le json

Mon json est généré en php avec

Code :

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

echo json_encode($temp_array);

C'est du json mal formaté ?

[okoweb]

dis nous plutoy ce que tu cherches à faire avec ton stringify ??
tu l'utilises ou et pour faire quoi ?

Le code ci-haut n'est que pour tester un retour ajax json et l'insérer dans un attribut data-* pour utilisation plutard.

Pour mon besoin réel, pour limiter beaucoup de transaction ajax, je fais juste une requête ajax et je sauvegarde des infos dans data-* pour utilisation future. Cela augmenterait la vitesse de l'appli. Je pense.

Merci.

[Bovino]

Ce que je ne comprends pas, ce sont les messages de Firebug...

Et firebug me montre ceci :

Code :

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

<select id="elt" data-items="[object Object]">

l'attribut se créé bien mais comporte un tableau bizarre [object Object]

qui est incohérent avec $(element).data(...).
J'imagine que tu as plutôt utilisé $(element).attr(...) qui n'a aucun intérêt dans ce contexte.

Ce qu'il faut savoir, c'est que jQuery récupère automatiquement les attributs HTML data-xxx pour les transformer en objet data interne. Mais une fois la page chargée, créer ce type d'attribut ne peut qu'être problématique...
Les propriétés data de jQuery et les dataset ne sont pas exactement la même chose.

Code :

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

1
2
3
$('body').data('toto', 'foo');
document.body.dataset.toto = 'bar';
console.log(document.body.dataset.toto, $('body').data('toto'));

Personnellement, je n'ai jamais eu de souci avec cette façon de faire

[marcha]

Code :

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

1
2
3
4
 
		$("#elt").data("items",JSON.stringify(data.obj));
		var items = $.parseJSON($("#elt").data("items"));
;

Ce code marche, mais un autre souci surgit. IE et JSON.stringify().
Que faire ?

J'ai l'impression qu'il y a une petite confusion entre $.data()
et l'attribut data-items

avec $("#elt").data("items", qqch); Jquery associe un hash avec elt et tu peux
mettre ce que tu veux dedans. Il n'y a pas besoin de sérialiser ton json pour le
stocker avec $.data()

Ceci devrait suffir:

Code :

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

1
2
3
 
	$("#elt").data("items", data.obj);
	var items = $("#elt").data("items");

Par contre si tu voulais fixer l'attribut data-items, tu devrais sérialiser et
écrire qqch du genre: $("#elt").attr("data-items",JSON.stringify(data.obj));
Ce qui n'a pas grand intérêt coté client.

Si du coté PHP tu renvoie du json dans un fragment html, alors cela
ressemblerait à ceci:

Code :

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

1
2
3
 
$json = json_encode($obj);
echo "<div id='#elt' data-items='$json'>"; // en escapant les caractères tels que "

Coté js alors, tu devrais evaluer ton json avec qqch du genre:

Code :

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

1
2
 
    var items = $.parseJSON($("#elt").attr("data-items"));

EDIT: Merci bovino, je découvre l'automatisme de jquery pour rendre accessible les attributs data-xxx avec la fonction $.data('xxx')

[okoweb]

Code :

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

1
2
$("#elt").data("items", data.obj);
var items = $("#elt").data("items");

Exactement ce code marche parfaitement bien. J'avais testé j'ai eu une erreur. Maintenant ça marche, pourtant bien mon code initial.

Merci à vous tous.