Discussion :

[Androzus]

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]

Bonjour,
à lire Mustache.js et ICanHaz.js au secours de jQuery

[Androzus]

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]

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]

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]

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);
        }
      });
    }
  });
});

avec un html minimum

Code html :

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

<div id="listeForums"></div>

[Androzus]

Super merci beaucoup pour ton exemple detaillé je vais essayé comme ça deja !
J'ai pour consigne d'utiliser le $.get pour recupérer le template et le $.getJSON pour recuperer le JSON ça marcherais dans le meme esprit j'imagine ?

[NoSmoking]

... le $.get pour recupérer le template et le $.getJSON pour recuperer le JSON ça marcherais dans le meme esprit j'imagine ?

il n'est qu'à lire la documentation pour se rendre compte que ce ne sont que des écritures raccourcies.
jQuery.get()
jQuery.getJSON()

[Androzus]

Me revoilà !

je tiens a te remercier grâce a tes précieux conseil j'ai réussi à faire mon taff (et je suis plutôt fière en plus)
La chose est ici
http://apinchaudblog.olympe.in/
j'ai une dernier petit soucie (enfin 2 mais je pense qu'il sont liés)

enfaite cela ne marche que sur internet explorer (pour une fois que c'est pas l'inverse !)
Sur chrome ça m'ouvre directement le Json.
et quand je l'ouvre sur IE il me demande si je veux télécharger le fichier Json chargé :/

j'imagine que c'est lié au fait que je fait ça pour charger le Json :

Code html :

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

1
2
3
4
<li class="uneCategorie_blog">
	<span class ="nbArticles"> </span>
	<a class="lienCateg" href="Json/articleInformatique.json" id="articlesInformatiques"> Infomatique </a>
</li>

ici c'est le HTML de mon bouton "informatique", et ce que je fait c'est que je met en HREF le lien de mon Json J'imagine que c'est pour cette raison que j'ai des problème avec les navigateur. Mais le problème c'est que mon prof nous a dit que c'était la seul solution pour récupérer le Json dans le Jquery car vu que je JSON est asynchrone il serait impossible de faire ($.get(chemin/du/json/fichier.json))

est-ce du a ça ? comment y remédier ?

merci

[NoSmoking]

j'imagine que c'est lié au fait que je fait ça pour charger le Json :

c'est le comportement normal d'un navigateur quand on passe par un LIEN vers.

Mais le problème c'est que mon prof nous a dit que c'était la seul solution pour récupérer le Json dans le Jquery car vu que je JSON est asynchrone il serait impossible de faire ($.get(chemin/du/json/fichier.json))

je supputes que tu as mal interprété ce qu'il a dit

Sur tes liens il faut que tu déclenches une "action javascript", que tu appelles une fonction, qui contient la requête Ajax et ce en inhibant l'action par défaut pour éviter de recharger la page.

[Androzus]

C'est fort possible et pourtant dans son exemple qu'il nous il a glissé ce commentaire dedans :

var articles = $.get('http://..../..../articles.json');
ca n'existe pas : javascript est asynchrone

Donc ça me pomme un peut (a vrai dire je ne comprends d'ailleurs pas pourquoi ça ne fonctionne pas :/)

donc que je déclenche une fonction a partir de mon HTML et non plus a partir du Javascript c'est bien ça ?
malheureusement une de ses directives est que l'on doit géré tout le coté événement dans le JavaScript.
Je t'avoue que tu m'as perdu en disant : "et ce en inhibant l'action par défaut pour éviter de recharger la page"

[NoSmoking]

C'est fort possible et pourtant dans son exemple qu'il nous il a glissé ce commentaire dedans :

var articles = $.get('http://..../..../articles.json');
ca n'existe pas : javascript est asynchrone

effectivement tu ne peux rien faire de la variable articles, si ce n'est qu'elle contiendra l'objet XMLHttpRequest.
- jQuery.get()
- Comment dois-je formuler une requête AJAX ?

En gros il faut chercher à comprendre ce que te dit ton professeur et ne pas hésiter, si tu ne comprend pas, à lui demander des précisions, mieux vaut passer pour un imbécile que le rester

Concernant ton soucis il te faut déclencher l'action sur le onclick d'un élément, ce qui veux dire mettre l'action au préalable dans une fonction.

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
function recupData(){
  // 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);
        }
      });
    }
  });
}

ensuite pour déclencher la lecture des datas il te faut l’appeler sur un action onclick, par exemple

Code html :

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

<button onclick="recupData();">Lecture</button>

peux mieux s'écrire que cela en jQuery inside.

[Androzus]

Salut !

En temps normal j'aurait posé toute les questions nécessaire car je déteste rester sur des incompréhension ^^. mais la il nous a fait une démo 2 3 explication et est partie rejoindre des client et je ne l'ai pas revu depuis 1 mois, il est assez peu dispo par e-mail bref autant dire que c'est assez compliqué :/.

Pour en revenir a mon problème j'ai du mal a saisir la différence entre la fonction que tu a mise est la mienne qui est :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
 
var templateListeArt = $('#listeArticlesTemp').html();
 
$('#articlesInformatiques').click(function(){
   var url = $(this).attr('href');
 
   $.getJSON(url, function(data){		
         var html = Mustache.render(templateListeArt,data);
         $('#contenuBlog').html(html);
      });
});

enfin si mais ducoup d'après ce que je comprends ça reviendrais a faire ça :

$.getJSON('url_json.js', Function(data))

mais ducoup ça marche pas ça nan ? :/

je pense que je confonds pas mal de chose... Et malheureusement j'ai beau de me documenter au maximum ayant commencer la programmation web y a seulement quelques semaines c'est un peu chaud :/


EDIT : Ah nan ça fonctionne de faire $.getJSON('url_json.js', Function(data))
supeeer !! Je te tiens au courant pour la suite des evenement alors mais je pense que tout devrait marcher maintenant Tu assures merci beaucoup !!

EDIT 2 : Okay tout est bon c'est super haha je suis trop content ! Je vasi essayer d'externaliser les template maintanant parce que bon je les ai mis dans des balise script dans mon index c'est un peu crado, et je vais essayer d'utiliser le $.post pour mettre des commentaires.

en tout cas merci pour ton aide et ta patience !

[NoSmoking]

Tu gagnerais à utiliser les data-xxx et une class pour n'avoir qu'une fonction à gérer.

En partant sur la bas du code que j'ai mis plus haut cela pourrait donner

Code html :

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

<button class="action" data-template="url_template.html" data-source="url_json.js">Liste forums</button>

et la fonction

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
26
  $('.action').on( 'click', function(event){
    // event.preventDefault(); pas utile si ce n'est pas un lien A
    var urlTemplate = $(this).data('template'),
        urlSource   = $(this).data('source');
    // lecture du template
    $.ajax({
      url: urlTemplate,// -> 'url_template.html',
      // récup. template au format text en non html
      dataType: 'text',
      success: function(template){
        // lecture des données de remplissage
        $.ajax({
          url: urlSource,// -> 'url_json.js',
          dataType: "json",
          success: function(data){
              // mise en action mustache
              var html = Mustache.render (template, data);
              $('#listeForums').html(html);
          },
          error: function(error){
              console.log('ERREUR : ', error.statusText);
          }
        });
      }
    });
  });