How do I return JSON data using jQuery.post() to a Coldfusion 8 cfc?

Question

How do I post a form using jQuery.post() to a Coldfusion.cfc method and return json data? Is there a certain way I need to format the url or form values in order to specify the cfc method to invoke remotely? How do I tell Coldfusion to return json data?

I've searched the existing jQuery/Coldfusion.cfc questions and I'm looking for some clarity. I can't find an example that shows the full process to/from a Coldfusion cfc.

HTML Form:

<!--- Assume: jquery, jquery-ui, sample.js is loaded --->
<p><a href="#" id="openDialog">Open Dialog</a></p>

<div id="myDialog" title="My Dialog" class="dialog">
<form id="myForm">
    <label for="title">Title:</label><br />
    <input type="text" name="title" id="title" value="" /><br />
    <label for="address">Address:</label><br />
    <input type="text" name="address" id="address" value="" /><br />
    <input type="submit" name="save" value="save" />
</form>
</div>

sample.js:

jQuery(function ($) {

    var saveUrl = "remote.cfc?method=save";  // Is this the right way??

    // Bind link to open the dialog box
    $('a#openDialog').click(function() {
        $('#myDialog').dialog('open');
    });

    // Configure jQuery UI dialog box and callback methods
    // Is this right??
    $("#myForm").dialog({
        buttons: {
            'Save': function() { 
                $.post(saveUrl, $("#myForm").serialize(), function(result){
                    alert("Result: " + result);
                    }, "json");
                $(this).dialog('close');
               },
            'Cancel': function() {
                $(this).dialog('close');
            }
    });
});

remote.cfc:

<cfcomponent>

    <!--- If I set the returnFormat to JSON do I need to specify json in the post too? --->
    <cffunction name="save" access="remote" returntype="string" returnFormat="JSON">
        <cfargument name="title" type="string" required="yes">
        <cfargument name="address" type="string" required="yes">
        <cfset var result = structNew()>

        <!--- Do some data manipulation or cfquery here, save to result struct --->

        <cfreturn result>
    </cffunction>

</cfcomponent>

*Note, I've discovered that having Coldfusion debugging will really goof up cfc return values, so it should be suppressed or turned off.

Answer 1

If you set the returnFormat to JSON you don't need to specify json in the post. returnformat=WDDX by default for backward compatibility reason.

If you want ease of use, check out <cfajaxproxy> and various cf-ajax UI-component tags.

Check out this related Question: http://stackoverflow.com/questions/999501/invoke-coldfusion-function-using-ajax

Answer 2

What you have looks good, where does it hit an error and what is the error? If there's no obvious error message, the first thing I would do is throw a log statement in the remote method and see if you're call is making it to the server. If that's true and it makes it all the way to the end, then alert the object that comes back to callback (looks like you're already doing that).

To ansdwer your specific question, remote.fc?method=methodName is the correct URL and if you're posting data, that should have the title, etc. so you should be fine. Post back an error if you're receiving one or what the value of your final alert is.