cfc jquery load issue
I am trying to load data from a database using cfc and jquery but can not sort it out due to some issue on client side.
here is what I have so far:
.cfc
<cfcomponent output="false">
<cffunction name="getData" access="remote" returntype="any" output="false">
<cfquery name="test1" datasource="database">
SELECT ID,NAME
FROM table
</cfquery>
<cfset data = serializeJSON(test1)>
<cfreturn data/>
</cffunction>
</cfcomponent>
.cfm
<!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>Untitled Document</title>
<script src="jscript/jquery-1.8.2.min.js"></script>
<script>
$(document).ready(function() {
$("#loadLink").click(loadQuery)
});
function loadQuery() {
$.ajax({
url: "loaddata.cfc?method=getData",
success:function(data){
alert('data that function gets from the server:' + '\n' + '\n' + data + '\n' + '\n' +
"everything is listed here");
var columnMap = {}
for (var i = 0; i < data.COLUMNS.length; i++) {
columnMap[data.COLUMNS] = i
}
var str = '<h1>People</h1>'
for (var i = 0; i < data.DATA.length; i++) {
str += '<b>'+data.DATA[columnMap.NAME]+'</b>'
str += ' has a cool score of '+data.DATA[columnMap.ID]+'<br/>'
}
$("#content").html(str)
}})
return false
}
</script>
</head>
<body>
<p>
<a href="" id="loadLink">Load Query</a>
</p>
<div id="content">
</div>
</body>
</html>
as you can see this is a simple script (I found it on the web and slightly changed it for testing purposes), the final one should be a bit complex.
here is an error firebug throws every time
TypeError: data.COLUMNS is undefined
for (var i = 0; i < data.COLUMNS.length; i++) {
I know this is a javascript question but I would really appreciate your help on this one.
AdChoices