Aide sur script permettant en dynamique sans ajax de raturer du texte

Par Fre3z69, il y a 6 ans

Javascript

Salutations,

Je viens vers vous, étant une bille en JS (pas pris le temps encore d'apprendre les bases)

J'ai une liste de course qui est affiché sur un format simple en HTML dans le quel, j'aimerais que si on clique sur la liste (DT) alors ça rature le texte et place la class CSS en plus ce celle existante à text-sucess

Je précisse que je travail le projet sous Bootstrap.

Voici le code de ma liste :

<div class="mt-2"></div> <ul class="list-group"> <form action="" method="post" id="deletcart" enctype="multipart/form-data"> <dt class="list-group-item"> <div class="row"> <div class="col-md-4"> 5 X Concombre </div> <div class="col-md-4 offset-md-4 text-right"> <a href="" class="" title="Modifier l'article"><i class="fas fa-edit text-primary"></i></a> <button type="submit" name="articleid" value="1" class="btn btn-link btn-small" title="Valider l'achat"> <i class="fas fa-check text-success"></i> </button> </div> </div> </dt> <dt class="list-group-item"> <div class="row"> <div class="col-md-4"> 6 X Courgettes </div> <div class="col-md-4 offset-md-4 text-right"> <a href="" class="" title="Modifier l'article"><i class="fas fa-edit text-primary"></i></a> <button type="submit" name="articleid" value="2" class="btn btn-link btn-small" title="Valider l'achat"> <i class="fas fa-check text-success"></i> </button> </div> </div> </dt> <dt class="list-group-item"> <div class="row"> <div class="col-md-4"> 4 X Poirreaux </div> <div class="col-md-4 offset-md-4 text-right"> <a href="" class="" title="Modifier l'article"><i class="fas fa-edit text-primary"></i></a> <button type="submit" name="articleid" value="3" class="btn btn-link btn-small" title="Valider l'achat"> <i class="fas fa-check text-success"></i> </button> </div> </div> </dt> </form> </ul>

Je sais qu'en générale, on fait pas pour les autres ici mais on aide, mais là, j'ai vraiment besion de comprendre la structure et si ça serait possible de me présenter le truc de manière à ce que je tente de faire le code moi même, ça serait cool.

Précission: C'est cette élément là que je cherche à rendre "cliclable ;-)

<dt class="list-group-item"> .... </dt>

Merci à vous.

Bien cordialement.

42 réponses

alain_47, il y a 6 ans

Bonjour,
Je pense que tu vas devoir reprendre le JS. Mais ici, avec tous les tutos, tu es à bonne ecole.
Ce qui me semble embetant dans la structure de ton code, c est que tu repetes plusieurs lignes de code pour chaque tache à faire (item).
Si tu as 20 taches, ton code HMTL va grossir exagerement.
Tu devrais plutot essayer de faire une boucle.
En premiere analyse, vite faite, je ferai un quelque chose comme ca :

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Todo list</title> </head> <body> <div> <ul> <!-- boucle en JS : for(i==0; i<todoList.length; i++ --> <li> todoList[i] <a href="#">x</a> </li> <!-- --> </ul> </div> <form action="" method="get"> <input type="text" name="newItem"> </form> <script src="01.js"></script> </body> </html>

et les taches à faire, tu les mets dans un array :

todoList = ['tache1'; 'taches2'; ...];
et meme
todoList = [
['tache1'; '0' ];
['tache2'; '0'];
['tache3'; '1'];
];

(avec 0 -> tache à faire et 1-> tache faite (donc à barrer)

Il me semble, de memoire, que le tuto sur 'SVELTE' prend l exemple d une todo list . T u peux y jeter un coup d oeil.
Bye.

Fre3z69, il y a 6 ans

Je te remercie de ta réponse.

En fait, je génére ma liste en PHP dans une appli qui j'ai fait pour mon usage personnel.

Une fois ma liste terminée, je génére une page HTML avec le JS. J'importe le CSS et le JS depuis le net via par exemple :

<link rel="stylesheet" href="http://bootswatch.com/flatly/bootstrap.min.css">

Donc, cette liste, n'est pas ammenée à changée une fois sur le fichier texte.

Ce que je souhaite faire, c'est pour le pure exercise.

Donc, c'est sur ça en fait, que j'aimerais jouer.

Je sais pas aussi si c'est possible de garder en mémoire les informations transmisent de manière à ne pas perdre l'état de chaque liste si jamais on venait à rafraichir la page.

En tout cas, j'ai au moins vu ce qu'est SVELTE, mais j'avoue que pour moi c'est encore trop compliqué à utilisé, puis pas vraiement adapté à mon cas.

Merci à vous.

Cordialement.

alain_47, il y a 6 ans

Oui SVELTE était juste une exemple pour voir la structure ...
En PHP on peut le faire egalement, avec AJAX pour enregistrer les modifs sur le serveur dans un fichier Json par exemple.
Pas beaucoup le temps, mais je vais voir si je peux faire un petit exemple...

alain_47, il y a 6 ans

Un petit debut en PHP.
Ensuite, il faudrait :

  • enregistrer les taches dans un fichier Json,
  • les recuperer (jsondecode) pour creer le array $todoList[ ]
  • ensuite mettre en JS un 'adEventListener' sur les <a>x</a> pour mettre les taches en 'terminee"
  • faire passer l info au serveur par AJAX
  • receptionner l'info par un fichier php
  • mettre à jour le fichier Json et le array $todoList
  • et mettre à jour le HTML
    ... mais là je te laisse faire :-)
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Todo list</title> <!-- <link rel="stylesheet" href="index.css"> --> <style> li{list-style-type: circle;} a{text-decoration: none;} span{margin-left: 10px;} </style> </head> <body> <?php $todoList = [ ['tache1', '0'], ['tache2', '1'], ['tache3', '0'], ['tache4', '0'], ['tache5', '1'], ['tache6', '0'] ]; $len=count($todoList); ?> <div> <ul> <?php for($i=0; $i<$len; $i++):?> <li> <?php if($todoList[$i][1]=='1'){ echo '<s>'.$todoList[$i][0].'</s><span><a href="#">x</a></span>'; } else { echo $todoList[$i][0].'<span><a href="#">x</a></span>'; } ?> </li> <?php endfor ?> </ul> </div> <form action="" method="get"> <label>Nouvelle tâche à ajouter : </label> <input type="text" name="newItem" size="30"> </form> <script src="01.js"></script> </body> </html>
alain_47, il y a 6 ans

NB :

en HTML 5

<strike>

(pour barrer le texte) est devenu obsolete, il faut utiliser

<s>

C est bien, comme ca, on ne met qu une lettre (comme b pour bold) au lieu de 6.

Fre3z69, il y a 6 ans

Super, je vais voir ça, tenter de faire la liste mais bon, y'a à parier que manipuler le json, je vais galérer, je vais voir les tutos, mais j'ai pas des masses de temps malheureusement pour me lancer dans le JS à fond.

Quoi qu'il en soit, je vais le faire, je vais me casser la tête mdr, mais bon, si j'ai besion d'aide, je sais où cenir ;-)

Merci à toi.

Fre3z69, il y a 6 ans

Salutations, alors,

Pour le JSON, j'ai fait ceci à la fin de ma fonction qui récupére la liste:

return json_encode($courses, JSON_FORCE_OBJECT);

Dois je vraiment créer un fichier .json?

Pour récupérer du coup le JSON, et l'afficher en foreach, j'ai fait ceci:

$courses = recuperer_courses(); $todoList = json_decode($courses); ob_start(); foreach($todoList as $key => $v) { $courses_id = $v->courses_id; $article = $v->courses_article.' X '.$v->courses_quantite; $courses_achat = $v->courses_achat; ?> <div class="list-group"> <?php if($courses_achat=='1'): ?> <button type="button" id="article" class="list-group-item list-group-item-action list-group-item-success checked"><s><?= $article ?></s></button> <?php else: ?> <button type="button" id="article" class="list-group-item list-group-item-action"><?= $article ?></button> <?php endif; ?> </div> <?php } $contenu = ob_get_clean();

J'ai modifié le comportement souhaité, enfait, j'aimerais que lorsqu'on clique sur la liste, ça la rature et la mette en vert, d'où le " if($courses_achat=='1') "

Dans le script PHP, cela fonctionne parfaitement, sur le script HTML que j'exporterais, nul doute que ça le fera vu que la liste sera générée avant l'export.
Je dois encore traiter l'export et ensuite, l'ajout en JSON des nouvelles données qu'on pourra apportée dans le fichier HTML.

D'ailleur, une question, est il possible de mettre le script en haut du fichier HTML, dans une balise spécifique et donc, de le modifié en concéquence? Ceci afin d'éviter la création de plusieurs fichiers à exporter.

Suis-je sur la bonne voie ou pas du tout?

Merci beaucoup.

Cordialement.

alain_47, il y a 6 ans

Bonjour,
Désolé, en semaine, pas trop le temps.
Je vais essayer de voir plus tard.
Pour les fichiers Json, oui, il faut les enregistrer.
Ca va donner un fichier 'todolist.json' qui se structure comme cela :
{
"tache1" : "0",
"tache2" : "1",
"tache3" : "0",
"tache4" : "0",
"tache5" : "1",
"tache6" : "0"
}

alain_47, il y a 6 ans

on peut ajouter un fichier 'data.php' qu'on require au debut du fichier 'index.php' :

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Todo list</title> <!-- <link rel="stylesheet" href="index.css"> --> <style> li{list-style-type: circle;} a{text-decoration: none;} span{margin-left: 10px;} </style> </head> <body> <?php require ('datas.php'); ?> <div> <ul> <!-- boucle --> <?php for($i=0; $i<$len; $i++):?> <li> <?php if($todoList[$i][1]=='1'){ echo '<s>'.$todoList[$i][0].'</s><span><a href="#">x</a></span>'; } else { echo $todoList[$i][0].'<span><a href="#">x</a></span>'; } ?> </li> <?php endfor ?> <!-- --> </ul> </div> <form action="" method="get"> <label>Nouvelle tâche à ajouter : </label> <input type="text" name="newItem" size="30"> </form> <script src="index.js"></script> </body> </html>

et le ficher 'datas.php' sera :

<?php $contentFile=file_get_contents('todolist.json'); $contenuFile=json_decode($contentFile); foreach($contenuFile as $k=>$v){ $todoList[]=[$k, $v]; } $len=count($todoList);

Dans le fichier datas.php , on recupere les donnees qui se trouvent dans le fichier todolist.json

{ "tache1" : "0", "tache2" : "1", "tache3" : "0", "tache4" : "0", "tache5" : "1", "tache6" : "0" }
Fre3z69, il y a 6 ans

Salut,

Mon fichier JSON donne ça:

{ "0":{"courses_id":"4","courses_article":"Poivrons","courses_quantite":"3","courses_achat":"0"}, "1":{"courses_id":"3","courses_article":"Aubergines","courses_quantite":"2","courses_achat":"0"}, "2":{"courses_id":"2","courses_article":"Courgettes","courses_quantite":"1","courses_achat":"0"}, "3":{"courses_id":"1","courses_article":"Tomates","courses_quantite":"4","courses_achat":"0"} }

Cela te semble t'il correcte?

Cordialement

alain_47, il y a 6 ans

Bonsoir,
Je prefere rester sur mon exemple, avec le fichier Json initial.
Pour ajouter une tache, on utilisera le 'input' avec le JS :

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Todo list</title> <!-- <link rel="stylesheet" href="index.css"> --> <style> li{list-style-type: circle;} a{text-decoration: none;} span{margin-left: 10px;} input{padding: 10px; font-size: 16px; border: 4px solid aliceblue; border-radius: 10px;} </style> </head> <body> <?php require ('datas.php'); ?> <div> <ul> <!-- boucle --> <?php for($i=0; $i<$len; $i++):?> <li> <?php if($todoList[$i][1]=='1'){ echo '<s>'.$todoList[$i][0].'</s><span><a href="#">x</a></span>'; } else { echo $todoList[$i][0].'<span><a href="#">x</a></span>'; } ?> </li> <?php endfor ?> <!-- --> </ul> </div> <br> <label>Nouvelle tâche à ajouter : </label> <input type="text" name="newItem" size="20" value="demo"> <script src="index.js"></script> </body> </html>

et pour le fichier 'index.js' :

var input = document.querySelector('input'); input.addEventListener('change', function(e){ let valeur = this.value; this.value=""; alert(valeur); });

... ensuite, il faut envoyer la nouvelle valeur par ajax au fichier 'receptionAjax.php'... (à suivre).

Fre3z69, il y a 6 ans

Salutations.

Merci de ta réponse, je vais checker ça ce soir en rentrant du taff. Concrètement ça c'est pour le serveur web donc en php, mais penses qu'à la base je parles d'un fichier html que je génere une fois les données entrées correctement et une fois le 'cadit' validé. Donc afficher les données du json en JS et surtout pouvoir rajouter une donnée depuis ce fichier html.
Le principe pour que tu voie mieux le truc c'est :
T'es chez toi, tu accède au site local qui permet tout un tat de choses dont préparer sa liste de courses.
Tu viens à la compléter au fur et à mesure puis une fois que tu dois faire les courses tu genere un fichier html qui s'envoie par email afin que tu puisse accéder a la liste dans le magasin.
Mais imaginons que la liste n'est finalement pas complète, tu peux donc rajouter des courses depuis le fichier html.
Je sais qu'il y a des applications pour ça mais là le but c'est de me permettre de travailler tout un tat de petit projets en local. Le serveur n'est pas accessible depuis l'extérieur pour raison de sécurité.
Voilà en gros le projet. En plus là je me suis dit que ça sera une bonne chose pour me mettre au js. Enfin voilà quoi.

Merci à toi pour ton aide, mine de rien j'ai appris plus que prévu depuis cette demande
Cordialement.

alain_47, il y a 6 ans

ok je comprends.
Je pensais que tu avais un serveur non local.
Mon idee, c etait de partir d un fichier Json sur serveur, creer un fichier html et l'envoyer cote client, puis ensuite mettre à jour le client par ajax en passant par le serveur pour mettre à jour le fichier Json (c'est interessant de melanger php et javascript). Tu peux effectivement faire un programme tout en JS (c'est d'ailleurs la premiere idee qu'on peut avoir) et enregistrer cote client (puisqu'a priori, tu seras le seul à utiliser le programme). Mais quelquefois, ca peut etre utile de faire "du JS en PHP" pour pouvoir cacher ton code à l'utilisateur (quand tu veux proposer ...). Bon courage.

alain_47, il y a 6 ans

On peut un peu continuer notre projet.

En JS on aurait fait :

  • 1) JS met un ecouteur sur 'input'
  • 2) JS capture la nouvelle 'value' de input -quand 'input' change-
  • 3) JS integre la nouvelle value dans la liste à puce (par le DOM)

