Récupérer "dynamiquement" l'attribut "value" d'une DIV en JS [Résolu]

Signaler
Messages postés
21
Date d'inscription
vendredi 22 mai 2020
Statut
Membre
Dernière intervention
15 juin 2020
-
Messages postés
21
Date d'inscription
vendredi 22 mai 2020
Statut
Membre
Dernière intervention
15 juin 2020
-
Bonjour,
Je suis entrain de travailler sur un chat que je souhaite rendre dynamique grace a AJAX. Cette partie est quasiment terminée mais je butte sur un dernier problème :
Je créer dans un 1er temps une série de liens représentant les différentes membres avec la quelle l'utilisateur courent a échanger (chaque liens a pour "value" l'id du membre en question):


<div class="card-body contacts_body">
      <ul class="contacts">
      <?php while ($data = $req->fetch(PDO::FETCH_ASSOC)) { ?>
     
      <li class="active">
       <a value="<?php echo($data['id_client']); ?>" href="#" class="chat_friend">
       <?php echo($data['id_client']);?> <!---juste pour affiche les id--->
        <div class="d-flex bd-highlight">
         <div class="img_cont">
          <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img">
          <span class="online_icon"></span>
         </div>
         <div class="user_info">
          <span><?php echo ($data['name'])?></span>
          <p><?php
          echo(getLastMessage($con,$data['id_client'])); 
          ?></p>
         </div>
        </div>
       </a>
      </li>
     
      <?php } ?>
      </ul>
     </div>



Puis en JS je fait un for pour ajouter un eventLister sur tout les liens créer pour lancer l'actualisation avec un affichage de la conversation avec le membre sur le quelle l'utilisateur a cliqué :


var getHttpRequest = function (){
 var HttpRequest = new XMLHttpRequest();
 return HttpRequest
}
var HttpRequest = getHttpRequest()






var id_custo=null
var links = document.querySelectorAll('.chat_friend')

for(var i=0;i<links.length;i++){

 var linkIndex=links[i]
 
 

 linkIndex.addEventListener('click', function(event){
  id_custo=linkIndex.getAttribute('value')
  console.log(id_custo)
  event.preventDefault()

  if(HttpRequest.readyState == 4 &HttpRequest.status == 200) {
  
   document.getElementById('changeCusto').innerHTML = HttpRequest.responseText
 
  }
 
 
  HttpRequest.open('POST','monChat2.php',true)
  HttpRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
  console.log(id_custo)
  HttpRequest.send('id_customer='+ id_custo)
 
 })


}



J'aimerai récupérer l'attribue value du liens sur le quelle j'ai cliqué dans mon code JS (ici j'ai essayé de le faire avec la variable "id_custo") pour le transmettre au fichier que j’appelle dans ma requête open (par send) mais je n'y arrive pas, en effet la variable id_custo reste systématiquement a la value du dernier tour de for et je n'arrive pas a trouver d'idée pour le faire différemment.

Merci d'avance et bonne fin de journée.


Configuration: Windows / Chrome 83.0.4103.61

2 réponses

Messages postés
28938
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
10 juillet 2020
2 609
Bonjour,

Regarde ça :
<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>TEST</title>
  </head>
  <body>
  <a data-id_custo="1" href="#" class="chat_friend">1</a>
  <a data-id_custo="2" href="#" class="chat_friend">2</a>
        
  <script>
    var id_custo=null
    var links = document.querySelectorAll('.chat_friend');

    for(var i=0;i<links.length;i++){
       var linkIndex=links[i];
       linkIndex.addEventListener('click', function(event){
        var elm = this;
        console.log('id_custo',elm.getAttribute('data-id_custo'));
       });
     
     }
    </script>
  </body>
</html>



Cordialement,
Jordane
Messages postés
21
Date d'inscription
vendredi 22 mai 2020
Statut
Membre
Dernière intervention
15 juin 2020

Ca marche, merci encore et bonne soirée !