Rico

Ajax Rolodex

Select a name to the left to see the AJAX rolodex entry for the selected person.

Explanation

This example illustrates the use of Rico's ajaxEngine APIs which facilitate replacing a chunk of the page with HTML. The AJAX response that comes back to the page is a <response type="element" id="somePageElementId">. The reponse tells the engine that there is an element on the page with id somePageElementId, and that the nested HTML within the response element should become the innerHTML of the page element.

In this example, a struts action returns a chunk of HTML that looks similar to a rolodex card. This becomes the innerHTML of a div on the page which holds the card.

Any server technology that returns the response as described above could be used instead of Struts.

Code

Registration

function registerAjaxInfo() {
   ajaxEngine.registerRequest( 'getPersonInfo', '/ajax_demo/getPersonInfo' );
   ajaxEngine.registerAjaxElement( 'personInfo' );
}

This above function is invoked when the page loads. It accomplishes two things. First, it registers a request by giving it a logical name. The logical name 'getPersonInfo' becomes the name for the request represented by the URL 'getPersonInfo.do'. Secondly, the element with ID personInfo is registered with the ajax engine as en element that can have it's inner HTML replaced with a response. Think of the ajaxEngine symbol as a singleton object available to each page.

Sending the request

function getPersonInfo(selectBox) {
   var nameToLookup = selectBox.value.split(",");
   var firstName = nameToLookup[1].substring(1);
   var lastName  = nameToLookup[0];

   ajaxEngine.sendRequest( 'getPersonInfo',
                           "firstName=" + firstName,
                           "lastName=" + lastName );
}

This function is triggered by the onchange of the selectbox to in the rolodex example. It simply parses the first & last name of the selected item and passes that information to the back-end request. When the response is returned it is handled entirely by the ajax engine.

Download Rico 2.0 for more demos.