et bien on va faire pareil mais en passant par PHP avant la phase 3, et ca donne :

  • 1) idem

  • 2) idem

    2 a) JS envoie la nouvelle 'value' à PHP
    2 b) PHP ajoute la nouvelle 'value' dans le fichier Json ('todoList.json')
    2 b) PHP renvoie la nouvelle 'value' à JS

    3) idem.

    ici on ne modifie pas 'value' donc la valeur renvoyee par PHP est la meme que la 'value' qu'on avait deja en JS mais dans d'autres cas, on peut imaginer que PHP modifie la valeur de 'value' reçue de JS.

    ... et voila le code :

alain_47, il y a 6 ans

index.php

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Todo list</title> <!-- <link rel="stylesheet" href="index.css"> --> <style> li{list-style-type: circle;} a{text-decoration: none;} span{margin-left: 10px;} input{padding: 10px; font-size: 16px; border: 4px solid aliceblue; border-radius: 10px;} </style> </head> <body> <?php require ('datas.php'); ?> <div> <ul> <!-- boucle --> <?php for($i=0; $i<$len; $i++):?> <li> <?php if($todoList[$i][1]=='1'){ echo '<s>'.$todoList[$i][0].'</s><span><a href="#">x</a></span>'; } else { echo $todoList[$i][0].'<span><a href="#">x</a></span>'; } ?> </li> <?php endfor ?> <!-- --> </ul> </div> <br> <label>Nouvelle tâche à ajouter : </label> <input type="text" name="newItem" size="33" placeholder="30 caracteres maxi"> <script src="index.js"></script> </body> </html>
alain_47, il y a 6 ans

