JQuery $.ajax and dealing with a resultset.

Question

I have the following

 $.ajax({        
  type: "POST",        
  url: "qry_invControl.cfm",        
  data: "p_sales_price=" + input.val() + "&action=getCashPrice",
  cache: false,       
  success: function(data) {    
     $("#cashPrice_"+num).html(data);       
  }    
  });

I need to modify my qry_invControl.cfm to return other stuff like terms, monthly payment besides the cashPrice. How do I modify my success funtion so that I could do something like:

 $("#cashPrice_"+num).html(data.cashPrice);
 $("#terms_"+num).html(data.terms);
 $("#monthlyPayment_"+num).html(data.monthlyPayment);

I will need to populate other divs to show the related data (terms,monthlyPayment) with one ajax call which will come from qry_invControl.cfm.

Answer 1

You should look into passing data back via JSON. jQuery has a .getJSON function for that purpose.

JSON tutorial.

Answer 2

You want to return you data as a JSON object:

{ cashPrice: 4.50, terms: 2, monthlyPayment: 50 }

You can also specify dataType: "json" in your $.ajax call so that jQuery automatically treats the returned value as JSON. Make sure you using quotations around any non-numeric values (2.50 is fine, $2.50 needs quotes).

Answer 3

Specify the datatype as JSON.

$.ajax({        
  dataType: 'json', 
  type: "POST",        
  url: "qry_invControl.cfm",        
  data: "p_sales_price=" + input.val() + "&action=getCashPrice",
  cache: false,       
  success: function(data) {    
    $("#cashPrice_"+num).html(data.cashPrice);
    $("#terms_"+num).html(data.terms);
    $("#monthlyPayment_"+num).html(data.monthlyPayment);     
  }    

});

In your CFM page you can output JSON with the SerializeJSON() function.

<cfset data = structNew()>
<cfset data.cashPrice = 4.50> 
<cfset data.terms = 2>
<cfset data.monthlyPayment= 50>
<cfoutput>#serializeJSON(data)#</cfoutput>

Answer 4

The best solution is to have your script format the return data as json, and add

dataType:'json',

to your jQuery ajax setup. Adding that line makes jQuery automatically parse the json string into a javascript object. From there you can do exactly what you want: data.cashPrice, data.terms, etc.