Garder des données après rafraichissement de la page
Résolu/Fermé
Frank_N
Messages postés
42
Date d'inscription
dimanche 3 juin 2018
Statut
Membre
Dernière intervention
8 août 2019
-
17 janv. 2019 à 13:32
Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 2019 - 18 janv. 2019 à 13:05
Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 2019 - 18 janv. 2019 à 13:05
A voir également:
- Garder des données après rafraichissement de la page
- Supprimer une page word - Guide
- Page d'accueil iphone - Guide
- Traduire une page web - Guide
- Word numéro de page 1/2 - Guide
- Créer une page facebook - Guide
2 réponses
jordane45
Messages postés
38144
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 avril 2024
4 650
Modifié le 17 janv. 2019 à 14:23
Modifié le 17 janv. 2019 à 14:23
Bonjour,
As tu la main sur le script qui est appellé par tes requêtes ajax ?
https://oc-jswebsrv.herokuapp.com/api/liens
J'ai l'impression que tu es en train de suivre un tuto ... et que la fonction d'enregistrement des liens n'est pas opérationnelle (pour éviter que 100000 personnes s'amusent à ajouter de nouveaux liens )
Il semblerait donc normal que tu ne puisses récupérer que les liens qui avaient été enregistrés par le créateur du webservice.
Après.. au cas où.. il serait bien de regarder dans la console de ton navigateur ce qui se passe lorsque tu ajoutes un nouveau lien...
Pour débuguer de l'ajax, je te conseille de privilégier le navigateur FireFox
Ca te permettra de voir assez facilement le résultat de la requête Ajax
par exemple :
As tu la main sur le script qui est appellé par tes requêtes ajax ?
https://oc-jswebsrv.herokuapp.com/api/liens
J'ai l'impression que tu es en train de suivre un tuto ... et que la fonction d'enregistrement des liens n'est pas opérationnelle (pour éviter que 100000 personnes s'amusent à ajouter de nouveaux liens )
Il semblerait donc normal que tu ne puisses récupérer que les liens qui avaient été enregistrés par le créateur du webservice.
Après.. au cas où.. il serait bien de regarder dans la console de ton navigateur ce qui se passe lorsque tu ajoutes un nouveau lien...
Pour débuguer de l'ajax, je te conseille de privilégier le navigateur FireFox
Ca te permettra de voir assez facilement le résultat de la requête Ajax
par exemple :
Frank_N
Messages postés
42
Date d'inscription
dimanche 3 juin 2018
Statut
Membre
Dernière intervention
8 août 2019
17 janv. 2019 à 14:35
17 janv. 2019 à 14:35
Le script des requêtes ajax commence à la ligne 5 du code JS (normalement ajaxGet et ajaxPost sont situés dans un fichier JS a part mais ici il est directement dans le code comme je ne suis plus en local)
Ensuite c'est un exercice (OpenClassrooms) et l'envoi du lien est bien opérationnel (on peut le voir affiché à cette adresse https://oc-jswebsrv.herokuapp.com/api/liens quand le formulaire à été envoyé) il apparait a la première place (emplacement [0] du tableau) mais le souci est l'appel, si on éssaye d'envoyer le lien dans le formulaire, celui ci apparaitra bien dans l'api "liens" mais sur ma page c'est le dernier avant le mien qui sera affiché
Quand je fais ce que tu me dis avec la console j'obtient bien le bon ID de mon lien qui à été envoyé, mais c'est l'ID précédent du tableau qui est affiché en premier sur ma page
Ensuite c'est un exercice (OpenClassrooms) et l'envoi du lien est bien opérationnel (on peut le voir affiché à cette adresse https://oc-jswebsrv.herokuapp.com/api/liens quand le formulaire à été envoyé) il apparait a la première place (emplacement [0] du tableau) mais le souci est l'appel, si on éssaye d'envoyer le lien dans le formulaire, celui ci apparaitra bien dans l'api "liens" mais sur ma page c'est le dernier avant le mien qui sera affiché
Quand je fais ce que tu me dis avec la console j'obtient bien le bon ID de mon lien qui à été envoyé, mais c'est l'ID précédent du tableau qui est affiché en premier sur ma page
jordane45
Messages postés
38144
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 avril 2024
4 650
17 janv. 2019 à 17:31
17 janv. 2019 à 17:31
Le script des requêtes ajax commence à la ligne 5 du code JS (normalement ajaxGet et ajaxPost sont situés dans un fichier JS a part mais ici il est directement dans le code comme je ne suis plus en local)
Je parle du script côté serveur.
Et donc non... vu ta réponse.. tu n'y a pas accès..
Il faut que je teste de mon côté ton tuto... car c'est peut-être juste un souci dans le fonctionnement de l'api et non un problème de code de ton côté.
Donne moi le lien du tuto que je puisse regarder.
Frank_N
Messages postés
42
Date d'inscription
dimanche 3 juin 2018
Statut
Membre
Dernière intervention
8 août 2019
17 janv. 2019 à 17:35
17 janv. 2019 à 17:35
Merci déjà de prendre du temps pour pouvoir regarder :)
Je te passe le lien de l'éxercice (car oui c'est un exercice et non un tuto) et les éléments que j'ai ajouter jusque là sont les fonctions envoyerLien(), afficherLiens() (lien vers l'exo => https://openclassrooms.zendesk.com/hc/fr/articles/360002865957-%C3%89volution-des-activit%C3%A9s-corrig%C3%A9es-par-les-pairs )
Je te passe le lien de l'éxercice (car oui c'est un exercice et non un tuto) et les éléments que j'ai ajouter jusque là sont les fonctions envoyerLien(), afficherLiens() (lien vers l'exo => https://openclassrooms.zendesk.com/hc/fr/articles/360002865957-%C3%89volution-des-activit%C3%A9s-corrig%C3%A9es-par-les-pairs )
jordane45
Messages postés
38144
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 avril 2024
4 650
17 janv. 2019 à 18:09
17 janv. 2019 à 18:09
Je viens de voir....
Quand tu recharges la page ... tu es sensé récupérer la liste des liens en ajax...
mais il semble que toi, tu as conservé ce que tu avais fait dans l'activité précédente
et ta liste de lien est créée via
A aucun moment tu ne sembles faire appel au ws pour récupérer cette liste
Quand tu recharges la page ... tu es sensé récupérer la liste des liens en ajax...
mais il semble que toi, tu as conservé ce que tu avais fait dans l'activité précédente
et ta liste de lien est créée via
var contenuElt = document.getElementById("contenu"); // Parcours de la liste des liens et ajout d'un élément au DOM pour chaque lien listeLiens.forEach(function (lien) { var lienElt = creerElementLien(lien); contenuElt.appendChild(lienElt); });
A aucun moment tu ne sembles faire appel au ws pour récupérer cette liste
Frank_N
Messages postés
42
Date d'inscription
dimanche 3 juin 2018
Statut
Membre
Dernière intervention
8 août 2019
Modifié le 18 janv. 2019 à 13:27
Modifié le 18 janv. 2019 à 13:27
Merci ! J'ai un autre soucis qui ne viens de je ne sais où ... ma version du code dans codePen fonctionne parfaitement bien, mais en locale j'ai l'érreur "ajaxGet is not defined" pourtant le script du fichier ajax.js où se trouve cette fonction ajaxGet est bien présente dans mon HTML
Voici le nouveau code JS :
et mon codePen: https://codepen.io/Frank-Ngy/pen/zyXxxK?editors=0010
EDIT: probleme résolu ! j'ai mis le script dans le <head> de mon HTML tout simplement :)
Voici le nouveau code JS :
/* Activité 3 */ // Crée et renvoie un élément DOM affichant les données d'un lien // Le paramètre lien est un objet JS représentant un lien function creerElementLien(lien) { var titreElt = document.createElement("a"); titreElt.href = lien.url; titreElt.style.color = "#428bca"; titreElt.style.textDecoration = "none"; titreElt.style.marginRight = "5px"; titreElt.appendChild(document.createTextNode(lien.titre)); var urlElt = document.createElement("span"); urlElt.appendChild(document.createTextNode(lien.url)); // Cette ligne contient le titre et l'URL du lien var ligneTitreElt = document.createElement("h4"); ligneTitreElt.style.margin = "0px"; ligneTitreElt.appendChild(titreElt); ligneTitreElt.appendChild(urlElt); // Cette ligne contient l'auteur var ligneDetailsElt = document.createElement("span"); ligneDetailsElt.appendChild(document.createTextNode("Ajouté par " + lien.auteur)); var divLienElt = document.createElement("div"); divLienElt.classList.add("lien"); divLienElt.appendChild(ligneTitreElt); divLienElt.appendChild(ligneDetailsElt); return divLienElt; } function envoyerLien(lien){ ajaxPost("https://oc-jswebsrv.herokuapp.com/api/lien", lien, function(reponse) { var messageElt = document.createElement("p"); messageElt.textContent = "Lien ajouté."; document.getElementById("resultat").appendChild(messageElt); afficherLiens(); }, true); } function afficherLiens(){ ajaxGet("https://oc-jswebsrv.herokuapp.com/api/liens", function (reponse) { var liens = JSON.parse(reponse); var newLink = liens[0]; newLink = creerElementLien(newLink); contenuElt.insertBefore(newLink, contenuElt.firstChild) }); } var contenuElt = document.getElementById("contenu"); ajaxGet("https://oc-jswebsrv.herokuapp.com/api/liens", function (reponse) { var liens = JSON.parse(reponse); liens.forEach(function (lien) { var newLink = creerElementLien(lien); contenuElt.appendChild(newLink) }); }); // Crée et renvoie un élément DOM de type input function creerElementInput(placeholder, taille) { var inputElt = document.createElement("input"); inputElt.type = "text"; inputElt.setAttribute("placeholder", placeholder); inputElt.setAttribute("size", taille); inputElt.setAttribute("required", "true"); return inputElt; } var ajouterLienElt = document.getElementById("ajoutLien"); // Gère l'ajout d'un nouveau lien ajouterLienElt.addEventListener("click", function () { var auteurElt = creerElementInput("Entrez votre nom", 20); var titreElt = creerElementInput("Entrez le titre du lien", 40); var urlElt = creerElementInput("Entrez l'URL du lien", 40); var ajoutElt = document.createElement("input"); ajoutElt.type = "submit"; ajoutElt.value = "Ajouter"; var formAjoutElt = document.createElement("form"); formAjoutElt.appendChild(auteurElt); formAjoutElt.appendChild(titreElt); formAjoutElt.appendChild(urlElt); formAjoutElt.appendChild(ajoutElt); var p = document.querySelector("p"); // Remplace le bouton d'ajout par le formulaire d'ajout p.replaceChild(formAjoutElt, ajouterLienElt); // Ajoute le nouveau lien formAjoutElt.addEventListener("submit", function(e) { e.preventDefault(); var url = urlElt.value; // Si l'URL ne commence ni par "http://" ni par "https://" if ((url.indexOf("http://") !== 0) && (url.indexOf("https://") !== 0)) { // On la préfixe par "http://" url = "http://" + url; } // Création de l'objet contenant les données du nouveau lien var lien = { titre: titreElt.value, url: url, auteur: auteurElt.value }; // Envoi du lien vers le serveur envoyerLien(lien) // Remplace le formulaire d'ajout par le bouton d'ajout p.replaceChild(ajouterLienElt, formAjoutElt); // Création du message d'information var infoElt = document.createElement("div"); infoElt.classList.add("info"); infoElt.textContent = "Le lien \"" + lien.titre + "\" a bien été ajouté."; p.insertBefore(infoElt, ajouterLienElt); // Suppresion du message après 2 secondes setTimeout(function () { p.removeChild(infoElt); }, 2000); }) });
et mon codePen: https://codepen.io/Frank-Ngy/pen/zyXxxK?editors=0010
EDIT: probleme résolu ! j'ai mis le script dans le <head> de mon HTML tout simplement :)