Récupérer l'ID d'un message en cliquant sur un Input de type 'Image'
Bonjour,
j'ai une webapp Java à laquelle je souhaite ajouter quelques mécanismes "Ajax" afin de limiter les chargements de pages.
Je suis complètement débutant sur JS.
J'ai trouvé pas mal de docs qui expliquent comment récupérer des valeurs depuis des "input" notamment avec des fonctions du type document.getElementById("xyz"), mais cela suppose que cet élément soit toujours présent et porte toujours le même nom.
-> idéal dans un formulaire pour des champs tels que "nom" ou "prenom", etc.
J'ai une page qui affiche des messages d'utilisateurs. Le nombre de messages à afficher est variable et chaque message possède un identifiant.
Je souhaite ajouter à chaque message 2 images-boutons genre "like / dislike". En fonction de l'image cliquée, je déclencherai le mécanisme qui va modifier le compteur de mon objet et persister cette info en base avant de mettre à jour l'affichage sur la page et ce sans reload de celle-ci.
Ma question est donc de savoir comment faire en sorte qu'un event onclick récupère l'id d'un message et dans quel attribut de l'image stocker cet id, sachant que ma fonction devra également récupérer l'id de l'utilisateur qui a cliqué.
Actuellement, mon code Java transfère à ma JSP une Map sur laquelle je boucle pour afficher l'ensemble des messages.
Pour chaque message, j'ajoute dynamiquement 2 images (like / dislike).
Je ne peux pas stocker l'id du message dans les attributs "id" ou "name" de l'image, mais je ne vois pas trop où la stocker ailleurs.
D'autre part, la fonction appelée par le "onclick=maFonction()" doit faire la différence entre un "like" et un "dislike". Ici non plus je ne comprends pas comment et où stocker cette info si le "document.getElementById()" se base sur un nom de contrôle invariable.
Pour chaque post affiché, j'ajoute ces images :
Code:
1
2
| <input type="image" src="img/heart-plus.png" onclick="alertForKeyValue();">
<input type="image" src="img/heart-remove.png" onclick="alertForKeyValue();"> |
Le code ci-dessus ne contient plus ni "id", ni "name", ni "value", j'ai tout supprimé au fur et à mesure d'essais infructueux... ceci dit je ne sais pas vraiment où stocker mes 2 infos importantes que sont :
1) l'id du message : ${post.key.messageId}
2) le choix "like" ou "dislike"
L'id de l'utilisateur étant dans la Session, je n'aurais pas de pb pour le récupérer.
Côté JS, je n'ai rien ou presque, je cherche pour l'instant à simplement afficher dans une boîte de dialogue du type "alert()" le choix effectué, mais celle-ci ne renvoie strictement rien jusqu'à présent.
Qq1 pourrait-il m'indiquer le minimum vital pour démarrer svp ? Je tourne en rond depuis plus d'une journée sur cette broutille...
Merci d'avance.
1 pièce(s) jointe(s)
Comment stocker une valeur dynamique dans un INPUT type="IMAGE" ?
Bonjour,
j'ai l'impression que mon précédent post n'inspire personne, alors je vais tâcher d'être plus précis et factuel si tant est que le problème vienne de là ^^
-> j'ai vraiment besoin d'aide, je suis à la rue en JS
Contexte : J'ai une page Web d'un (futur) réseau social : il y a des utilisateurs, ils postent des messages, d'autres utilisateurs peuvent voter "like" ou "dislike". Ca vous rappelle quelque chose ? :)
La webapp est codée en Java. On veut du AJAX pour éviter de reload la page à chaque click.
Pièce jointe 223833
Pour voter, il y a des petits coeurs.
Pour prendre en compte un vote, on doit récupérer 3 éléments, dont un est déjà dans la session : l'ID de l'utilisateur.
-> l'affichage dépend de l'utilisateur connecté : s'il a déjà voté, on ne lui présente plus le bouton déjà cliqué, seulement les autres au cas où il voudrait modifier son vote.
Les 2 autres éléments sont :
- l'ID du message concerné. Une page contient "n" messages, les images ne doivent donc faire référence qu'à un message donné.
- la nature du vote : like ou dislike
Voici le code de la JSP qui prend l'affichage en charge. Je boucle sur une Map qui contient un nombre variable de messages. Je teste à chaque fois si l'utilisateur connecté a déjà voté ou pas sur ce message.
-> structure de la Map pour ceux qui connaissent Java : Map<Post,Integer> :
- Post : la classe qui définit un message
- Integer : une valeur 1, 0 ou -1 indiquant le vote de l'utilisateur connecté pour ce Post
L'identifiant de chaque message est contenu dans : ${post.key.messageId}
Code:
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
37
38
39
40
41
42
43
44
|
<c:forEach var="post" items="${requestScope['postVotes']}">
<div value="${post.key.messageId}">
<ul>
<c:if test="${post.key.responseLevelMessage == 0}">
<hr>
<li><font size="2"> Le ${post.key.messageDate} par
<a href="${pageContext.request.contextPath}/CentralStation?section=votePage&CurrentContext=${post.key.messageId}">${post.key.messageSender}</a>
<br>
<br> ${post.key.messageTitle}<br>
${post.key.messageContent}<br>
</font>
</c:if>
<c:if test="${post.key.responseLevelMessage > 0}">
<li><font size="1">
<a href="${pageContext.request.contextPath}/CentralStation?section=votePage&CurrentContext=${post.key.messageId}">${post.key.messageSender}</a><br>
<br> ${post.key.messageContent}<br>
</font>
</c:if>
<c:choose>
//1er cas : l'utilisateur a déjà voté "like"
<c:when test="${post.value == 1}">
<input type="hidden" id="postId" name="postId" value="${post.key.messageId}" />
<input type="image" src="img/heart-clear.png" value="${post.key.messageId}" onclick="alertForKeyValue();">
<input type="image" src="img/heart-dislike.png" value="${post.key.messageId}" onclick="alertForKeyValue();">
</c:when>
//2eme cas : l'utilisateur n'a pas voté
<c:when test="${post.value == 0}">
<input type="hidden" id="postId" name="postId" value="${post.key.messageId}" />
<input type="image" src="img/heart-like.png" value="${post.key.messageId}" onclick="alertForKeyValue();">
<input type="image" src="img/heart-dislike.png" value="${post.key.messageId}" onclick="alertForKeyValue();">
</c:when>
//3eme cas : l'utilisateur a déjà voté "dislike"
<c:when test="${post.value == -1}">
<input type="hidden" id="postId" name="postId" value="${post.key.messageId}" />
<input type="image" src="img/heart-like.png" value="${post.key.messageId}" onclick="alertForKeyValue();">
<input type="image" src="img/heart-clear.png" value="${post.key.messageId}" onclick="alertForKeyValue();">
</c:when>
</c:choose>
</li>
</ul>
</div>
</c:forEach> |
Avec JS, j'essaie pour l'instant d'afficher dans une alerte l'ID du message pour lequel un utilisateur clique, mais je n'obtiens toujours qu'un seul ID : celui du premier message affiché sur la page.
Code:
1
2
3
4
| function alertForKeyValue(){
var postId = document.getElementById("postId")
alert(postId.value);
} |
Voilà donc mon problème : je ne sais pas comment stocker pour chaque message sur la page l'ID propre à ce message. Ma fonction JS ne me renvoie que l'ID du premier message de la page.
D'autre part, je ne vois pas comment récupérer l'info indiquant si l'utilisateur vote "like", "dislike" ou juste "clear" pour annuler son précédent vote.
Mon expérience en JS n'a pas plus de 2 jours. Est-ce que qq1 parmi vous pourrait me dire comment réaliser ceci simplement ?
Merci d'avance.
