Adonis JS

a marqué ce sujet comme résolu.

Bonjour,

je débute avec Adonis et j’ai suivi ce tutoriel : https://scotch.io/tutorials/building-a-web-app-with-adonisjs

Tout fonctionne bien, seulement j’ai voulu rajouté quelque chose : Image utilisateur

En effet, j’ai ajouté la colonne "Status" et j’aimerais faire en sorte que dès que l’utilisateur ne clique pas sur terminé alors le status est "en cours" et lorsqu’il clique sur terminé, alors le status devient "terminé".

Voici mon code : https://hastebin.com/yemipemafo.xml

(Ligne 77) : En fait le innerText ne fonctionne pas, pourtant l’id est le bon et c’est bel et bien l’endroit où je veux que le texte soit mis.

Merci de votre aide !

+0 -0

Salut !

Tu aurais pu mettre ton code ici, ç’aurait été plus simple que de devoir aller sur un site externe  ;)

Actuellement, je ne vois pas où tu utilises ta fonction click()… C’est ça ton vrai souci ?

Par rapport au statut « En cours », si c’est le statut "par défaut" d’une tâche, pourquoi ne pas l’ajouter directement dans le template ?

Juste un détail : tu es conscient que l’ID n’est pas unique dans le document ? Je sais que jQuery prend le premier élément avec l’ID, mais je ne sais pas exactement comment réagit JavaScript, même si j’extrapole volontiers au fait que c’est le même comportement. Reste que tu ne modifieras probablement jamais que le statut de la première ligne. Il faudrait un élément qui permette de savoir quelle ligne change de statut.

+0 -0

Bonjour,

Effectivement, seule la première ligne change : 

@layout('master')

@section('content')
    <div class="box">
        <h2 class="title">Todo list</h2>

        <form action="/tasks" method="POST">
            {{ csrfField() }}

            <div class="field has-addons">
                <div class="control is-expanded">
                    <input class="input" type="text" name="title" value="{{ old('title', '') }}" placeholder="Nom de ce qu'il faut faire">
                </div>
                <div class="control">
                    <button type="submit" class="button is-primary">
                        Ajouter
                    </button>
                </div>
            </div>
            
            {{ elIf('<p class="help is-danger">$self</p>', getErrorFor('title'), hasErrorFor('title')) }}
        </form>
    </div>
    
    @if(old('notification'))
        <div class="notification is-success">
            {{ old('notification') }}
        </div>
    @endif

    <div class="box">
        <h1 class="title">Liste</h1>

        <table class="table is-bordered is-striped is-narrow is-fullwidth">
            <thead>
                <tr>
                   <th>Numéro</th>
                   <th>Nom</th>
                   <th>Action</th> 
                   <th>Status</th>
                </tr>
            </thead>
            <tbody>
                @each(task in tasks)
                    <tr>
                        <td>
                            {{ ($loop.index + 1) }}
                        </td>
                        <td>
                            {{ task.title }}
                        </td>
                        <td>
                            <form action="{{ 'tasks/' + task.id + '?_method=DELETE' }}" method="POST">
                                {{ csrfField() }}
                                
                                <button type="submit" class="button is-danger is-outlined">
                                    <span onclick="doneFunction()">Terminé !</span>
                                    <span class="icon is-small">
                                        <i class="fa fa-times" aria-hidden="true"></i>
                                    </span>
                                </button>
                            </form>
                        </td>

                        <td id="status-on-off">
                                <div class="input input--checkbox input--primary input--cross">
                                        <label>
                                            <p id="termine">En cours</p>
                                        </label>
                                      </div>
                        </td>

                    </tr>
                @else
                    <td colspan="4" class="has-text-centered">Vous n'avez rien à faire !</td>
                    <script></script>
                @endeach
            </tbody>
        </table>
    </div>
    

<script>
function doneFunction() {
    document.getElementById("termine").innerText = "Accompli !";
}
</script>
@endsection

