1. 96 LAB 15. JAVASCRIPT AND AJAX WITH JQUERY
Hints:
• The $.ajax method call can be used to replace most of the Ajax cruft used in our
previous version.
• The offset method can be used to get an element’s position relative to the document
Lab 15 as a whole. (This is tricky to do in pure JavaScript, as only the offset relative to the par-
ent is available. The jQuery method travels up the DOM tree to calculate the position
relative to the whole document).
JavaScript and Ajax with jQuery • On the main jQuery Web page, click on Documentation and then use the search box to
find references to ajax and offset.
• If you want to replace the validation code, you should read up on how to add a jQuery
plugin, and how to write rules for the validate plugin.
Note: this lab is assessed, and is worth 1%. Please make sure that you get a demonstrator
or teaching fellow to mark it off for you when you have completed it.
15.3 Finishing Up
The jQuery framework makes working with JavaScript and the DOM much easier—more
compact, guaranteed to work across many platforms, and taking much of the stress out of
Get a teaching fellow or demonstrator to take a look at your work. You should show that
setting up event handlers.
your tooltip boxes are working on the soup ordering form, but are now popping up in a
position relative to the element that was rolled-over with the mouse.
15.1 Today’s Goal Lab completion record:
Student’s Name: Date: Demonstrator’s Signature
The task for this lab is to replace most of the JavaScript for the Scarfie Soup Shack with
jQuery.
But there is a small twist. Whenever you decide to use a new library or framework, you
will have to dive into the documentation to figure out how stuff works. At this point, you
should understand enough about the underlying JavaScript to be able to grasp the elements
of jQuery very quickly. So, imagine that you have just been told by your boss to “figure out
what that jQuery thing is all about.”
Fortunately, the jQuery Web site is full of useful information and tutorials to allow you to
do just that.
So, start by heading over to http://jquery.com/, and take a look at the “How jQuery
Works” tutorial.
15.2 Some Goals for Exploring jQuery
Do this: Use jQuery to replace the Ajax tooltips that you developed in Lab 14. Position the
tooltips so they appear near the rolled-over element rather than in the same place each time.
Optional: Use the validate jQuery plugin to replace the JavaScript form validation code
from Lab 12.
Optional: Use jQuery expressions to calculate the subtotals and totals on the order-form
from Lab 12.
95