7696 sujets

Développement web côté serveur, CMS

Bonjour, je débute en jquery et pour m'entrainer un peu j'ai décidé de créer quelques pages permettant de stocker des articles en localstorage.
Sur ce code l'article est enregistré puis affiché sans soucis, mais je voudrais aussi que chaque article dispose d'un bouton pour le supprimer.
Seulement je n'arrive pas à supprimer l'article du localstorage au click sur le bouton.
Affichage de l'article:

var testLocalStorage = localStorage.getItem('mes-articles');
	if (testLocalStorage) {
		listeArticles = JSON.parse(testLocalStorage);	
        }

	for (var i = 0, nbArticles = listeArticles.length; i < nbArticles; i++){
		var html = "";
		html += '<div id="section'+i+'"class="section erase">';
		html += 	'<h2>' + listeArticles[i].title + '</h2>'
		html +=  '<p>' + listeArticles[i].content + '</p>';
		html += '<img class="img-dynamique" src="' + listeArticles[i].img + '"/>';
		html +=	'<button type="submit" id="submit'+i+'">supprimer</button>';
		html += '</div>';

              $('.articles').append(html);

Bouton censé supprimer l'article:

        var submit = "#submit" + i;
        var section = "#section" + i;

	$(submit).click(function(){
		$(this).parents(".erase").slideUp();
		alert(listeArticles[i].title);
	});	

Là j'ai juste mis un alert parce que déjà je voudrais avoir accès à l'article pour le supprimer ensuite et cela me retourne toujours "undifined". alors que si je le met au dessus du "$(submit) le titre s'affiche.

(Si vous avez d'autres conseils pour améliorer ce code hésitez pas ! Smiley smile )
Modifié par Eringer (10 Jan 2018 - 22:35)
Pour supprimer des éléments dans le localstorage il faut utiliser .clear() ou alors faire une .removeItem('ton item');
Salut ton problème d'affichage est dû à la portabilité des variables...

Le js est particulier là dessus Smiley cligne

du coup vu que tu appelles listeArticles dans une fonction la variable n'est pas connue Smiley smile

2 solutions :

Soit tu refais un getItem dans la fonction soit tu passes ta variable en argument de la fonction Smiley smile
pchlj a écrit :
du coup vu que tu appelles listeArticles dans une fonction la variable n'est pas connue Smiley smile


Je pense plutôt que le problème vient de l'indice "i". La variable "listeArticles" me semble par contre devoir exister et être visible au moment de l'exécution du alert().

La fonction de callback function(){ $(this).parents(".erase").slideUp(); alert(listeArticles[ i ].title); } est a priori exécutée en différé, donc une fois que l'exécution de la boucle est terminée et que "i" vaut "nbArticles". Or listeArticles[nbArticles] est indéfini.

Fais un alert(i) pour vérifier ce point. Si je ne me trompe pas, "i" vaudra "nbArticles" dès la première alert().

Amicalement,
Modifié par parsimonhi (11 Jan 2018 - 10:46)
Oups bien vu parsimonhi Smiley smile

en effet i n'est pas connu Smiley cligne

pour ma part j'utiliserai un data-value=i sur le bouton submit pour pouvoir le récupérer dans al fonction ensuite Smiley smile
pchlj a écrit :
en effet i n'est pas connu Smiley cligne


Je dirais plutôt qu'il est défini mais qu'il n'a pas la valeur attendue au moment de l'exécution de la fonction.

Ceci étant, on n'a qu'une partie du code. En particulier, on ne sait pas où se finit la boucle for (var i=...). En l'état, on ne peut que faire des suppositions.

Amicalement,
parsimonhi a écrit :


Je pense plutôt que le problème vient de l'indice "i". La variable "listeArticles" me semble par contre devoir exister et être visible au moment de l'exécution du alert().

La fonction de callback function(){ $(this).parents(".erase").slideUp(); alert(listeArticles[ i ].title); } est a priori exécutée en différé, donc une fois que l'exécution de la boucle est terminée et que "i" vaut "nbArticles". Or listeArticles[nbArticles] est indéfini.

Fais un alert(i) pour vérifier ce point. Si je ne me trompe pas, "i" vaudra "nbArticles" dès la première alert().

Amicalement,


Le soucis venait bel et bien de la variable i qui dès le premier tour de boucle était à 1 et non à 0 donc je ne pouvais pas accéder au premier article à l'indice 0. Et oui la variable i existe puisque présente dans la boucle


             alert(listeArticles[i-1]);


Je cherche maintenant un moyen de supprimer uniquement l'article et je ne peux utiliser removeItem("mes-articles") puisqu'il contient un tableau d'objets de tout mes articles
Alors si tu as retrouvé i Smiley cligne

maintenant tu peux faire une boucle sur le tableau, tu recrée dans cette boucle un nouveau tableau, où si la clé est égale à i tu ne met pas l'article dans le tableau, puis à la fin tu remet ton tableau à jour dans le localStorage Smiley smile


for(x in liste){
 if(x != i) newArray[x]= liste[x];
}
localStorage.setItem('mes-articles', newArray);


j'ai pas testé c'est pour illustrer ma réponse Smiley cligne