En fait, le status est par défaut en "en cours", lorsque l’utilisateur clique sur "terminé !", alors le status va être remplacé par "Accompli !" mais seulement pendant une fraction de seconde et se remet immédiatement sur "en cours".

Du coup je ne sais pas quoi faire :/.

+0 -0

Tu pourrais passer l’ID de la tâche en paramètre de ta fonction au clic, et ajouter cet ID dans l’attribut id de la cellule correspondante (et ici aussi pour le paragraphe dans le label dans le div de la cellule). Ainsi, tu ciblerais correctement et aurais des IDs HTML uniques. Peut-être que ça réglera aussi le souci de changement "furtif".

Tu n’aurais pas un autre script qui mettrait le statut « En cours », justement ?

+0 -0

Il faut quelque chose qui te permette, dans doneFunction(), de savoir quelle tâche est terminée. Donc tu peux passer l’ID de la tâche en paramètre.

Il reste à permettre d’identifier la cellule de manière unique et propre à une tâche. Tu peux donc ajouter l’ID de la tâche dans l’attribut id de du paragraphe que tu dois modifier. Tu auras l’ID de la tâche dans la fonction, donc tu pourras cibler correctement où tu dois changer.

+0 -0

Ok donc pour doneFunction(), je devrais faire ceci :

                                <button type="submit" class="button is-danger is-outlined">
                                    <span onclick="doneFunction( {{task.id}} )">Terminé !</span>
                                    <span class="icon is-small">
                                        <i class="fa fa-times" aria-hidden="true"></i>
                                    </span>
                                </button>
+0 -0

Si tu passes un paramètre à une fonction, il faut bien en faire quelque chose dans ladite fonction.

Là, ce paramètre va servir à construire l'id pour cibler correctement quoi mettre à « Accompli ! ». Et pour ça, il faut encore faire la seconde modification dont j’ai parlé précédemment par rapport à cet attribut id qui vaut toujours la même chose.

Au final, on aurait quelque chose de similaire à ce qui suit.

@layout('master')

@section('content')
    <div class="box">
        <h2 class="title">Todo list</h2>

        <form action="/tasks" method="POST">
            {{ csrfField() }}

            <div class="field has-addons">
                <div class="control is-expanded">
                    <input class="input" type="text" name="title" value="{{ old('title', '') }}" placeholder="Nom de ce qu'il faut faire">
                </div>
                <div class="control">
                    <button type="submit" class="button is-primary">
                        Ajouter
                    </button>
                </div>
            </div>
            
            {{ elIf('<p class="help is-danger">$self</p>', getErrorFor('title'), hasErrorFor('title')) }}
        </form>
    </div>
    
    @if(old('notification'))
        <div class="notification is-success">
            {{ old('notification') }}
        </div>
    @endif

    <div class="box">
        <h1 class="title">Liste</h1>

        <table class="table is-bordered is-striped is-narrow is-fullwidth">
            <thead>
                <tr>
                   <th>Numéro</th>
                   <th>Nom</th>
                   <th>Action</th> 
                   <th>Status</th>
                </tr>
            </thead>
            <tbody>
                @each(task in tasks)
                    <tr>
                        <td>
                            {{ ($loop.index + 1) }}
                        </td>
                        <td>
                            {{ task.title }}
                        </td>
                        <td>
                            <form action="{{ 'tasks/' + task.id + '?_method=DELETE' }}" method="POST">
                                {{ csrfField() }}
                                
                                <button type="submit" class="button is-danger is-outlined">
                                    <span onclick="doneFunction()">Terminé !</span>
                                    <span class="icon is-small">
                                        <i class="fa fa-times" aria-hidden="true"></i>
                                    </span>
                                </button>
                            </form>
                        </td>

                        <td id="status-on-off">
                            <div class="input input--checkbox input--primary input--cross">
                                <label>
                                    <p id="termine">En cours</p>
                                </label>
                            </div>
                        </td>

                    </tr>
                @else
                    <td colspan="4" class="has-text-centered">Vous n'avez rien à faire !</td>
                    <script></script>
                @endeach
            </tbody>
        </table>
    </div>
    

