<script type='text/javascript'>_ajaxConfig = {'_cfscriptLocation':'query.cfc', '_jsscriptFolder':'../js'};</script> <script type='text/javascript' src='../js/ajax.js'></script> <script type="text/javascript"> function doQuery() { // send data to CF DWRUtil.useLoadingMessage(); DWREngine._execute(_ajaxConfig._cfscriptLocation, null, 'queryAll', null, doQueryResults); } // call back function function doQueryResults (r) { DWRUtil.removeAllOptions("contactsSelect"); var getValue = function (thisRow) { return thisRow.id; } var getText = function (thisRow) { return thisRow.fname + ' ' + thisRow.lname; } DWRUtil.addOptions("contactsSelect", r, [getValue, getText], null); updateContactID(); } //clear Select Box function doClear() { DWRUtil.removeAllOptions("contactsSelect"); DWRUtil.setValue("contactID",""); } //update contactID Box function updateContactID() { SelectedContactID = DWRUtil.getValue("contactsSelect"); DWRUtil.setValue("contactID",SelectedContactID); } </script> <fieldset> <legend>ajaxCFC query retrieval example using DWRUtil.addRows</legend> <table> <tr> <td> <input type="button" name="btnClear" value="Clear Select" onclick="doClear()"> <input type="button" name="btnFill" value="Fill Select" onclick="doQuery()"> </td> </tr> <tr> <td> Contacts: <select name="contactsSelect" id="contactsSelect" /> </td> </tr> <tr> <td> Selected Contact ID: <input type="text" name="contactID" id="contactID" /> </td> </tr> </table> </fieldset>
<cfcomponent extends="ajax"> <cfscript> // didn't want to rely on a real db, so I defined manually the query here variables.q = queryNew('id,fname,lname,phone,location'); queryAddRow(q,1); querySetCell(q, 'id', 1); querySetCell(q, 'fname', 'Rob'); querySetCell(q, 'lname', 'Gonda'); querySetCell(q, 'phone', '954-555-5555'); querySetCell(q, 'location', 'Florida'); queryAddRow(q,1); querySetCell(q, 'id', 2); querySetCell(q, 'fname', 'Steve'); querySetCell(q, 'lname', 'Smith'); querySetCell(q, 'phone', '305-555-5555'); querySetCell(q, 'location', 'Miami'); queryAddRow(q,1); querySetCell(q, 'id', 3); querySetCell(q, 'fname', 'John'); querySetCell(q, 'lname', 'Dow'); querySetCell(q, 'phone', '212-555-5555'); querySetCell(q, 'location', 'New York'); </cfscript> <cffunction name="queryAll" output="no" access="private"> <cfreturn q /> </cffunction> </cfcomponent>