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

Question

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.

Hsiuhsu

Answer 1

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.

Audiovisual

@Henry: But access="remote" will. ;-) – Hysell

What I don't understand is how to get the recordID to be dynamic. For example, I can't do the following: "data: "RecordID=" + #URL.RecordID#" -- what would be the right way of going about that? – Hsiuhsu

the 'data' field in $.ajax can be a struct / associated array – Pourparler

In my opinion, it's best to store the dynamic recordID data in the DOM somewhere, rather than generate dynamic JavaScript. This lets you keep the JavaScript in a separate file for caching. I've updated my script to show one way how. – Audiovisual

Also, that's a good point by Henry, sometimes it's easier to make a struct for the data param than a string (like if you're building post data from a form). – Audiovisual

@Mel, use CF ajax tags if they can do what you need. Pick the right tool for the right job. – Pourparler

Answer 2

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

Pourparler

Thanks Henry, I never actually thought of <cfdiv> and <cfajaxproxy>. Do you have any links for usage examples? – Hsiuhsu

help.adobe.com/en_US/ColdFusion/9.0/Developing/… – Pourparler

If you're already loading jQuery on the page, I prefer to just use that if only to avoid the overhead of a second ajax library introduced by cfdiv. – Audiovisual