<script>
function doneFunction() {
    document.getElementById("termine").innerText = "Accompli !";
}
</script>
@endsection
Quelques adaptations
+0 -0

Si tu passes un paramètre à une fonction, il faut bien en faire quelque chose dans ladite fonction.

Là, ce paramètre va servir à construire l'id pour cibler correctement quoi mettre à « Accompli ! ». Et pour ça, il faut encore faire la seconde modification dont j’ai parlé précédemment par rapport à cet attribut id qui vaut toujours la même chose.

Au final, on aurait quelque chose de similaire à ce qui suit.

@layout('master')

@section('content')
    <div class="box">
        <h2 class="title">Todo list</h2>

        <form action="/tasks" method="POST">
            {{ csrfField() }}

            <div class="field has-addons">
                <div class="control is-expanded">
                    <input class="input" type="text" name="title" value="{{ old('title', '') }}" placeholder="Nom de ce qu'il faut faire">
                </div>
                <div class="control">
                    <button type="submit" class="button is-primary">
                        Ajouter
                    </button>
                </div>
            </div>
            
            {{ elIf('<p class="help is-danger">$self</p>', getErrorFor('title'), hasErrorFor('title')) }}
        </form>
    </div>
    
    @if(old('notification'))
        <div class="notification is-success">
            {{ old('notification') }}
        </div>
    @endif

    <div class="box">
        <h1 class="title">Liste</h1>

        <table class="table is-bordered is-striped is-narrow is-fullwidth">
            <thead>
                <tr>
                   <th>Numéro</th>
                   <th>Nom</th>
                   <th>Action</th> 
                   <th>Status</th>
                </tr>
            </thead>
            <tbody>
                @each(task in tasks)
                    <tr>
                        <td>
                            {{ ($loop.index + 1) }}
                        </td>
                        <td>
                            {{ task.title }}
                        </td>
                        <td>
                            <form action="{{ 'tasks/' + task.id + '?_method=DELETE' }}" method="POST">
                                {{ csrfField() }}
                                
                                <button type="submit" class="button is-danger is-outlined">
                                    <span onclick="doneFunction()">Terminé !</span>
                                    <span class="icon is-small">
                                        <i class="fa fa-times" aria-hidden="true"></i>
                                    </span>
                                </button>
                            </form>
                        </td>

                        <td id="status-on-off">
                            <div class="input input--checkbox input--primary input--cross">
                                <label>
                                    <p id="termine">En cours</p>
                                </label>
                            </div>
                        </td>

                    </tr>
                @else
                    <td colspan="4" class="has-text-centered">Vous n'avez rien à faire !</td>
                    <script></script>
                @endeach
            </tbody>
        </table>
    </div>
    

<script>
function doneFunction() {
    document.getElementById("termine").innerText = "Accompli !";
}
</script>
@endsection
Quelques adaptations

Ymox

Je ne vois pas de quelles adaptations tu veux parler :/.

D’ailleurs, dans ton code le {{task.id}}> ne figure même pas, c’est fait exprès ?

+0 -0

Alors, j’ai réussi à apporter les modifications nécessaires (je pense) aux lignes 57 et 84 mais le reste je n’y parviens pas.

@layout('master')