index.js

var input = document.querySelector('input'); input.addEventListener('change', function(e){ let valeur = this.value; this.value=""; if(valeur.length<31){ let newTask = encodeURIComponent(valeur); let xhr = new XMLHttpRequest(); xhr.onreadystatechange=function(){ if(this.readyState==4 && this.status==200){ // PHP (serveur) repond à JS (client) let response = this.responseText; // ici response = newTask // Enfin, on integre 'response' dans le DOM let newLi = document.createElement('li'); newLi.innerHTML= response + '<span><a href="#">x</a></span>'; document.querySelector('ul').appendChild(newLi); } } let method = 'POST'; let url = 'receptionAjax.php'; let async = true; xhr.open(method, url, async); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // JS (client) envoie une requete à PHP (serveur) xhr.send("newTask="+newTask); } else {alert('L\'entree est trop longue');} });
alain_47, il y a 6 ans

receptionAjax.php

<?php $newTask=$_POST["newTask"]; $newTask=htmlspecialchars($newTask); $contentFile=file_get_contents('todolist.json'); $contenu_objet=json_decode($contentFile); $contenu_objet->$newTask='0'; // ajout de newTask à la liste $contentFile=json_encode($contenu_objet, JSON_PRETTY_PRINT); file_put_contents('todolist.json', $contentFile); // PHP renvoie reponse à JS echo $newTask; ?>
alain_47, il y a 6 ans

... avec les 2 fichiers 'datas.php' et 'todolist.json' deja indiqués plus haut.

Fre3z69, il y a 6 ans

Salutations.

Merci pour ça je teste ça ce soir en espérant bien comprendre le principe. Je tenterais de l'appliquer à un autre formulaire on verra bien si j'ai bien compris.

Une question, depuis mon fichier html que je genere et télécharge, est il possible de mettre à jour le json?
De même, si je trouves comment faire, est il possible de prendre la source et la modifier depuis un espace web distant tel un cloud ou petit serveur style hébergeur ?
Je me demande cela car j'aimerais pas devoir télécharger deux fichiers sachant que le principal intérêt du fichier html est de pouvoir l'ouvrir sur tous les supports sans regarder l'os qu'il utilise.

En tout cas merci de ton aide.

Bien cordialement.

alain_47, il y a 6 ans

En fait, quelque soit ton OS, à partir du moment où tu as un navigateur internet, mon programme fonctionnera.
Il faut juste que les fichiers PHP soient sur un serveur qui lit les fichiers PHP, ce qui est le cas de beaucoup de serveurs (pour ne pas dire tous).
Pour le reste, c est du HTML et du JS ... donc lus par tous les navigateurs d'ordinateur (juste un petit bemol, dans le JS j ai declaré les variables par 'let' au lieu de 'var' : les vieux navigateurs pourraient ne pas l'accepter et bugguer).

alain_47, il y a 6 ans

Hier je me baladais sur les tutos d'ALSACREATIONS et je suis tombé sur un tuto de Rodolphe de 2013, sur une instruction que je ne connaissais pas : 'insertAdjacentHTML'.
Ca peut remplacer le 'create.element' et le 'appendchild'.
Du coup, les 3 lignes du fichier 'index.js' pour incorporer la 'response' dans le DOM peuvent s'écrire également comme ceci :

/* let newLi = document.createElement('li'); newLi.innerHTML= response + '<span><a href="#">x</a></span>'; document.querySelector('ul').appendChild(newLi); */ let ajout = '<li>' + response + '<span><a href="#"> x </a></span></li>'; document.querySelector('ul').insertAdjacentHTML('beforeEnd', ajout);

source : https://www.alsacreations.com/astuce/lire/1499-dom-insertadjacenthtml.html

Fre3z69, il y a 6 ans

Je viens de me pencher sur tes explications.

J'ai donc, reproduit pour l'AJAX sur le serveur pour afficher et remplir en AJAX le fichier JSON.

Deux soucis rencontrés:

Dans mon fichier receptionAjax, j'ai voulue faire un rediretion via HEADER pour revenir directement sur la page courses.php, mais ceci ne semble pas fonctionner.

<?php $newTask=$_POST["newTask"]; $newTask=htmlspecialchars($newTask); $contentFile=file_get_contents('../courses.json'); $contenu_objet=json_decode($contentFile); $contenu_objet->$newTask='0'; // ajout de newTask à la liste $contentFile=json_encode($contenu_objet, JSON_PRETTY_PRINT); file_put_contents('../courses.json', $contentFile); // PHP renvoie reponse à JS header('Location: ./index.php?p=courses');exit; ?>

De plus, j'aimerais rajouter dans mon json, des quantités, comme par exemple, Tache1 : 3 : X afin de pouvoir mieux gérer ma liste de course. Mais je maitrise pas du tout le json, pourrais tu me montrer comment faire pour faire ceci?

Ah, je rajoute, j'aimerais aussi rendre le X cliquable et fonctionnable, qui permettrait de supprimer une tache.
Pour la raturer, j'aimerais que lorsque l'on clique sur le LI, on puisse changer son état via une classe.
J'ai déjà une idée de cela, mais je ne serais pas comment le transmette au JSON.

var list = document.getElementById("article"); list.addEventListener("click", function(ev) { if (ev.target.tagName === "LI") { ev.target.classList.add("bg-success"); ev.target.classList.add("checked"); } }, false);

Voila, en tout cas, merci à toi pour ton aide, me reste à bien analyser encore pour mieux comprendre, mais j'ai pas mal appris.

Merci à toi.

Cordialement.

alain_47, il y a 6 ans

Bonsoir,

1) je ne sais pas pourquoi vouloir faire une redirection. ce n'est pas ton header qui va renvoyer le 'newTask', c'est le 'echo' qui doit le faire. !
le echo n'affichera rien, il transmet l'info qui est recuperée par le JS. on ne quitte pas la page initiale car on est en asynchrone.

2) oui, il manque la troisiement phase : le traitement du lien.
Ce que je pensais, c etait 3 phases : la creation du fichier json cote serveur, la liaison entre le serveur et le JS client, et enfin la gestion des
taches.
Si j'ai le temps ...

Fre3z69, il y a 6 ans

Bah en fait le écho s'affiche sur le haut du site je sais pas pourquoi.
Si je l'enlève du coup on doit rafraîchir la page pour apercevoir la liste à jour.

Du coup je me suis dit que mettre un header en fin de traitement permettait le rafraîchissement systématique de la page pour laisser apercevoir la liste nouvellement mise à jour.
Je suis sur mobile là mais dès que possible je scrennerais le rendu pour que tu t'en aperçoive.

Screen
Lien vers l'image

Edit: J'ai rajouter le screen

Grandement merci de ton aide.

Cordialement.

alain_47, il y a 6 ans

Effectivement, c'est etonnant.
Ca fonctionne tres bien chez moi (en localhost avec Laragon).
N'y a t til une erreur au niveau de ton codage (un tag qui manque, ...) ?
As tu fait un copier-coller de mon code ?

Fre3z69, il y a 6 ans

Oui, j'ai au début bêtement copié collé et testé, et même sans rien modifié ça m'a fait ça.
Le receptionAjax est dans le même dossier que la page Course.php qui est appelée, elle, via un include.
Dois-je placer cette page à la racine du site?

Edit: Ca me le fait aussi sur le serveur de prod

alain_47, il y a 6 ans

Oui, c'est res bizarre.
Le lieu des fichiers n'a rien à voir. Il faut juste que tous les fichiers soient dans le meme repertoire.
Je ne sais pas pourquoi ca te fait ca.

alain_47, il y a 6 ans

je viens de lettre les fichiers sur mon site, et ca fonctionne tres bien.
J ai juste rajouter dans le 'head' 'meta cors' et j ai du mettre le style dans un fichier css .
...

Fre3z69, il y a 6 ans

Salut,

Je te laisse voir le screen, tu verras.

Je comprends pas pourquoi, m'enfin.

Lien du screen

alain_47, il y a 6 ans

Je serai toi, je mettrai tous les fichiers concernant la todolist dans un repertoire (ca ne changera rien au niveau de l execution, mais ce sera plus propre niveau dev.
Ensuite, je ne peux pas me prononcer si je ne vois pas l'interieur des fichiers ! (le seul nom des fichiers ne me permet pas de trouver l'erreur).

Il faut que tu cherches tout seul : ouvre la console du navigateur : peut etre que tu verras une erreur ...

Mais le dysfonctionnement peut provenir de tellement de cause, qu'à distance, impossible de t'aider.

Cependant, je trouve etonnant qu'en recopiant mes fichiers (et en gardant le meme nom de fichier) , ca ne fonctionne pas. Pour mettre mes fichiers sur mon site, j ai pris des copier coller du site de Grafikart pour etre sur que ca fonctionne ... et ca fonctionne.

Eventuellement un probleme de version de PHP : es tu en PHP 7 ou en 5.6 ? (mais je n y crois pas trop).

Là, je ne peux pas t'aider.

Fre3z69, il y a 6 ans

Je suis sous PHP7.2 mais je vais faire le tuto JS de toute façon, pour le moment, je vais m'accomoder de cela, ça dérrange pas trop.

En tout cas, malgré tout, j'ai au moins pu apprendre pas mal de chose sur JS, assez pour avoir envie de me lancer dedans. J'ai même télécharger les vidéos pour me les regarder oklm au taff pendant ma pause, sachant que le réseau est pourris.

Ca serait possible, de me faire le reste, quand tu auras le temps, toujours de manière à ce que je puisse analyser et apprendre?
Quand on clique sur le LI, le transmette au JSON en modifiant l'état du 0 par 1 et lui dire de rajouter la classe bg-success.
Quand on clique sur la croix (pour moi la corbeille) tout simplement supprimer le champ correspondant dans le JSON.

Ca presse pas, en attendant, j'utilise une version full PHP, mais je suis obligé de générer la page à chaque fois.

Je te remercie de ton aide, et prends le temps, je sais qu'en semaine c'est chaud. ;-)

Très cordialement.

alain_47, il y a 6 ans

Bonsoir,
Je rencontre un probleme.
J ai mis des ID sur les taches à faire et j'arrive à les recuperer en JS ... mais uniquement pour celles qui sont enregistrées dans le fichier JSON !
Les nouvelles taches qui viennent d etre enregistrees (par le INPUT) , leur ID est invisible et le JS n'arrive pas à les voir !
Je travaille dessus.
J ai un peu modifier le code et le CSS.
Dans l'immediat, je fais faire le programme pour les taches enregistrees dans le JSON, pour les autres, je verrai plus tard si je trouve une solution au pble.
Pour l instant, voila où j en suis :
fichier datas.php

<?php $contentFile=file_get_contents('todolist.json'); // var_dump($contentFile) donne : // string(135) "{ "tache1": "0", "tache2": "1", "tache3": "0", "tache4": "0", // "tache5": "1", "tache6": "0", "tache7": "0" }" $contenuFile=json_decode($contentFile); // objet standard // var_dump($contenuFile) donne : // object(stdClass)#1 (7) { ["tache1"]=> string(1) "0" ["tache2"]=> string(1) "1" // ["tache3"]=> string(1) "0" ["tache4"]=> string(1) "0" // ["tache5"]=> string(1) "1" ["tache6"]=> string(1) "0" // ["tache7"]=> string(1) "0" } foreach($contenuFile as $k=>$v){ $todoList[]=[$k, $v]; } $len=count($todoList); file_put_contents('todolistLength.txt', $len);

...
fichier todolist.json :

{ "tache1": "0", "tache2": "1", "tache3": "0", "tache4": "0", "tache5": "1", "tache6": "0" }

fichier todolistLength.txt :

6

...
fichier index.php :

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Todo list</title> <link rel="stylesheet" href="index.css"> </head> <body> <?php require ('datas.php'); ?> <div> <ul> <?php for($i=0; $i<$len; $i++):?> <li> <?php if($todoList[$i][1]=='1'): ?> <span class='doneIcon'>x</span> <span class='doneText'><?= $todoList[$i][0] ?></span> <?php else: ?> <span class='todoIcon'><a href="#" id="<?= $i ?>">?</a></span> <span class='todoText'><?= $todoList[$i][0] ?></span> <?php endif ?> </li> <?php endfor ?> </ul> </div> <br> <label>Nouvelle tâche à ajouter : </label> <input type="text" name="newItem" size="33" placeholder="30 caracteres maxi"> <script src="index.js"></script> </body> </html>

...
fichier index.css

li{list-style-type: circle; margin-bottom: 2px;} a{text-decoration: none;} .todoIcon{background-color: rgb(236, 4, 4); cursor: pointer; margin-right: 10px; padding-left: 5px; padding-right: 5px; border-radius: 20%;} .todoText{font-weight: bold;} .doneIcon{background-color: darkseagreen; color: white; margin-right: 10px; padding-left: 5px; padding-right: 5px; border-radius: 50%;} .doneText{font-style: italic; color: forestgreen; text-decoration: line-through;} input{padding: 10px; margin-top: 10px; font-size: 16px; border: 4px solid aliceblue; border-radius: 10px;} ::placeholder{color: sandybrown;}

...
fichier receptionAjax.php

<?php $todolistLength = file_get_contents('todolistLength.txt'); // PHP receptionne la requete (POST) de JS $newTask=$_POST["newTask"]; $newTask=htmlspecialchars($newTask); $contentFile=file_get_contents('todolist.json'); $contenuFile_obj=json_decode($contentFile); $contenuFile_obj->$newTask='0'; // ajout de newTask à la liste $contentFile=json_encode($contenuFile_obj, JSON_PRETTY_PRINT); file_put_contents('todolist.json', $contentFile); $todolistLength++; file_put_contents('todolistLength.txt', $todolistLength); $responsePHP = $todolistLength.'|'.$newTask; // PHP renvoie reponse à JS (ici 2 echo) echo $responsePHP;

.. et enfin le fichier index.js :

// ******************************************************** // ***************** JS sur le INPUT ****************** // ******************************************************** var input = document.querySelector('input'); input.addEventListener('change', function(e){ let valeur = this.value; this.value=""; if(valeur.length<31){ let newTask = encodeURIComponent(valeur); let xhr = new XMLHttpRequest(); xhr.onreadystatechange=function(){ if(this.readyState==4 && this.status==200){ // PHP (serveur) repond à JS (client) let responseOriginal = this.responseText; // on separe 'id' et 'newtask' let afterSplit = responseOriginal.split('|'); let id = afterSplit[0]; let newTask = afterSplit[1]; // Enfin, on integre 'response' dans le DOM let newLi = document.createElement('li'); newLi.innerHTML= '<span class="todoIcon"><a href="#" class="test">?</a></span><span class="todoText">' + newTask; document.querySelector('ul').appendChild(newLi); /* let ul = document.querySelector('ul'); let ajout = '<li><span class="todoIcon"><a href="#" id="'+id+'">?</a></span><span class="todoText">' + newTask + '</li>'; ul.insertAdjacentHTML('beforeEnd', ajout); */ } } let method = 'POST'; let url = 'receptionAjax.php'; let async = true; xhr.open(method, url, async); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // JS (client) envoie une requete (par POST ici) à PHP (serveur) xhr.send("newTask="+newTask); } else {alert('L entree est trop longue');} }); // ******************************************************** // *************** JS sur le <a href> ***************** // ******************************************************** var a = document.querySelectorAll('a'); let len = a.length for(i=0; i<len; i++){ a[i].addEventListener('click', function(e){ e.preventDefault(); let id = e.target.id; alert('id = '+id); }); }

et voila, pour l'instant.

Fre3z69, il y a 6 ans

Salut,

Super grand merci, je regarde ça oklm ce soir en déchiffrant le code pour le comprendre.

Je vais aussi le tester. Mais franchement, merci à toi.

alain_47, il y a 6 ans

Bonjour,
Je viens de finir la dernière partie... à moitié ! Il faudra maintenant voir le pble des nouvelles taches, qui ne sont pas prises en charges par la modif.

  • J'ai changé le format du fichier Json : j ai retenu le format tableau au lieu d'objet. Plus pratique selon moi.
  • du coup, plus besoin du fichier 'todolistLength.txt'
  • dans le fichier js, je ne me suis pas embeté pour la modif du 'li' : plutot que d'aller chercher les child des span pour remplacer avec classList, j ai remplacé toute la ligne des tag HTML ('inner.HTML').
  • et enfin, dans le fichier "receptionAjax.php', j ai utilisé 2 fois le code Ajax : il aurait fallu faire une fonction, mais j ai trop galéré (avec des setimeout !) pour me rendre compte (encore merci à Grafikart pour toutes ces videos) qu'il faudrait utiliser le modele 'succes et error'...(mais pas le temps de tout revoir).
    On oublie les anciens fichiers. Les nouveaux fichiers sont :

todoList.json

[ [ "tache0", "id1" ], [ "tache1", "id0" ], [ "tache2", "id1" ], [ "tache3", "id0" ], [ "tache4", "id0" ], [ "tache5", "id0" ], [ "tache6", "id0" ] ]

datas.php

<?php $contentFile=file_get_contents('todoList.json'); $todoList=json_decode($contentFile); $count=count($todoList);

index.css

li{list-style-type: circle; margin-bottom: 2px;} a{text-decoration: none;} .todoIcon{background-color: rgb(236, 4, 4); cursor: pointer; margin-right: 10px; padding-left: 5px; padding-right: 5px; border-radius: 20%;} .todoText{font-weight: bold;} .doneIcon{background-color: darkseagreen; color: white; margin-right: 10px; padding-left: 5px; padding-right: 5px; border-radius: 50%;} .doneText{font-style: italic; color: forestgreen; text-decoration: line-through;} input{padding: 10px; margin-top: 10px; font-size: 16px; border: 4px solid aliceblue; border-radius: 10px;} ::placeholder{color: sandybrown;}

index.php

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Todo list</title> <link rel="stylesheet" href="index.css"> </head> <body> <?php require ('datas.php'); ?> <div> <ul> <?php for($i=0; $i<$count; $i++):?> <li> <?php if($todoList[$i][1]=='id1'): ?> <span class='doneIcon'>x</span> <span class='doneText'><?= $todoList[$i][0] ?></span> <?php else: ?> <span class='todoIcon'><a href="#" id="id<?= $i ?>">?</a></span> <span class='todoText'><?= $todoList[$i][0] ?></span> <?php endif ?> </li> <?php endfor ?> </ul> </div> <br> <label>Nouvelle tâche à ajouter : </label> <input type="text" name="newItem" size="33" placeholder="30 caracteres maxi"> <script src="index.js"></script> </body> </html>

index.js

// ******************************************************** // ***************** JS sur le INPUT ****************** // ******************************************************** var input = document.querySelector('input'); input.addEventListener('change', function(e){ let valeur = this.value; this.value=""; if(valeur.length<31){ // ------ phase 1 --------- var requestToPHPi = encodeURIComponent(valeur); var xhr = new XMLHttpRequest(); // ------ phase 3 --------- xhr.onreadystatechange=function(){ if(this.readyState===4){ if(this.status==200){ // Le serveur repond à JS var responseOriginal = xhr.responseText; // on separe 'id' et 'newtask' let afterSplit = responseOriginal.split('|'); let id = afterSplit[0]; let newTask = afterSplit[1]; // Enfin, on integre 'response' dans le DOM // methode 1 let newLi = document.createElement('li'); newLi.innerHTML= '<span class="todoIcon"><a href="#" id="'+id+'">?</a></span><span class="todoText">' + newTask; document.querySelector('ul').appendChild(newLi); /* methode 2 let ul = document.querySelector('ul'); let ajout = '<li><span class="todoIcon"><a href="#" id="'+id+'">?</a></span><span class="todoText">' + newTask + '</li>'; ul.insertAdjacentHTML('beforeEnd', ajout); */ } else {console.log('xhr a echoué');} } } // ------ phase 2 --------- let method = 'POST'; let url = 'receptionAjax.php'; let async = true; xhr.open(method, url, async); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // JS envoie une requete au serveur (PHP, ...) xhr.send('requestToPHPi='+requestToPHPi); } else { alert('L entree est trop longue'); } }); // ******************************************************** // *************** JS sur le <a href> ***************** // ******************************************************** var a = document.querySelectorAll('a'); let len = a.length for(i=0; i<len; i++){ a[i].addEventListener('click', function(e){ e.preventDefault(); let id = e.target.id; // ---- AJAX ---- let requestToPHPa = encodeURIComponent(id); xhra = new XMLHttpRequest(); xhra.onreadystatechange = function(){ if(this.readyState===4){ if(this.status==200){ let idphp = xhra.responseText; let idd = parseInt(idphp) + 1; let li=document.querySelector('li:nth-of-type('+idd+')'); let text = li.querySelector('span+span').textContent; li.innerHTML='<span class="doneIcon">x</span> <span class="doneText">'+text+'</span>'; } else {console.log('xhr a echoué');} } } xhra.open('POST', 'receptionAjax.php', true); xhra.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhra.send('requestToPHPa='+requestToPHPa); // --- fin de AJAX --- }); }

et enfin, receptionAjax.php

<?php // ***************** i input ***************** if(isset($_POST['requestToPHPi'])){ // PHP receptionne la requete (POST) de JS $newTask = htmlspecialchars($_POST['requestToPHPi']); // ajout de newTask à la liste $contentFile=file_get_contents('todoList.json'); $todoList=json_decode($contentFile); $count=count($todoList); $todoList[$count][0]=$newTask; $todoList[$count][1]='id0'; $contentFile=json_encode($todoList, JSON_PRETTY_PRINT); file_put_contents('todoList.json', $contentFile); $responsePHPi = $count.'|'.$newTask; // PHP renvoie reponse à JS (ici 2 echo) echo $responsePHPi; } elseif (isset($_POST['requestToPHPa'])){ // *************** a a_href *********************** $id = htmlspecialchars($_POST['requestToPHPa']); $idNumero = substr($id, 2); $contentFile=file_get_contents('todoList.json'); $todoList=json_decode($contentFile); $todoList[$idNumero][1] = "id1"; $contentFile=json_encode($todoList, JSON_PRETTY_PRINT); file_put_contents('todoList.json', $contentFile); echo $idNumero; }
alain_47, il y a 6 ans

Je m apercois qu'il est completement idiot de faire un 'require' pour 3 lignes !
C'etait utile tout au depart quand le fichier datas.php contenait les données (dans un array) mais maintenant que les données sont dans le fichier json, il faut bien evidemment re-integrer les 3 lignes dans le fichier 'index.php' (à la place du require).

Fre3z69, il y a 6 ans

Bonsoir,

Je vais regarder ça demain au calme, ce soir j'ai pas eu le temps.

Mais dans l'idée ça semble bien.
On garde l'état si on rafraichit la page?

Merci à toi.

Cordialement.

alain_47, il y a 6 ans

Merci, merci, merci ... à Grafikart !
je viens de modifier le fichier JS. il y avait 2 parties dans ce fichier (une partie 'input' et une partie 'a href'). j avais laissé une repetition de l'appel à AJAX. j ai modifié en creant une fonction. la galere !
J avais utilisé l'ancien Ajax (xmlhttprequest) mais ca ete amelioré par les 'promise' qui ensuite a été amélioré avec 'async await' ... qui a ensuite ete amelioré par 'fetch'. La rectification d'aujourd hui utilise 'fetch'.
Bien content que Grafikart ait fait une video sur fetch ! (on aurait pu traiter directement en Json mais j ai voulu passer par un fichier PHP).
Le nouveau fichier 'index.js' devient :

// --------- debut de Ajax ------- let ajax = async function (entree, from_ia){ var entreeUri = encodeURIComponent(entree); var init = { method : 'POST', headers : {'Content-Type' : 'application/x-www-form-urlencoded'}, body : from_ia + entreeUri }; try{ let response = await fetch('receptionAjax.php', init); if(response.ok){ let responseData = await response.text(); return responseData; } else {console.error('Reponse du serveur', response.status);} } catch(e) {console.log('Une erreur a été détectée. ', e);} }; // ------- fin de Ajax ------------ // ******************************************************** // ***************** JS sur le INPUT ****************** // ******************************************************** var input = document.querySelector('input'); input.addEventListener('change', function(e){ let valeur = this.value; this.value=""; if(valeur.length<31){ ajax(valeur, 'requestToPHPi=').then(function(data){ // on separe 'id' et 'newtask' let afterSplit = data.split('|'); let id = afterSplit[0]; let newTask = afterSplit[1]; // et on les integre dans le DOM let newLi = document.createElement('li'); newLi.innerHTML= '<span class="todoIcon"><a href="#" id="'+id+'">?</a></span> <span class="todoText">' + newTask; document.querySelector('ul').appendChild(newLi); }); } else { alert('L entree est trop longue'); } }); // ******************************************************** // *************** JS sur le <a href> ***************** // ******************************************************** var a = document.querySelectorAll('a'); let len = a.length for(i=0; i<len; i++){ a[i].addEventListener('click', function(e){ e.preventDefault(); let id = e.target.id; ajax(id, 'requestToPHPa=').then(function(data){ let idd = parseInt(data) + 1; console.log('idd = '+idd); let li=document.querySelector('li:nth-of-type('+idd+')'); let text = li.querySelector('span+span').textContent; li.innerHTML='<span class="doneIcon">x</span> <span class="doneText">'+text+'</span>'; }); }); }

Il reste à voir maintenant le pble du 'a href' qui ne fonctionne pas pour les nouvelles taches ajoutées en AJAX (il faut faire 'actualiser' pour que ca fonctionne, ce qui n est pas normal).

Lartak, il y a 6 ans

Bonjour.

Il reste à voir maintenant le pble du 'a href' qui ne fonctionne pas pour les nouvelles taches ajoutées en AJAX (il faut faire 'actualiser' pour que ca fonctionne, ce qui n est pas normal).

Au contraire, c'est tout à fait normal, les éléments ajoutés au listener au moment ou ton code javascript est exécuté, sont ceux qui sont déjà présent à l'affichage de la page, par conséquent les éléments ajoutés après ne sont pas écoutés par le listener, tout du moins vu ton code actuel.
Pour que ça puisse être le cas, il te faudrait par exemple, créer le listener dans une fonction que tu appelles au moment ou la page est chargée et que tu y refasse appel lorsque tu ajoutes des éléments via javascript, donc par exemple :

function addTaskLinks () { var a = document.querySelectorAll('a'); let len = a.length for (i=0; i<len; i++) { a[i].addEventListener('click', function(e) { e.preventDefault(); let id = e.target.id; ajax(id, 'requestToPHPa=').then(function(data) { let idd = parseInt(data) + 1; console.log('idd = '+idd); let li = document.querySelector('li:nth-of-type(' + idd + ')'); let text = li.querySelector('span+span').textContent; li.innerHTML='<span class="doneIcon">x</span> <span class="doneText">'+text+'</span>'; }); }); } } addTaskLinks();

Puis :

// ... document.querySelector('ul').appendChild(newLi); addTaskLinks();
alain_47, il y a 6 ans

Bonjour et merci Lartak,
Je suis dessus depuis ce matin (je suis en congés) et je suis tombé sur la meme idee. j ai mis une fonction que j appelle ensuite ... mais ca ne fonctionne tjrs pas !
Ce que je trouve bizarre, c'est lorsqu on ajoute une tache, ca s'affiche bien à l'ecran donc a priori le DOM doit en tenir compte, mais lorsque juste apres, on fait 'afficher code source', le nouvel element n'est pas pris en compte. Peut etre un pble de cache.
Je continue à travailler dessus.
Merci encore à toi.
Le code comple avec ton ajout donne ceci :

// --------- debut de Ajax ------- let ajax = async function (entree, from_ia){ var entreeUri = encodeURIComponent(entree); var init = { method : 'POST', headers : {'Content-Type' : 'application/x-www-form-urlencoded'}, body : from_ia + entreeUri }; try{ let response = await fetch('receptionAjax.php', init); if(response.ok){ let responseData = await response.text(); return responseData; } else {console.error('Reponse du serveur', response.status);} } catch(e) {console.log('Une erreur a été détectée. ', e);} }; // ------- fin de Ajax ------------ // ******************************************************** // ***************** JS sur le INPUT ****************** // ******************************************************** var input = document.querySelector('input'); input.addEventListener('change', function(e){ let valeur = this.value; this.value=""; if(valeur.length<31){ ajax(valeur, 'requestToPHPi=').then(function(data){ // on separe 'id' et 'newtask' let afterSplit = data.split('|'); let id = afterSplit[0]; let newTask = afterSplit[1]; // et on les integre dans le DOM let newLi = document.createElement('li'); newLi.innerHTML= '<span class="todoIcon"><a href="#" id="'+id+'">?</a></span> <span class="todoText">' + newTask; document.querySelector('ul').appendChild(newLi); addTaskLinks(); }); } else { alert('L entree est trop longue'); } }); // ******************************************************** // *************** JS sur le <a href> ***************** // ******************************************************** // Aide de LARTAK . function addTaskLinks () { var a = document.querySelectorAll('a'); let len = a.length for (i=0; i<len; i++) { a[i].addEventListener('click', function(e) { e.preventDefault(); let id = e.target.id; ajax(id, 'requestToPHPa=').then(function(data) { let idd = parseInt(data) + 1; console.log('idd = '+idd); let li = document.querySelector('li:nth-of-type(' + idd + ')'); let text = li.querySelector('span+span').textContent; li.innerHTML='<span class="doneIcon">x</span> <span class="doneText">'+text+'</span>'; }); }); } } addTaskLinks();
alain_47, il y a 6 ans

Bonsoir,
ca y est, ca fonctionne !
Apres avoir fait console.log un peu partout dans le fichier index.js (et notamment dans la fonction ajax, pour connaitre le contenu de 'init.body' j ai trouvé une anomalie...
Il faudra modifier plusieurs choses dans les fichiers mais dès à présent, on peut faire fonctionner en ajoutant une seule ligne dans la 2eme partie du fichier 'receptionAjax.php' :

// *************** a a_href *********************** $id = htmlspecialchars($_POST['requestToPHPa']); if($id[0] != 'i'){$id='id'.$id;} // ligne à ajouter. $idNumero = substr($id, 2); $contentFile=file_get_contents('todoList.json'); $todoList=json_decode($contentFile); $todoList[$idNumero][1] = "id1"; $contentFile=json_encode($todoList, JSON_PRETTY_PRINT); file_put_contents('todoList.json', $contentFile); echo $idNumero; }
alain_47, il y a 6 ans

L'erreur provenait de cette ligne dans le fichier index.js :

newLi.innerHTML= '<span class="todoIcon"><a href="#" id="'+id+'">?</a></span> <span class="todoText">' + newTask;

il manquait les deux lettres 'id' apres le 'id='

newLi.innerHTML= '<span class="todoIcon"><a href="#" id="id'+id+'">?</a></span> <span class="todoText">' + newTask;

Tout fonctionne normalement maintenant.
Merci à toi Lartak.

Fre3z69, il y a 6 ans

Salutations
Navré pour le temps de réponse.
J'ai testé cela, moi ça me va mais sur le serveur, le truc c'est une fois sur une page html ça va foiré.
J'ai pu créer grace à ca le raturage du texte, bien qu'il ne soit pas définitif sur la page html du au fait que je n'utilise pas de json ou bdd.

En tout cas, ça m'aura permis d'en savoir plus sur l'ajax.

Merci à vous.

Bien cordialement.