Problem using the structure returned from ajax request
I am sending an ajax request which calls a method in a CFC. The method runs a query and returns some data. I want to use the ajax call's "success" option to display the returned "myString" value in an empty div. But nothing displays. Everything else is working. Shouldn't the ajax call return to me values for "myString" and "myNumber" that I can then use? Or do I have the syntax wrong?
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
function getMyData()
{
$.ajax({
type: "post",
url: "test.cfc",
dataType: "json",
data: {
method: "getMyData",
city: 'Hartford'
}
, success: function(data) {$('#result').html(myString);}
, error: function(data) {$('#result').html('That failed');}
});
$('#anotherDiv').html('Goodbye');
}
</script>
</head>
<body>
<a href="javascript:()" onclick="getMyData();">
<div>Click here</div>
</a>
<div id="result"></div>
<div id="anotherDiv"></div>
<cfcomponent>
<cffunction name="getMyData" access="remote" returntype="struct" returnformat="json">
<cfset var stcRetVal = StructNew()>
<cfset stcRetVal.myString = "Hello">
<cfset stcRetVal.myNumber = 75>
<cfquery datasource="#application.mainDS#">
insert into test
(city)
values
(<cfqueryparam value="#arguments.city#" cfsqltype="cf_sql_varchar">)
</cfquery>
<cfreturn stcRetVal>
</cffunction>
</cfcomponent>
AdChoices