Requête AJAX sur un seul bouton a la fois

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Bonjour,
Alors je précise que je n'avais jamais fait de Javascript, encore moins de l'AJAX. Donc ce sont mes premiers pas.

J'ai une page présentant des cartes avec un bouton pour 'upvoter' la carte (un peu comme les messages sur ce forum). Voici à quoi ressemble le code d'une carte :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<div class="card" id="{{ card.id }}">
   <div class="card-author">
           <a class="actor" href="{% url 'show_profile' card.vigil.user.username %}">
               <img src="{{ card.vigil.picture }}">
               {{ card.vigil.user.username }}
           </a>
           a posté le {{ card.added.date }} 
           {% if show_categories %}
               dans <a href="#" class="card-category">{{ card.category }}</a>
           {% endif %}
   </div>
   <div class="row">
       <div class="col-md-8">
           <h4 class="card-heading"><a href="{{ card.link }}">{{ card.title }}</a></h4>

           <div class="card-body">
               <p>{{ card.description|truncatechars:285 }}</p>
           </div>
       </div>

       <div class="col-md-4">
           <a href="{{ card.link }}">
               <div style="background-image:url('{{ card.image }}');" class="card-image"></div>
           </a>
       </div>
   </div>
   <div class="actions">
       <ul class="list-inline">
           <li>
               {% csrf_token %}
               <button class="btn-upvote" value="{{ card.id }}"><i class="fa fa-arrow-up"></i></button>
           </li>
           <li id="counter-{{ card.id }}">{{ card.upvotes }}</li>
       </ul>
   </div>
</div>

Ce qu'il faut en retenir, c'est que le bouton de chaque carte à comme classe class="btn-upvote" et comme valeur value="{{ card.id }}". On a également un compteur d'upvote <li id="counter-{{ card.id }}">{{ card.upvotes }}</li> avec un id unique pour chaque carte.

Ce que je souhaite, c'est que quand l'utilisateur clique sur le bouton, card.upvotes s'incrémente de un. Voici ce que j'ai donc au bas de ma page :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<script>
    $(document).ready(function() {
        $(".btn-upvote").click(function(event){
            event.preventDefault();
            console.log('Bouton cliqué!');
            console.log($('.btn-upvote').val());
            upvote_card();
        }); 
    });
</script>

Pas la peine d'aller plus loin, le problème se manifeste dès ici. En effet, quelque soit le bouton sur le quel je vais cliquer, la console m'affichera toujours le dernier card.id (la carte qui est tout en haut de la page enfaite). Par exemple si la plus haute est 9 et que je clique sur la 6, console.log($('.btn-upvote').val()); affichera 9…

Pourquoi ?
Merci de votre aide!

Mon projet : OpenPlane, un utilitaire en Java pour les pilotes, les vrais !

+0 -0
Auteur du sujet

Je comprend ce que tu veux dire, mais comment l'utiliser ? Parce que event je ne le retrouve qu'a un seul endroit :

1
$(".btn-upvote").click(function(event){

Et en rajoutant .target après event, il m'affiche une erreur comme quoi il manque une parenthèse…

Merci de ton aide!

Mon projet : OpenPlane, un utilitaire en Java pour les pilotes, les vrais !

+0 -0

Cette réponse a aidé l'auteur du sujet

La variable event est passé en paramètre de ta fonction ; tu peux alors l'utiliser n'importe où dans son corps, comme n'importe quelle variable locale. Par suite :

1
2
3
4
$(".btn-upvote").click(function(event) {
    // ...
    console.log(event.target.val());
});

…ou n'importe quel autre usage de event.target.

Édité par AmauryPi

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

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