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 function 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

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>