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, Jul 30 '20 at 20:21
Not to mention using `` especially when dealing with variables that come from the request. — James A Mohler, Jul 30 '20 at 20:33

score 1 · Accepted Answer · answered Jul 30 '20 at 13:42

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 '20 at 13:42

CFMLBread

734
3
7

1

Why would you output the data instead of returning it with a cfreturn tag. – Dan Bracuk Jul 30 '20 at 20:19
Why use result="result"? And those arguments need to be in `` – James A Mohler Jul 30 '20 at 20:35
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 Jul 30 '20 at 21:16
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". – Anonymous Jul 30 '20 at 21:29
2

This link shows one way to use the cfreturn tag to pass json data back to javascript https://stackoverflow.com/questions/40406253/how-to-call-cffunction-on-the-cfm-page-from-javascript. This link shows how to pass form values to javascript - https://stackoverflow.com/questions/3547035/javascript-getting-html-form-values/3547123 – Dan Bracuk Jul 30 '20 at 21:41
@DanBracuk Do you know how to pass x = "some users input" in the syntax mentioned in answer? – Anonymous Jul 31 '20 at 20:17
@P Mascari do you have any idea? – Anonymous Jul 31 '20 at 20:19
How to pass `x = some user's input` is explained in the 2nd link in my earlier comment. If something on that page is not clear, ask a specific question about the part causing you difficulty. – Dan Bracuk Aug 01 '20 at 13:13
@DanBracuk I tried var p = document.getElementById("someID").value; and then tried doing x: p as mentioned there, also I tried doing x: $("#someID").val() but both didn't work. – Anonymous Aug 01 '20 at 21:48
Then I tried doing something like this --> var someData=""; someData = {"d" : $("#someID").val() } . and then x: someData. It looks like by doing this I will be able to pass data in json format. But then how can I use x in where condition??? – Anonymous Aug 01 '20 at 21:56
The term `didn't work` is vague. Did you get the wrong result? Was an error thrown? – Dan Bracuk Aug 02 '20 at 15:32
sorry @DanBracuk. I did silly mistake and used ; after $("#someID").val() which was creating a concern but then it worked without semicolon. Thank you so much for your help! – Anonymous Aug 06 '20 at 21:45
Is there any way here to show pop-up/display dialogue box instead of alert?? – Anonymous Aug 06 '20 at 21:59
I am able to display dialogue box saying "please verify whether its", how can I print result.VAL in that box?? Tried something like this and added jQuery code for dialogue box

please verify whether its

– Anonymous Aug 06 '20 at 22:18
You don't need the tag at the bottom of the method. The method's attribute output="true" does this for you :) – Charles Robertson Feb 10 '23 at 18:35

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

1 Answers1