How do I pass an argument to a CFC through AJAX?

Question

Hello,

I'm using the following scrip to call a CFC function:

function loadQuery() {
    $.get('QueryData.cfc',{},function(GetMyData){
    $("#content").html(GetMyData)
        })
    return false
    }

$(document).ready(function() {
    $("#loadLink").click(loadQuery)
});

This is my HTML:

<a href="" id="loadLink">Load It</a>

<div id="content"></div>

I am calling the following CFC:

<cffunction name="GetMyData" access="public" returntype="query">

    <cfargument name="RecordID" type="string" required="yes">

    <cfset var RecordData = "">

    <cfquery name="RecordData" datasource="MyDSN">
        SELECT
            foo.RecordID,
            foo.RecordName            
FROM
            foo
        WHERE
            foo.RecordID =  #ARGUMENTS.RecordID# ;        
    </cfquery>

    <cfreturn RecordData>

Problem one is when I call the CFC, the CFC page shows up; the CFC description comes up (after asking for the Admin pass). I don't want to load QueryData.cfc; I want to execute the function inside QueryData.cfc.

The second issue is I can't figure out the syntax for passing an argument to the CFC method.

Answer 1

For what you're doing, would you like to try <cfdiv> or <cfajaxproxy>? It's much easier.

But to answer your question, the GET url should be XXX.cfc?method=whatever&param=xyz

edit: btw your function should have access="remote", and it's not a good idea to return Query object, unless you're using <cfgrid>.

Answer 2

You can do something similar with the $.get method, but I usually do something like this:

$(document).ready(function() {
    $("#loadLink").click(function(e) {
        e.preventDefault();
        var recordata = $(this).attr("href").substring(1); //trim '?' char
        $.ajax({
            type: "GET",
            url: "QueryData.cfc?method=GetMyData",
            data: recordata,
            dataType: "html",
            success: function(message) {
                $("#content").html(message);
            }
        });
    });
});

Where the data for the record ID is stored somewhere in the DOM like so:

<a href="?RecordID=#url.RecordID#" id="loadLink">Load Data</a>
<div id="content"></div>

Also, not sure how it behaves with access="public" - it might still work - but it should probably be access="remote" on your function.