Online Book Reader

Home Category

Choose a category
All
Classic-Fiction

AJAX In Action [243]

By Root 4155 0

this.xsltURL = xsltURL;

this.setOptions(options); b

Configure the component

var oThis = this;

lookupField.form.onsubmit = function(){

oThis.doSearch(); return false; };

this.initialize();

Go to previous search

}

The first four arguments of our constructor are the things we just indicated we’d have to keep up with: the URL of the page, the search field, and the two document URLs. The last parameter is our familiar options parameter for providing component configurability. The options argument is passed to the setOptions() method, which, as you recall, provides some default values for all configurable data b. Let’s look briefly at the defaults before moving on:

setOptions: function(options) {

this.options = options;

if ( !this.options.loadingImage )

this.options.loadingImage = 'images/loading.gif';

if ( !this.options.bookmarkContainerId )

this.options.bookmarkContainerId = 'bookmark';

if ( !this.options.resultsContainerId )

this.options.resultsContainerId = 'results';

if ( !this.options.bookmarkText )

this.options.bookmarkText = 'Bookmark Search';

The setOptions() method is not as succinct as its counterpart in the TextSuggest component (see chapter 10), which used the Prototype library’s extend() method to make the expression of this nice and compact. This method performs the same chores, however, and provides default values for the loading image, the ID of the element to contain the bookmark, the ID of the element to contain the result data, and, finally, the text of the generated bookmark. Recapping the mechanism, any values to these properties that live in the options object passed in by the user will override the defaults that are specified here. The resulting options object is a merged set of defaults and their overrides in a single object. These options are then used at the appropriate points throughout the rest of the example to configure the component. Licensed to jonathan zheng

498

CHAPTER 12

Live search using XSLT

With component configurability and defaults squared away, let’s turn our attention back to the constructor for a moment and recall these two unassuming lines of code:

var oThis = this;

lookupField.form.onsubmit = function(){

oThis.doSearch(); return false; };

You will recall that our script in its original form modified the HTML by putting an onsubmit handler on the search form:

Because we are striving to make our components as unobtrusive as possible, at least in terms of the amount of HTML that needs to be modified to use them, the same functionality has been provided by these two aforementioned lines of our constructor. The difference from a naming point of view is that we’ve renamed GrabNumber() to a more generic name, doSearch(), and doSearch() is a method of our component rather than a global function. Speaking of which, let’s now take a look at the doSearch() method implementation:

doSearch: function() {

if ( XSLTHelper.isXSLTSupported() )

this.doAjaxSearch();

else

this.submitTheForm();

Our smarty-pants component knows that it should be checking for XSLT support before trying to actually do XSLT processing, so the search method uses the XSLTHelper API we wrote earlier to determine whether to use XSLT processing or to just do a standard form submission. Pretty smart indeed. Our client can just call the doSearch() method and not have to worry about whether it’s doing XSLT. We’ve taken care of all the worrying for it. Let’s take each of the two forms of searching and look at them in detail. Because the form submission is simpler, we’ll look at it first:

submitTheForm: function() {

var searchForm = this.lookupField.form;

searchForm.onsubmit = function() { return true; };

searchForm.submit();

This method simply finds the reference to the appropriate form through the lookup field and changes its onsubmit to a function that returns true. This allows the search request to be submitted back to the server in an explicit way. Then the Licensed to jonathan zheng

Online Book Reader

AJAX In Action [243]

®Online Book Reader