$.get() Template externe

**Androzus** · 26/12/2013, 19h39

Bonjour a tous !

Voila je suis confronté a un gros soucie depuis 1 semaine. Dans le cadre de mes étude je dois faire un blog entièrement en AJAX, je ne suis pas une fléche en langage web, et je commence a peine le JS et le jquery.
J'ai quelque consignes pour réaliser ce travail :
- Pour les data les stocker en JSon
- Avoir des fichiers Json Externe
- Avoir des Template Externe

la marche a suivre m'apparaissait donc clair : faire un get du Template et un getJSON utiliser mustache pour Afficher le résultat dans mon DOM.

je procède donc ainsi :

Code :

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

1
2
3
4
5
6
7
8
$.getJSON(urldata, function(data)
{
...
	$.get(urltemplate, function(templ){
			...
		});		
...
});

Pour ce qui est du JSon sa marche par contre impossible de charger le Template et je ne sais absolument pas pourquoi :/ peut être es-ce ma syntaxe ou ma façon de procédé, bref si vous avez la moindre idée ou critique je suis preneur parce que là j'avoue que je désespère ...

Merci d'avance

**NoSmoking** · 26/12/2013, 22h11

Bonjour,
à lire

Mustache.js et ICanHaz.js au secours de jQuery

**Androzus** · 27/12/2013, 19h15

Merci pour cette réponse qui m'a en partie éclaire.
J'ai bien compris que je peux donc mettre ces balise dans une balise script dans le fichier Html de ma page Index.
mais je souhaiterai avoir un fichier (HTML j'imagine) par Template.
et je ne sais absolument pas comment les récupérer. et je n'arrive pas a sortir de ce lien les élément nécessaire pour m'en sortir.

En éspérant recevoir des informations supplémentaire ^^ !

merci d'avance

**NoSmoking** · 28/12/2013, 09h09

Si tu souhaites faire 2 appel Ajax pour récupérer le template puis les data il te faut chainer tes appels sur le succes: du premier appel par exemple.

**Androzus** · 28/12/2013, 16h26

Comment sa chaîner ? Ce n'est pas ce que j'ai fait ? Dans le cas si dessus le deuxième appel ne ce fait que si le premier marche nan ?
Et ducoup comment mettre mon remplace en externe ?

Merci

**NoSmoking** · 28/12/2013, 16h43

Prenons un exemple simple avec les fichiers suivant
fichier url_json.js

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
{
  "forums":[
    {
      "nom":"CSS",
      "adresse":"http://www.developpez.net/forums/f463/webmasters-developpement-web/css/"
    },
    {
      "nom":"HTML",
      "adresse":"http://www.developpez.net/forums/f39/webmasters-developpement-web/html-dhtml-xhtml/"
    },
    {
      "nom":"Javascript",
      "adresse":"http://www.developpez.net/forums/f23/webmasters-developpement-web/javascript/"
    },
    {
      "nom":"Ajax",
      "adresse":"http://www.developpez.net/forums/f458/webmasters-developpement-web/ajax/"
    }
  ]
}

fichier url_template.html

Code html :

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

1
2
3
4
5
6
7
<ul id="forumList">
  {{#forums}}
    <li>
      <a href='{{adresse}}'>{{nom}}</a>
    </li>
  {{/forums}}
</ul>

on pourrait avoir un script de la sorte

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
$(document).ready(function(){
  // lecture du template
  $.ajax({
    url: 'url_template.html',
    // ! IMPORTANT ! récup. template au format text en non html
    dataType: 'text',
    success: function(template){
      console.log('template : ', template);
      // lecture des données de remplissage
      $.ajax({
        url: 'url_json.js',
        dataType: "json",
        success: function(data){
            console.log('data : ', data);
            // mise en action mustache
            var html = Mustache.render (template, data);
            $('#listeForums').html(html);
        },
        error: function(error){
            console.log('ERREUR : ', error.statusText);
        }
      });
    }
  });
});