Return results from a MySQL database using jQuery/AJAX and insert into a DIV

I am working on a project for reserving classrooms. One way of reserving a room is to select a room, see if the things it has (# of seats, # of computers, etc.) is ample for whatever the person needs it for, and then make a reservation.

I have a page that displays all of the available rooms as links in an HTML table, created dynamically in PHP/MySQL. My goal is when a user clicks on a room name, the AJAX request executes a query and returns the necessary data, and then displays it in a DIV on that same page.

Right now, I'm calling an external PHP file that gets the ID of the room that's clicked and executes the query. I'm still very much a novice at jQuery, and I'm pretty sure the problem is in my jQuery script:

<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: 开发者_如何学Pythonfalse,

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

As of now, when I click on one of the room number links, nothing happens. I'm assuming that my problem resides in this script, but I'm not sure where or what. I've been reading into the ajax function in jQuery and I'm pretty sure I understand what's going on, but I'm having no luck at the moment.

---

You want to troubleshoot the following four things:

1. The HTTP Request Does the browser even issue an ajax request? If so, does it contain the form parameter you are trying to make it contain?
2. The HTTP Response Does your php script return the data you are expecting in JSON format so JQuery can automatically parse it for you? Copy and paste the response from the server into a test javascript file and see if it compiles as a valid JSON object in a javascript debugger.
3. AJAX success function Does your javascript error out? Can you step through each line of execution in a javascript debugger like firebug?
4. Click Event Handler Does your click handler properly return false so the page does not reload? Does your click event handler function fire at all upon click?

Somewhere in the above four things lies your issue. It looks to me like you just need to return false in your click handler so the page does not reload.