Ajax due Mon 19 Feb 11:00

In completing this assignment you will:
...egrate an Ajax call with our existing application.


At the end of this assignment your book selling application should have the following pages:
From lab day assignment and contains a proof-of-concept for an Ajax call that returns data from the database.

Modify the listing to books to show only book title, authors, condition and price. The final desired behavior:
  • when the user hovers over a row (containing book information) slightly modify the background or color so it appears to the highlighted
  • if the user clicks on a row trigger an Ajax call to extract the remainder of the listing information (which will be displayed in a popup of some kind); the popup should be a fairly nicely formatted and should contain all relevant data for the listing (condition, price, title, authors, publisher, year, seller notes, and seller email address).

Some suggestions that may be helpful:

  • One challenge is to figure out how to determine the listing id number based on which book was clicked. One approach is to add an id attribute to the elements that encloses the book data. For example, suppose that I'm using an HTML table to display the listings. In that case my code could look like this:
    <tr id="listing_4"><td>....</td><td>....</td></tr>
    <tr id="listing_7"><td>....</td><td>....</td></tr>
    <tr id="listing_8"><td>....</td><td>....</td></tr>
    Where the numbers 4, 7, and 8 are the database listing_id values. Then when a table row is clicked I can extract the id, chop off the first eight characters to be left with the number (which I then pass to the Ajax handler.
  • Our Ajax handler needs to pull (and return) a bunch of data rather than just a single ISBN as we did in the lab day assignment. This is typically handled by passing the data as a JSON object. One fairly convenient way of doing this is to use PHP's pg_fetch_object to retrieve an entire row as an object. Then you can apply json_encode to convert it to a JSON string. Then echo the string. In the Ajax callback function you can use Javascript's JSON.parse function to convert the string into a Javascript object.

Same as previous assignment.
Same as previous assignment.
Same as previous assignment.
Same as previous assignment.

Quick Links