• Choose a category
• All
• Classic-Fiction

var people = [ "Joe", "Sally" ];

friendlyPerson.greetPeople.apply( friendlyPerson, people );

The apply() method converts the array passed in as the second argument to firstclass method parameters and invokes the method on the object passed in as the first parameter. The previous code is equivalent to

friendlyPerson.greetPeople( people[0], people[1] );

Now back to the task at hand. We have to call ajaxEngine’s sendRequest() method, which takes as its first parameter the logical name of the request, and a variable number of string parameters of the form key=value representing the request parameters. Therein lies the rub. We have request parameters from different sources, and we don’t know how many we have. Let’s look at the code again:

var callParms = [];

b

callParms.push( this.id + '_request');

...

callParms.push( 'ignore_case=' + this.options.ignoreCase);

var additionalParms =

this.options.requestParameters || [];

c

for( var i=0 ; i < additionalParms.length ; i++ )

callParms.push(additionalParms[i]);

The array of parameters to send to the sendRequest() method via apply is populated from a combination of the internal state of the object, things like the ID and the lastRequestString, as well as specific properties of the Options object (for example, count, matchAnywhere, ignoreCase) b.

However, we also have to provide a mechanism for the user of our component to pass in external request parameters as well c. For this, we look for the existence of a requestParameters property on the options object. If it is non-null, it’s assumed to be an array of strings of the form key=value. The array is iterated over and added to the callParms already populated with the component-specific parameters. Finally, the request is sent via

ajaxEngine.sendRequest.apply( ajaxEngine, callParms );

Whew! Request sending all done. Now let’s hope the server is up and running and we get a response. And let’s talk about how we will handle it when it does. Licensed to jonathan zheng

Refactoring

405

Text suggest—handling the Ajax response

We went to a lot of trouble to provide a robust request-sending capability, so we’d better make sure we properly handle the response or all our hard work will be in vain. Recall that Rico’s ajaxEngine routes the request back to the handler object’s ajaxUpdate() method, passing the content of the element. So, by implication, we must write an ajaxUpdate() method, and that method will be the entry point into our response handling. The ajaxUpdate() method is shown in listing 10.24 along with its parsing helper methods, createSuggestions() and getElementContent().

Listing 10.24 Ajax response handling

ajaxUpdate: function( ajaxResponse ) {

this.createSuggestions( ajaxResponse );

Create suggestions

if ( this.suggestions.length == 0 ) {

this.hideSuggestions();

$( this.id + "_hidden").value = "";

}

else {

this.updateSuggestionsDiv();

Create and

this.showSuggestions();

show UI

this.updateSelection(0);

}

this.handlingRequest = false;

Finish handling response

if ( this.pendingRequest ) {

this.pendingRequest = false;

this.lastRequestString = this.textInput.value;

this.sendRequestForSuggestions();

Send another request

}

},

createSuggestions: function(ajaxResponse) {

this.suggestions = [];

var entries = ajaxResponse.getElementsByTagName('entry');

for ( var i = 0 ; i < entries.length ; i++ ) {

var strText = this.getElementContent(

entries[i].getElementsByTagName('text')[0]); var strValue = this.getElementContent(

entries[i].getElementsByTagName('value')[0]); this.suggestions.push({ text: strText, value: strValue });

}

},

getElementContent: function(element) {

return element.firstChild.data;

}

Licensed to jonathan zheng

406

CHAPTER 10

Type-ahead suggest

Because we want to focus solely on the Ajax mechanisms being put in place, we’ll just cover much of the content here at a high level and talk about our response handling in terms of the algorithm. The first thing we do is to parse the