412 Part II: Developing an Ajax Library^
With JavaScript on, the page load would cause a function to scan the document looking
for class values of "ajaxsuggest" and bind the appropriate JavaScript to start up the
suggestion system to sense the keystrokes and issue requests.AjaxTCR.util.event.addWindowLoadEvent(function () {
var items = AjaxTCR.util.DOM.getElementsByClassName("ajaxsuggest");
for (var i=0;i<items.length;i++)
AjaxTCR.widget.AutoSuggest.init(items[i].getAttribute("bind"),
items[i].id, "suggestionList");
}
);The code to autosuggest is basically identical to that from the previous chapter so we
omit it here, but if you view the example at http://ajaxref.com/ch9/searchsuggest.html,
you’ll see a new widget wrapper that we will introduce in the next section. Our purpose
here is to show the architecture and demonstrate, as you see in Figure 9-1, that in-page Ajax
provides the rich experience for those browsers who can run it and the traditional experience
for those who can’t.Rating Refactored
To further demonstrate the appropriate architecture of in-page Ajax, let us revisit our tried
and true rating example from chapters past. In the first basic case, there is a simple
collection of radio buttons and a submit button with no requirement for JavaScript at all.
The basic markup with some semantic ideas added is presented here:<div id="ratingWidget">
<form action="http://ajaxref.com/ch9/rate.php" method="POST"
id="ratingForm" target="_blank">FIGURE 9-1 Suggest and search with and without Ajax