@section('content')
    <div class="box">
        <h2 class="title">Todo list</h2>

        <form action="/tasks" method="POST">
            {{ csrfField() }}

            <div class="field has-addons">
                <div class="control is-expanded">
                    <input class="input" type="text" name="title" value="{{ old('title', '') }}" placeholder="Nom de ce qu'il faut faire">
                </div>
                <div class="control">
                    <button type="submit" class="button is-primary">
                        Ajouter
                    </button>
                </div>
            </div>
            
            {{ elIf('<p class="help is-danger">$self</p>', getErrorFor('title'), hasErrorFor('title')) }}
        </form>
    </div>
    
    @if(old('notification'))
        <div class="notification is-success">
            {{ old('notification') }}
        </div>
    @endif

    <div class="box">
        <h1 class="title">Liste</h1>

        <table class="table is-bordered is-striped is-narrow is-fullwidth">
            <thead>
                <tr>
                   <th>Numéro</th>
                   <th>Nom</th>
                   <th>Action</th> 
                   <th>Status</th>
                </tr>
            </thead>
            <tbody>
                @each(task in tasks)
                    <tr>
                        <td>
                            {{ ($loop.index + 1) }}
                        </td>
                        <td>
                            {{ task.title }}
                        </td>
                        <td>
                            <form action="{{ 'tasks/' + task.id + '?_method=DELETE' }}" method="POST">
                                {{ csrfField() }}
                                
                                <button type="submit" class="button is-danger is-outlined">
                                    <span onclick="doneFunction( {{task.id}} )">Terminé !</span>
                                    <span class="icon is-small">
                                        <i class="fa fa-times" aria-hidden="true"></i>
                                    </span>
                                </button>
                            </form>
                        </td>

                        <td id="status-on-off">
                            <div class="input input--checkbox input--primary input--cross">
                                <label>
                                    <p id="termine">En cours</p>
                                </label>
                            </div>
                        </td>

                    </tr>
                @else
                    <td colspan="4" class="has-text-centered">Vous n'avez rien à faire !</td>
                    <script></script>
                @endeach
            </tbody>
        </table>
    </div>
    

<script>
function doneFunction( {{task.id}} ) {
    document.getElementById("termine").innerText = "Accompli !";
}
</script>
@endsection
+0 -0

Le souci est qu’à la ligne 84, task n’est pas définie. Et même si c’était le cas, tu es en dehors de la boucle, donc tu passerais un ID fixe. Il faut que ta fonction prenne en compte l’ID que tu lui as passé ligne 57.

Pour les deux autres lignes, c’est lié : quitte à me répéter, il faut que la valeur des attributs id soient uniques dans tout le document HTML.
Pour l’instant, vu que tu génères l'id « termine » dans une boucle à la ligne 68, il va y avoir autant de fois cet ID que d’éléments à afficher, ce qui est donc problématique. La ligne 85, du coup, fait soit que tu ne modifieras jamais que le premier élément trouvé avec l'id « termine » (donc celui pour la première tâche affichée), soit que tu ne modifieras jamais rien.
Il faut donc rendre unique par boucle l'id de la ligne 68 (et quoi de mieux que l’ID de la tâche pour ça ?), mais il faut en conséquence modifier l'id utilisé ligne 85. Heureusement, tu as passé l’ID de la tâche en paramètre de la fonction, tu as donc ce qu’il te faut !

+0 -0

Ok alors voici mon code : 

