11486 sujets

JavaScript, DOM et API Web HTML5

Contenu HTML dynamique en utilisant de l'AJaX

Bonjour tout le monde Smiley smile ,

Mieux qu'un long discours voici le schéma de mon besoin :
upload/56073-schema351.png

L'idée c'est d'écrire une seule fois la page HTML et de ne modifier que le fichier texte.

Ce qu'il faut savoir c'est que les "racines" div possèdent toujours le même nombre de "sous-div" et qu'il n'est possible que d'utiliser du JavaScript (de préférence via jQuery) pour récupérer les infos du fichier texte.

J'espère que j'ai été très concis et clair (c'était mon but lol)

Je vous remercie d'avance Smiley smile

Bonne journée Smiley smile
Bonjour.

Si tu veux (et dois) utiliser javascript, je pense qu'il serait préférable d'utiliser un fichier JSON plutôt qu'un simple fichier texte, la récupération et le traitement des données sera beaucoup plus simple (en Ajax).

Après tu pourrais même utiliser AngularJS (ou un autre framework du style)
Merci énormément pour ta réponse Smiley smile

Concernant le fichier au format texte au format JSON c'est compris.

Ensuite concernant le "code" côté fichier HTML, tu peux me donner un "squelette" ou une illustration. En fait c'est là où je sèche : il me manque la méthode pour faire efficace et bien.

Encore merci Smiley smile

Très bonne journée !
Ah ben le squelette sur la page html est exactement celui que tu as présenté, une succession de div "vides" avec des id pour les identifier (cas avec jQuery)

Sinon si tu comptes utiliser AngularJS, le plus simple serait de faire une boucle avec ng-repeat.
Je veux bien voir ce qu'est AngularJS Smiley smile . Si tu peux m'envoyer des liens pour que je me renseigne stp ? Smiley smile

Concernant le squelette donc, ok pour les id : j'ai très bien compris. Et en supposant que j'utiliserai jQuery, c'est quoi le mieux ?
- autant de requêtes qu'il y a de div, ou,
- une requête, puis je fais un traitement javascript pour remplir les div.

En tout cas merci encore car tu m'aides vachement et j'en suis très content ! Encore quelques échanges et je sens que je pourrai marquer le sujet comme résolu lol.
Eh bien pour AngularJS, Google est ton ami (encore plus ici vu que c'est un produit Google) !

En fait ce que tu comptes faire est le début d'un design pattern qui est très connu dans le développement, il s'agit du MVC. C'est-à-dire qu'ici tu veux séparer la couche Modèle (ton fichier JSON) à la vue (ton template HTML).

Si tu veux des cours gratuit, c'est par ICI. Sinon tu trouveras plein d'autres tuto sur le web.

Et si tu passes par jQuery, il te suffira de ne faire qu'une requête, et après parser ton JSON récupéré est un jeu d'enfant.
Lol merci pour la pic :X mais surtout merci de prendre encore du temps pour moi, j'en suis extrêmement ravi.

J'ai commencé à mettre en place la solution par jQuery car c'est ce que je connais de mieux et que c'est aussi pas très compliqué en soit. Mon code côté HTML donne ça :

jQuery(document).ready(function() {
	jQuery.ajax({
		type: "GET",
		url: "//url où est stocké le fichier.json",
		success: function(response) {               
			var obj = jQuery.parseJSON(response);
			
			console.log(obj);
		}
	});
});


et ça me répond :
Une demande multi-origines (Cross-Origin Request) a été bloquée : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur //"url du fichier.json". Ceci peut être corrigé en déplaçant la ressource sur le même domaine ou en activant CORS.


Je me suis donc renseigné sur ce qu'est le Cross-Origin Request et j'avoue que je n'ai rien compris Smiley decu .
Donc en fait je crois que je dois juste corriger ce "COR" pour résoudre mon problème Smiley smile . Comment je fais pour le résoudre please Smiley smile ? (Google n'a pas été mon ami Smiley decu )

Pour info :
- le fichier HTML est stocké sur un serveur blogger
- le fichier json est stocké sur un serveur free (la FAI lol)
Erreur tout à fait normale dans ton cas, tu ne peux pas faire directement de requête cross-domain (en gros entre deux sites différents).

Enfin tu ne peux pas... si mais il faut modifier ton appel Ajax pour autoriser le cross-domain (je te laisse aller voir la doc jQuery à ce sujet) et utiliser une requête JSONP.
Sujet clos
Aller à