PART II
Chapter 9: Site and Application Architecture with Ajax 415
/* get the old style rating indicators so we transform one form to another */
var ratingChoices = $selector("#" + ratingOptions.ratingContainer.id + "
input");/* calculate number of ratings */
ratingOptions.choices = ratingChoices.length;/* save out the old values */
var choiceValues = [];
for (var i = 0; i < ratingOptions.choices; i++)
{
choiceValues[i] = ratingChoices[i].value;
}Next, the old style ratings are removed and the region is briefly hidden to avoid
potential screen painting issues./* visually modify the ratings mechanism */
ratingOptions.ratingContainer.style.visibility = "hidden";
/* delete the radios */
ratingOptions.ratingContainer.innerHTML = "";Now, a richer selection mechanism is added, in this case, a set of stars with three states,
off, hover, and selected.Defaults are set in a configuration property (defaults) for the widget with an object
indicating the individual choices states.AjaxTCR.widget.ratingWidget = {
defaults : {
choiceOff: "star_off.gif",
choiceOn: "star_hover.gif",
choiceSelected: "star_reg.gif" }
...Of course, as we saw earlier, any default value can be overridden when init()is called.NNOT EOTE We could certainly avoid three individual images and create one large image and use CSS to
show the relevant portion of the image. This would reduce our image request count, though it
does take away some of the code simplicity. We leave such an optimization to the reader since our
goal here is showing approach of the addition of Ajax to a page and not the production of the most
elegant rating widget possible.Now with all of the settings understood, we begin to add the rating images into the
page and bind their mouseover and click events for showing the different image state and
submitting the final rating. You should also note that we set the alt value to the rating
value found in the original form widget. This serves two purposes: first, it allows the script