@layout('master')
@section('content')
<div class="box">
   <h2 class="title">Todo list</h2>
   <form action="/tasks" method="POST">
      {{ csrfField() }}
      <div class="field has-addons">
         <div class="control is-expanded">
            <input class="input" type="text" name="title" value="{{ old('title', '') }}" placeholder="Nom de ce qu'il faut faire">
         </div>
         <div class="control">
            <button type="submit" class="button is-primary">
            Ajouter
            </button>
         </div>
      </div>
      {{ elIf('
      <p class="help is-danger">$self</p>
      ', getErrorFor('title'), hasErrorFor('title')) }}
   </form>
</div>
@if(old('notification'))
<div class="notification is-success">
   {{ old('notification') }}
</div>
@endif
<div class="box">
   <h1 class="title">Liste</h1>
   <table class="table is-bordered is-striped is-narrow is-fullwidth">
      <thead>
         <tr>
            <th>Numéro</th>
            <th>Nom</th>
            <th>Action</th>
            <th>Status</th>
         </tr>
      </thead>
      <tbody>
         @each(task in tasks)
         <tr>
            <td>
               {{ ($loop.index + 1) }}
            </td>
            <td>
               {{ task.title }}
            </td>
            <td>
               <form action="{{ 'tasks/' + task.id + '?_method=DELETE' }}" method="POST">
                  {{ csrfField() }}
                  <button type="submit" class="button is-danger is-outlined">
                  <span onclick="doneFunction( {{task.id}} )">Terminé !</span>
                  <span class="icon is-small">
                  <i class="fa fa-times" aria-hidden="true"></i>
                  </span>
                  </button>
               </form>
            </td>
            <td id="status-on-off">
               <div class="input input--checkbox input--primary input--cross">
                  <label>
                     <p id="termine">En cours</p>
                  </label>
               </div>
            </td>
            <script>
               function doneFunction( {{task.id}} ) {
               document.getElementById("termine").innerText = "Accompli !";
               }
            </script>
         </tr>
         @else
         <td colspan="4" class="has-text-centered">Vous n'avez rien à faire !</td>
         <script></script>
         @endeach
      </tbody>
   </table>
</div>
@endsection

Après pour la suite je t’avoue que je ne sais pas comment faire :/.

+0 -0

Non, on n’y est pas encore.

Laisse la définition de doneFunction() là où elle était, il ne fallait modifier que les lignes 68, 84 et 85 depuis ton code d’avant sur lequel je vais me baser.

Histoire de clarifier :

  • id => attribut HTML ;
  • ID => champ nommé « id » d’un objet, et par extension sa valeur.

Comme je l’ai déjà dit, il faut que l'id ligne 68 soit unique DANS LE CODE HTML RÉSULTANT. Il peut sembler unique dans le code que tu nous fournis, mais attention : cet id est dans une boucle, donc il va être répété, le résultat fera qu’il ne sera plus unique. Un bon moyen pour changer ça, c’est d’y ajouter quelque chose qui appartienne à ce sur quoi tu boucles. Quoi de mieux que l’ID de la tâche avec {{ task.id }} ?

Evidemment, cela va faire que la ligne 85 ne fonctionnera plus, vu que l'id « termine » tel quel n’existera plus. Il faudra là aussi ajouter l’ID de la tâche. Mais comme on l’a vu, n’est plus dans la boucle, et qui plus est, on est dans du JavaScript. Il faut bien se souvenir que le JavaScript, lui, est effectué côté client.
De plus, il faut que cette fonction puisse faire ce qu’elle a à faire quelle que soit la tâche que tu termines, c’est pour ça que l’on a passé l’ID de la tâche en paramètre ligne 57. Déjà, premier truc à faire : regarder comment récupérer un paramètre dans une fonction JavaScript.

function myFunc(example) {
            //   ^ On définit le nom du paramètre à récupérer
    console.log(example);
            //  ^ Et ici on l'utilise
}

myFunc('Voilà !');
    //  ^ Et là, on appelle la fonction en donnant une valeur en paramètre
Un exemple simplifié de fonction, de paramètre et d’utilisation

Note : si ce qui est ci-dessus est totalement nouveau pour toi, je pense qu’il te manque quelques bases de programmation sans lesquelles il risque d’être difficile de continuer — et pas uniquement par rapport à ton problème actuel.

Maintenant que tu sais comment récupérer un paramètre dans une fonction JavaScript, il ne reste plus qu’à appliquer la même logique que celles que tu as utilisée ligne 68 pour "reconstruire" l'id dont tu vas avoir besoin. Ce que je veux dire par là, c’est que si à la ligne 68 tu as fait quelque chose comme laChose{{ task.id }}, il ne faut pas faire taskId + 'lachose' ligne 85.
Et encore une fois se rappeler que ligne 85, est dans une fonction JavaScript.

+0 -0

Salut,

Malheureusement pour toi, après une rapide recherche, je n’ai pas l’impression qu’il existe des tutoriels en français.
Au passage, l’anglais a une place prépondérante en développement web / logiciel, et plus généralement en informatique, donc même si ce n’est pas facile au début, tu devrais essayer de t’habituer à lire les contenus à ce sujet en anglais.
C’est d’autant plus important lorsqu’on s’intéresse à des technologies dont la communauté est relativement restreinte comme c’est le cas ici.

Sinon, je pense qu’il aurait été mieux de créer un sujet dédié.

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte