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

Ce sujet est résolu
Default
,

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éponse

1 3
Default
,

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).

Default
,

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.

Default
,

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.

Default
,

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...

Default
,

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 x 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>
Default
,

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.

Default
,

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.

Default
,

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.

Default
,

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"
}

Default
,

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"
}
Default
,

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

Default
,

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).

Default
,

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.

Default
,

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.

Default
,

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 :

Default
,

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>
Default
,

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

});
Default
,

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;
?>
Default
,

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

Default
,

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.

1 3