How to display return value of ColdFusion function using jQuery or AJAX

Question

I am using ColdFusion function shown below:

<cffunction name="getdata" access="remote" output="true" returntype="string">
    <cfargument name="x" type="string" required="true">
    <cfargument name="y" type="string" required="true">
    <cfquery name="getval" datasource="#application.datasource#" result="result">
    select val from table where col1=#arguments.x# and col2=#arguments.y#
    </cfquery>

    <cfset p= #getval.val#>
    <cfreturn p>
</cffunction>

I want the value of val to be printed in an alert. Alert displayed should be "please verify whether it's val" when user selects one of the values in autocomplete drop down.

How can I achieve this?

I tried using jQuery AJAX inside select event in autocomplete, here x and y are the names of input fields on the form:

 select: function(event, ui) {
     $.ajax({
            type: "GET",
            url: 'somepathtofunction?method=getdata&x='+ x + '&y'+ y,
            async: true,
            success: function(result) {
                alert('please verify whether it is' + result.val  );
            }
     });
}

Also, tried the code below:

alert('please verify whether it is'  +  $.get('somepathtofunction?method=getdata&x='+ x + '&y'+ y));

but none of these worked.

I am new to jQuery AJAX and ColdFusion so I know I have written most of the wrong code. Kindly correct me wherever I am wrong.

Not related to your question, but in ColdFusion functions it is usually desirable to keep ColdFusion variables inside the function. This can be done with the var keyword or by using the local scope. — Dan Bracuk
– Dan Bracuk, Commented Jul 30, 2020 at 20:21
Not to mention using <cfqueryparam> especially when dealing with variables that come from the request. — James A Mohler
– James A Mohler, Commented Jul 30, 2020 at 20:33

CFMLBread · Accepted Answer · 2020-07-30 13:42:58Z

1

You're on the right path with the AJAX call. There are a multitude of ways to pull this off. I have found one of the simplest ways to have both CF and JS use JSON notation. Your CF function should be set to output=true and use the #serializeJSON()# function to return the data.

One 'gotcha' to note is CF always coapitalizes JSON data by default so you have to use the ALL CAPS version of your return variables in the case-sensitive JS code.

Here's something to try:

<cffunction name="getdata" access="remote" output="true">
    <cfargument name="x" type="string" required="true">
    <cfargument name="y" type="string" required="true">
    <cfquery name="getval" datasource="#application.datasource#" result="result">
    select val from table where col1=#arguments.x# and col2=#arguments.y#
    </cfquery>
    <cfoutput>#serializeJSON({val=getval.val})#</cfoutput>
</cffunction>




  $.ajax({
        method: "GET",
        url: "yourCFCpathhere.cfc",
        data:{
            method: "getdata",
            x: var1,
            y: var2
        },
        dataType: "json"
    }).done(function( result ) {
        alert('please verify whether it is' + result.VAL  ); //CAPS for the return var from CF
    });
});

answered Jul 30, 2020 at 13:42

CFMLBread

7843 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

Dan Bracuk Over a year ago

Why would you output the data instead of returning it with a cfreturn tag.

James A Mohler Over a year ago

Why use result="result"? And those arguments need to be in <cfqueryparam>

Anonymous Over a year ago

that code worked though. Thanks much @P Mascari. How can do it without using result="result". And how can return it using cfreturn @JamesA Mohler?? I may sound like stupid but please explain I am really new to this.

Anonymous Over a year ago

Thanks @Dan Bracuk. Also, I have two input fields on the form and user can select options from the autosuggestion dropdown. I wanted to pass that value selected at runtime by the user to x and y. I did this by doing x="abc" but I dont want that. I want x= "value from the input text box".

Dan Bracuk Over a year ago

This link shows one way to use the cfreturn tag to pass json data back to javascript stackoverflow.com/questions/40406253/…. This link shows how to pass form values to javascript - stackoverflow.com/questions/3547035/…

|

Collectives™ on Stack Overflow

How to display return value of ColdFusion function using jQuery or AJAX

1 Answer 1

15 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

15 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related