Click Ajax Select

Version 1.5

Hosted by Avoka Technologies
 
This AJAX example pulls the customer details for the selected customer and shows the results without refreshing the page. Please select one of the customers:

 

The Rico JavaScript library is used in this example. Please also see the RicoAjaxEngine for a good tutorial.

This HTML page contains a customer Select control and a <div id='customerDetails'/> element: 

<table cellspacing="8" cellpadding="8">
   <tr>
      <td> <select name="customerSelect" onclick="onCustomerChange(this);">...</select> </td>
      <td> <div id="customerDetails"/> </td>
   </tr>
</table>

When you click on the select a HTTP request (e.g. GET ajax-customer.htm?customerId=4424) is made to the AjaxCustomer page to get the customers details. These details are returned as XML/HTML with a content-type of 'text/xml': 

<ajax-response>
  <response type="element" id="customerDetails">
    HTML content...
  </response>
</ajax-response>
The Rico ajaxEngine then sets the inner text of the page's registered <div id='customerDetails'/> element with the XML content of the <response id="customerDetails"> element. Note these element ids must match.

The Rico ajaxEngine is initialised through the JavaScript page body onload function: 

<html>
...
</html">
$jsImports
<script type='text/javascript' src='prototype.js'></script>
<script type='text/javascript' src='rico.js'></script>
<script type='text/javascript'>
function registerAjax() {
   ajaxEngine.registerRequest('getCustomerInfo', 'ajax-customer.htm');
   ajaxEngine.registerAjaxElement('customerDetails');
}

function onCustomerChange(select) {
   ajaxEngine.sendRequest('getCustomerInfo', 'customerId=' + select.value);
}

addLoadEvent(registerAjax);
</script>
The initialization code above is contained in the ajax-include.htm file. Note when including the JavaScript prototype.js and rico.js files, ensure prototype.js is before rico.js as rico is dependent upon prototype.