11540 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous!

Je me demande quelle serait la meilleure balise pour importer des données au format JSON depuis une requète AJAX.

Je m'explique: Un requète AJAX me renvoie du contenu HTML, contenant tableau, div, etc. En tête de ce retour je voudrais placer une balise genre
<datalist id="JsonData" style="display:none">{mes données Json}</datalist>
afin de récupérer les données pour un traitement Javascript ultérieur (
var data=document.getElementById('JsonData').innerHTML
).

Hors cette balise est faite pour lister les options d'un input, il n'est donc pas conforme de l'utiliser ainsi.
Connaissez-vous une balise plus 'propre' destinée à ces fins?

Cdt,

Giamba
Pourquoi tu ne fais pas que récupérer directement les données JSON en javascript sans passer par le DOM ?
Salut,

Mais alors celà génèrerait 2 appels AJAX, un pour le DOM et un pour le JSON.
Si non, est-il bien de retourner du DOM(XHTML) dans le JSON? (ex. response.data, response.dom).
Du coup en faisant comme ça, je n'ai qu'une requète vers le serveur.

Je me sers de dojo/request/xhr de l'API Dojo en chargement AMD.

Merci,

Cdt.
Modifié par Giamba (04 Feb 2013 - 21:29)
Hum, je dirais qu'il est inutile de retourner du JSON si c'est pour faire l'équivalent d'un innerHTML, à savoir injecter du code HTML... D'où la remarque précédente : il te faut parser ton retour JSON pour construire en boucle le code HTML (via le DOM donc...).

Sinon tu fais juste une requête ajax classique et tu injectes le contenu dans une div.

Ou alors zapacompriskoitoivouloirdire Smiley smile

Tchô
merci de vos réponses.

Donc la meilleure balise serait donc une div, toujours en display:none;

Pour vous faire une idée:
J'ai une page avec 2 div (dijit/layout/ContentPane dans un dijit/layout/BorderContainer) cote à cote, dans celle de gauche, j'ai un arbre (dijit.Tree) avec des données stockées dans un dojo/store/Memory. Il s'agit des articles par catégories et par fournisseurs. Les données du Tree sont alors passées directement au fichier *.js lors de l'appel de la page. Lors d'un click sur un fournisseur, le conteneur de droite affiche des infos sur le fournisseur, sur une categorie, des infos sur la catégorie et même chose pour un article. J'ai donc une requète AJAX pour charger le DOM du conteneur de droite. J'en profite donc pour que dans le même temps, la requète me renvoie tout un tas d'infos sur l'article en JSON qui seront à leurs tours stokées dans des dojo/store/Memory pour s'afficher dans des grilles de données (dojo/grid/DataGrid). Grille de stock, grille de prix, grille de sous-article, graphique des ventes, etc.... J'envoie donc un tableau hiérarchisé à plusieurs dimentions en JSON, et ça marche bien! Les dojo/store/Memory sont magique pour ça!

Je me demandais donc si la balise datalist pourrait me servir à faire passer du JSON; je suis allé voir les balises HTML5 sur le W3C et j'ai vu que cette balise ne s'utilisait pas de cette façon, dommage pour moi!
As t-on seulement le droit de la détouner (point de vue validation HTML) ou bien dois-je passer par une DIV ou autre et quel serait 'autre'?

Si Dojo vous intéresse, je me ferais plaisir à vous donner les bases!
Pour ce qui voudrait voir à quoi Dojo ressemble visitez http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/themeTester.html?theme=tundra

Cdt
Bonjour,
je pense pour ma part qu'il peut être utile de récupérer du json au sein du html renvoyé par une requête ajax.

Je me suis posé la même question que Giamba il y a peu.
Pour ma part, j'ai opté pour une balise <script> et ça prend cette forme: le html renvoyé par le serveur et la balise script qui contient le json:
 ... html ...
<script id="<?php echo 'script_' . $page;?>" type="application/json"><?php echo json_encode($media);?></script>


Ensuite, dans le callback de la requête Ajax, je lis le json importé de cette manière:

var json_data = JSON.parse($('#script_' + currentpage).html());


Ceci dans le contexte d'une galerie de photos, les pages se chargent via ajax, en appelant toujours la même vue pour afficher les fotos, et je me sers du json pour stocker les données des photos dans un objet js.
Modifié par loicbcn (05 Feb 2013 - 07:49)
Bonjour et merci encore!

Du coup, je pense que tu as tout à fait raison d'utiliser la balise 'script' pour importer du JSON sur tes appels Ajax, puisque le but est d'insérer le tableau dans une variable Javascript.
Je n'y avais pas pensé car je ne pensais pas pouvoir appliquer un Id sur cette balise et du coup pouvoir en recupérer le 'inner'.

C'est donc la meilleur solution et donc celle que je vais appliquer! Smiley cligne

Merci,
Cdt.