Problem using the structure returned from ajax request

Report · Jul 21, 2014

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>

Report · Jul 21, 2014

So your function should be returning you a JSON structure like:

{

"myString" : "Hello",

"myNumber" : 75

}

When in your success you then do:

success: function(data) {

$('#result').html(myString);

}

where does 'myString' come from? Everything that gets returned to you is in that 'data' object. So you might be able to do this instead. Try doing console.log(data) inside your success handler.

success: function(data) {

$('#result').html(data.myString);

}

Report · Jul 21, 2014

Found the problem: console.log(data) showed me that the variable names are converted to all caps, and I also needed to add "data." in front of the variable name. So $('#result').html(data.MYSTRING) worked, while $('#result').html(myString) did not.

Thanks!

Report · Jul 21, 2014

The other thing you can do if you like to preserve the case of variables (and hey, who doesn't?) is create them using associative array notation like this:

When this ColdFusion structure gets converted to a JSON structure, it then keeps them as 'myString' and 'myNumber' instead of converting to 'MYSTRING' and 'MYNUMBER'.

Problem using the structure returned from ajax request

1 Correct answer

Photos