Retour des résultats d'une base de données MySQL en utilisant jQuery/AJAX et insertion dans un DIV

Question

Je travaille sur un projet de réservation de salles de classe. Une façon de réserver une chambre est de sélectionner une pièce, de voir si les choses qu'elle a (nombre de places, nombre d'ordinateurs, etc.) sont suffisantes pour tout ce dont la personne a besoin, et ensuite faire une réservation.

J'ai une page qui affiche toutes les pièces disponibles sous forme de liens dans un tableau HTML, créé dynamiquement en PHP/MySQL. Mon objectif est lorsqu'un utilisateur clique sur un nom de pièce, la requête AJAX exécute une requête et renvoie les données nécessaires, puis l'affiche dans un DIV sur cette même page.

En ce moment, j'appelle un fichier PHP externe qui obtient l'ID de la pièce sur laquelle on a cliqué et exécute la requête. Je suis encore très novice à jQuery, et je suis sûr que le problème est dans mon script jQuery:

<script type="text/javascript"> 
$(document).ready(function() 
{ 
$('table.roomNums td a.rm-details').click(function() 
{ 
    var id = $(this).attr('id'); 

    $.ajax(
    { 
     type: 'POST', 
     url: 'roomInfo.php', 
     data: { 
      roomID: id 
     }, 
     dataType: 'json', 
     cache: false, 

     success: function(result) 
     { 
      $('#room-details').empty(); 
      $('#room-details').append("<ul>\n\t<li>Seats: " + result.numOfSeats + "</li>\n</ul>"); 
     } 
    }); 
}); 
}); 
</script> 

A partir de maintenant, lorsque je clique sur un des liens numéro de la chambre, rien ne se passe. Je suppose que mon problème réside dans ce script, mais je ne suis pas sûr où et quoi. J'ai lu dans la fonction ajax de jQuery et je suis assez sûr de comprendre ce qui se passe, mais je n'ai pas de chance pour le moment.

Answer 1

Vous voulez dépanner les quatre choses suivantes:

1. La requête HTTP Est-ce que le navigateur problème encore une demande de paiement ajax? Si oui, contient-il le paramètre de formulaire que vous essayez de le faire contenir?
2. La réponse HTTP Est-ce que votre script php renvoie les données que vous attendez au format JSON afin que JQuery puisse automatiquement les analyser pour vous? Copiez et collez la réponse du serveur dans un fichier javascript de test et vérifiez s'il est compilé en tant qu'objet JSON valide dans un débogueur JavaScript.
3. AJAX fonction de succès Votre erreur javascript est-elle désactivée? Pouvez-vous parcourir chaque ligne d'exécution dans un débogueur javascript comme firebug?
4. Cliquez sur Gestionnaire d'événements Votre gestionnaire de clics renvoie-t-il correctement la valeur false pour que la page ne se recharge pas? Est-ce que votre fonction de gestionnaire d'événement click se déclenche quand vous cliquez?

Quelque part dans les quatre choses ci-dessus se trouve votre problème. Il me semble que vous avez juste besoin de retourner false dans votre gestionnaire de clic pour que la page ne se recharge pas.