[AJAX] Récupérer une valeur dans un div sans recharger la page

Bonjour,

Je suis entrain de faire un petit programme d'identification sur photo de classe.

1) Je choisis un nom en autocomplétion
2) Je clique sur le nom et ca me donne (Enfin c'est le but), les photos où est identifiée la personne.

Je souhaite que tout se passe sur la même page, dans le même div, jusqu'au clic sur un numéro de photo qui lui m'amènera sur une autre page.

Ca fonctionne presque sauf que je n'arrive pas à faire en sorte que le clic sur le nom sélectionné me donne les numéros de photos correspondantes juste en dessous.

Voici ce que j'ai fait (adapté d'un programme correspondant)

Ma page index :

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
45
46
47
48
   <div class="div-recherche">
		<div class="menup">Entrez le nom ou quelques lettres seulement</div>
			<input type="text" name="nom" id="nom">
 
			<!-- the container that will receive the list of products from after the ajax request -->
			<div id="nomlist"></div>
 
			<!-- this container will display the name of the selected product -->
			<div id ="resultat"></div>
 
 
<script>
$(document).ready(function(){
                          $("#nom").on("keyup", function(){
                                var nom = $(this).val();
                                //if something if typed
                                if (nom !=="") {
                                  $.ajax({
                                        // the url of the page that will handle the extraction of data from database
                                        url:"noms.php",
                                        type:"POST",
                                        cache:false,
                                        data:{nom:nom},
                                        success:function(data){
                                          // data will be displayed in the 'nomlist' container
                                          $("#nomlist").html(data);
                                          $("#nomlist").fadeIn();
                                        }  
                                  });
                                }else{
                                  // if no data found , the container 'nomlist' will be cleared and if there was a displayed list , it will be hided.
                                  $("#nomlist").html("");  
                                  $("#nomlist").fadeOut();
                                }
                          });
 
                          // when selecting a nom from the list, the textbox will get its value
                          $(document).on("click","li", function(){
                                $('#nom').val($(this).text());
                                // the value of the selected nom will be also shown in a another container down the textbox
                                //then, we hide the list of noms
                                $('#resultat').html('<a href="cherchephoto.php?resultat='+$(this).text()+'" class="lire">'+$(this).text()+'</a>');
                                //then, we hide the list of noms
                                $('#nomlist').fadeOut("fast");
                          });
                  });
                  </script>
</div>

Ma page noms.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
if (isset($_POST['nom'])) {
 
          $output = "";
 
          $nom = $_POST['nom'];
 
          $sql = "SELECT * FROM photo_identite WHERE nom LIKE '%$nom%'";
          $result = $link->query($sql);
 
          $output = '<ul>';        
 
          if ($result->num_rows > 0) {
              while ($row = $result->fetch_array()) {
                  $output .= '<li style="list-style-type: circle;">'.$row['prenom'].' '.$row['nom'].'</li>';
              }
          }else{
                $output .= '<li>Aucune correspondance</li>';
          }
 
          $output .= '</ul>';
          echo $output;
    }
	?>

Et enfin ma page cherchephoto.php (A travailler) que je souhaite afficher dans le même div-recherche

Code:

1
2
3
4
5
if (isset($_GET['resultat'])) {
 
echo $_GET['resultat'];
    }
/* requete a construire *

J'ai bien le résultat attendu mais il s'affiche dans une nouvelle page...

Quelqu'un peut m'aider svp ?

Merci par avance