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.