Discussion :

[Lovegiver]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Lovegiver]

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.




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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[sekaijin]

il ne s'agit pas d'un problème javascript mais HTML
https://www.w3.org/TR/html401/struct...l.html#h-7.5.2

id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.

A+JYT

[Lovegiver]

Bonsoir @sekaijin

merci pour ton début de réponse.

Oui effectivement, le nom doit être unique, et c'est tout le fond de la question que je pose : comment, alors que les éléments sur ma page sont générés dynamiquement avec une boucle, faire en sorte que le click sur une image pointe uniquement vers un post spécifique ?

J'ai justement bien conscience (cf. mon message n°1) que la récupération par JS de la donnée utile (l'id du message et le type d'action : like ou dislike) ne peut pas passer par un classique getElementByID qui impliquerait que l'ID soit UNIQUE.

Du coup, que me reste-t-il comme solution ? Je ne connais pas grand chose à JS et tourne un peu en rond avec ce problème ?

Merci.

[sekaijin]

s'il sont généré en java php asp rb etc...
il suffit de mettre un compteur dans la boucle et de générer un id avec.
A+JYT

[Lovegiver]

Ajouter un compteur n'est pas un problème, mais comment la fonction JavaScript pourrait-elle connaître le nom résultant de l'ajout de cette valeur ?

Si j'ai 4 messages sur ma page qui ont respectivement comme ID : 3, 18, 27 et 36, je pourrais tout aussi bien utiliser ces valeurs, mais comment la fonction JavaScript peut-elle savoir que mon clic sur l'image concerne le post avec l'ID 27 plutôt que le 36 alors qu'elle attend un ID ou un NAME précis ?

C'est cet aspect là que je ne sais pas comment implémenter.

Par exemple, si je fais :

<input type="image" src="img/heart-plus.png" id="post-${post.key.messageId}" onclick="alertForKeyValue();">

Ma fonction JS derrière doit pouvoir prendre comme argument : document.getElementById(post-UnIDspécifique)

Comment faire ?

[Lovegiver]

OK, solution trouvée avec un peu d'aide de ce côté-ci du web.

Je fournis la réponse pour ceux que cela intéresserait plus que ma question () :

Il suffisait de mettre "this.value" dans la fonction que j'appelais.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<c:choose>
	<c:when test="${post.value == 1}">
		<input type="image" src="img/heart-plus.png"
			value="${post.key.messageId}"
			onclick="like(this.value);">
		<input type="image" src="img/heart-delete.png"
			value="${post.key.messageId}" onclick="alertForKeyValue();">
		<input type="image" src="img/heart-remove.png"
			value="${post.key.messageId}"
			onclick="dislike(this.value);">
	</c:when>
	<c:when test="${post.value == 0}">
		<input type="image" src="img/heart-plus.png"
			value="${post.key.messageId}"
			onclick="like(this.value);">
		<input type="image" src="img/heart-remove.png"
			value="${post.key.messageId}"
			onclick="dislike(this.value);">
	</c:when>
	<c:when test="${post.value == -1}">
		<input type="image" src="img/heart-plus.png"
			value="${post.key.messageId}"
			onclick="like(this.value);">
		<input type="image" src="img/heart-delete.png"
			value="${post.key.messageId}" onclick="alertForKeyValue();">
		<input type="image" src="img/heart-remove.png"
			value="${post.key.messageId}"
			onclick="dislike(this.value);">
	</c:when>
</c:choose>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
function like(value){
	alert("Like " + value);
}
 
function dislike(value){
	alert("Dislike " + value);
}