Laboratory 10: JavaScript/jQuery/Ajax programming

The aim of this task is to give you some (additional) experience at jQuery and Ajax programming.

Tasks

  1. Study the HTML and jQuery code in this example to see how class attributes and event handlers can dynamically be added to a "clean" HTML document when the document is loaded.

    Now consider the simplified user registration document presented here. Implement the new JavaScript file js/user.js to perform some client-side input validation. More specifically, write jQuery code to dynamically add event handlers to add_user.html to perform the following tests:

    • On submission, test that both first and last name fields are nonempty, and do not submit the form if either are empty.
    • After typing into and then leaving the username field, test that no person with that username already exists in the database. This test should be performed asynchronously using Ajax by sending a "get" request with the given username to the PHP script find_user.php. This script gets the username from the variable user, returns the username if it exists in the database, and returns the empty string otherwise. For testing, the database initially contains the usernames "dylan", "heidi", "jolon", "rodney".

    Each validation failure should be reported in an alert box (or otherwise).

    Do not add JavaScript event handlers (or make other changes) to the HTML document.

  2. Use Ajax to implement a simple shopping cart application. A left panel should display a list of items for sale with their prices (the catalog). A right panel should display the list of items selected by the user, with their prices, and a total price (the shopping cart). The catalog should be stored in a database table on the server. The shopping cart should be stored in another database table. When the user selects an item from the catalog, or removes an item from the shopping cart, an HTTP request should automatically be sent to the server, which should update the shopping cart, and send the updated cart back to the client (as a JSON object), to be displayed by replacing the content of the right panel only.

Milestone

Complete Task 1 only

References