Discussion :

[Jacksons]

Salut,

Dans le cadre d'un exercice je dois charger ce template HTML en ajax quand on clique sur un produit récupéré via une API:

Code :

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

1
2
3
4
<div class="produits">
  <label>Nom : </label><span class="product-name"></span>
  <label>Marque : </label><span class="product-brand"></span>
</div>

Le but est de rajouter les détails du produit sur lequel on a cliqué.

Du coup apparemment avec jquery on peut faire

Code :

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

$.ajax(mon-template.html)

pour récupérer notre template en js.

Je récupère en effet bien quelque chose, mais je n'arrive pas à comprendre quoi ni comment l'exploiter.

Comment je fais concrètement à partir de là pour rajouter à ma classe product-name et product-brand les données que je veux ?

Je n'arrive pas à comprendre comment je peux exploiter le fichier reçu.

Merci d'avance pour vos conseils

[psychadelic]

qu'est-ce qu'il y a dans " mon-template.html " ?
du code JSON ?

pour ensuite en faire quoi, mettre les données contenues dans un objet javascript ?

[Jacksons]

Dans mon template c'est juste du code HTML justement :

Code :

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

1
2
3
4
<div class="produits">
  <label>Nom : </label><span class="product-name"></span>
  <label>Marque : </label><span class="product-brand"></span>
</div>

L'exo veut que j'envoie ce template ci-dessus via AJAX pour faire mes traitements directement en JS.

Je dois y mettre le nom et la marque du produit récupérés via une API. J'obtiens ce nom et cette marque grâce à une autre requête AJAX qui elle est fonctionnelle. Je n'arrive justement pas à faire communiquer cette autre requette avec mon template pour dire tout simplement "Toi, marque du produit obtenu via telle requête AJAX, mais toi dans le span contenant la classe product-brand"

[psychadelic]

Avec ES6, JavaScript intègre directement différentes fonctionnalités Ajax dans la fonction fetch.

Ce qui simplifie pas mal le code.

=> https://github.com/mdn/fetch-example...ster/README.md

et plus complexes aussi

=> https://gist.github.com/justsml/529d...f4b890aad5e801

[Jacksons]

Merci pour tes liens et ton aide.

Hélas je dois faire l'exo en ES5, ES6 arrivera avec l'apprentissage de React.

J'attendrai de voir la correction de l'exo, je n'ai plus d'idées là ça m'a retourné le cerveau

[psychadelic]

dans ce cas il faut utiliser la méthode load de jQuery

puisque jQuery n'est pas interdit) => http://api.jquery.com/load/

[Jacksons]

Un grand merci à toi, j'ai réussi grâce à load.

Tu veux savoir la meilleure ? Je connaissais déjà cette méthode et je n'y ait même pas pensé 1 seule seconde

Encore merci !