Trouble using an asynchronous CFC proxy in CF 9
I'm having trouble with cfajaxproxy. I've copied demos and they work as far as displaying the correct cfc invocation response in the ajax debugger.
But - I can't seem to get setCallbackHandler to work. The data never comes back. This question has been asked before, but not answered.
I'm using CF 9. My code is below.
Any leads would be much appreciated.
Thanks.
<cfajaxproxy cfc="asynchproxy_ajx_notemplate" jsclassname="asynchproxy_ajx_notemplate">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJXasynchProxy_test_NoTemplate.cfc</title>
<script type="text/javascript">
// Function to find the index in an array of the first entry
// with a specific value.
// It is used to get the index of a column in the column list.
Array.prototype.findIdx = function(value){
for (var i=0; i < this.length; i++) {
if (this == value) {
return i;
}
}
}
// Use an asynchronous call to get the employees for the
// drop-down employee list from the ColdFusion server.
var getEmployees = function(){
// Create an instance of the proxy.
var e = new emp();
// If you set a callback handler for the proxy, the proxy's calls
// are asynchronous.
e.setCallbackHandler(populateEmployees);
e.setErrorHandler(myErrorHandler);
// The proxy getEmployees function represents the CFC
// getEmployees function.
e.getEmployees();
}
// Callback function to handle the results returned by the
// getEmployees function and populate the drop-down list.
var populateEmployees = function(res)
{
with(document.simpleAJAX){
var option = new Option();
option.text='Select Employee';
option.value='0';
employee.options[0] = option;
for(i=0;i<res.DATA.length;i++){
var option = new Option();
option.text=res.DATA[res.COLUMNS.findIdx('first_name')]
+ ' ' + res.DATA[[res.COLUMNS.findIdx('last_name')]];
option.value=res.DATA[res.COLUMNS.findIdx('pk_UserID')];
employee.options[i+1] = option;
}
}
}
// Use an asynchronous call to get the employee details.
// The function is called when the user selects an employee.
var getEmployeeDetails = function(id){
var e = new emp();
e.setCallbackHandler(populateEmployeeDetails);
e.setErrorHandler(myErrorHandler);
// This time, pass the employee name to the getEmployees CFC
// function.
e.getEmployees(id);
}
// Callback function to display the results of the getEmployeeDetails
// function.
var populateEmployeeDetails = function(employee)
{
var eId = employee.DATA[0][0];
var efname = employee.DATA[0][1];
var elname = employee.DATA[0][2];
var eemail = employee.DATA[0][3];
//var ephone = employee.DATA[0][4];
//var edepartment = employee.DATA[0][5];
with(document.simpleAJAX){
empData.innerHTML =
'<span style="width:100px">Employee Id:</span>'
+ '<font color="green"><span align="left">'
+ eId + '</font></span><br>'
+ '<span style="width:100px">First Name:</span>'
+ '<font color="green"><span align="left">'
+ efname + '</font></span><br>'
+ '<span style="width:100px">Last Name:</span>'
+ '<font color="green"><span align="left">'
+ elname + '</font></span><br>'
+ '<span style="width:100px">Email:</span>'
+ '<font color="green"><span align="left">'
+ eemail + '</span></font><br>';
//+ '<span style="width:100px">Phone:</span>'
//+ '<font color="green"><span align="left">'
//+ ephone + '</font></span><br>'
//+ '<span style="width:100px">Department:</span>'
//+ '<font color="green"><span align="left">'
//+ edepartment + '</font></span>';
}
}
// Error handler for the asynchronous functions.
var myErrorHandler = function(statusCode, statusMsg)
{
alert('Status: ' + statusCode + ', ' + statusMsg);
}
</script>
</head>
<body>
<!--- The form to display the employee drop-down list and
employee data. --->
<form name="simpleAJAX" method="get">
List of Employees:
<select name="employee" onChange="getEmployeeDetails(this.value)">
<script language="javascript">
getEmployees();
</script>
</select>
<br><br>
<span id="empData"></span>
</form>
</body>
</html>
AdChoices