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:

$customerSelect

 

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: 

<head>
...
<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);
}
</script>
</head>
<body onload="registerAjax();">
...
The initialization code above is contained in the ajax-head.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.