11540 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'affiche dans une page html une série de cadre (l'ensemble des cadres est une seule image jpg affiché en premier) avec des noms dedans :

<div class='div_fond_cadres'><img src=Fond_cadres.jpg />
<span id=cadre01>Personne 1<span />
<span id=cadre02>Personne 2<span />
...
<div class='div_detail'></div>
</div>


Les id=cadre.. font référence à du css pour affichage au bon endroit.

Je souhaite faire afficher dans une partie l'écran (<div class='div_detail'></div>) plusieurs renseignements sur une personne d'un cadre quand je clique dessus.

Ces renseignements (prénom, adresse, naissance, ...) viennent d'une base mysql et sont accessibles avec l'id de la personne affichée que je conserve dans une table correspondant au cadre.

Pour cela je fais appel à ajax comme ceci :

$(function() {
   $('#cadre01').click(function() {
      $.ajax({
         type: GET,
         url: 'Details_personne.php?id=????',  
         success: function(details)
         {
            $('#div_detail').html(details);
         }
      });
   });
});


Le script Details_personne.php prend en paramètre l'id de la personne, lit la base de données et me renvoie les détails avec des echo ...

Mais je ne sais pas où mettre la valeur de mon id personne dans ma page html (où se trouve mes <span id=cadre...) pour la récupérer dans le paramètre url: 'Details_personne.php?id=????', ???? étant ce paramètre.

Quelqu'un peut il me dire où mettre cet id dans ma page principale afin de le récupérer dans mon url ajax ???

Merci beaucoup.