Récupérer ID d'un message cliqué créé par une boucle en php

Bonjour à tous,

Je suis à faire une messagerie privée via le Template ace-master.
J'ai donc mis la liste des messages mais je n'arrive pas a récupérer l'id.
Pour le reste -->passage par ajax et mise en place du message en forme html, je devrais y arriver mais concernant l'id, pas moyen.
Petite particularité, lorsque je clique sur le message, ça m'ouvre la fenetre sous le message.
Merci pour votre aide.

le HTML :

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
<div class="message-list-container">
  <div class="message-list" id="message-list">
    <!-- test -->
    <?php 
    $noms = $Prenom." ".$Nom;
    $req = $bdd->prepare("select * from message where de = :nvnom");
    $req ->execute(array(
    ':nvnom'=>$noms,
    ));
    $i=0;
    while($res = $req->fetch()){?>
    <div class="message-item message-unread" id="message_non_lu">
      <label class="inline">
        <input type="checkbox" class="ace" />
        <span class="lbl"></span>
      </label>
 
      <i class="message-star ace-icon fa fa-star orange2"></i>
      <input type="text" name="id_mes" class="id_mes" id="<?php echo $i ?>" value="<?php echo $res['ID'] ?>">
      <span class="sender" title="Alex John Red Smith"><?php echo $res['nom'] ?></span>
      <span class="time"><?php echo $res['date_M'] ?></span>
 
      <span class="summary">
        <span class="text" >
          <?php echo $res['sujet'] ?>
        </span>
      </span>
    </div>
 
    <?php }
    $req = null;
    ?>
    <!-- -->
  </div>
</div>

le formulaire qui s'ouvre :

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
<div class="hide message-content" id="id-message-content">
  <div class="message-header clearfix">
    <div class="pull-left">
      <span class="blue bigger-125"> Clikez to open this message </span>
 
      <div class="space-4"></div>
 
      <i class="ace-icon fa fa-star orange2"></i> &nbsp;
      <img class="middle" alt="John's Avatar" src="assets/images/avatars/avatar.png" width="32" /> &nbsp;
      <a href="#" class="sender">John Doe</a> &nbsp;
      <i class="ace-icon fa fa-clock-o bigger-110 orange middle"></i>
      <span class="time grey">Today, 7:15 pm</span>
    </div>
 
    <div class="pull-right action-buttons">
      <a href="#">
         <i class="ace-icon fa fa-reply green icon-only bigger-130"></i>
      </a>
 
      <a href="#">
        <i class="ace-icon fa fa-mail-forward blue icon-only bigger-130"></i>
      </a>
 
      <a href="#">
        <i class="ace-icon fa fa-trash-o red icon-only bigger-130"></i>
      </a>
    </div>
  </div>
</div>

le script :

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
$('.message-list .message-item .text').on('click', function() {
  var message = $(this).closest('.message-item');
 
  //if message is open, then close it
  if (message.hasClass('message-inline-open')) {
    message.removeClass('message-inline-open').find('.message-content').remove();
    return;
  }
 
  $('.message-container').append('<div class="message-loading-overlay"><i class="fa-spin ace-icon fa fa-spinner orange2 bigger-160"></i></div>');
  setTimeout(function() {
    $('.message-container').find('.message-loading-overlay').remove();
    message
      .addClass('message-inline-open')
      .append('<div class="message-content" />')
    var content = message.find('.message-content:last').html($('#id-message-content').html());
 
    //remove scrollbar elements
    content.find('.scroll-track').remove();
    content.find('.scroll-content').children().unwrap();
 
 
    content.find('.message-body').ace_scroll({
      size: 300,
      mouseWheelLock: true,
      styleClass: 'scroll-visible'
    });
 
  }, 500 + parseInt(Math.random() * 500));
 
});