JSON and CF integration

[Guest]

Hi~

I am very new to JSON and AJAX. I am using a jQuery plugin to post a form via AJAX/JSON to a .cfm page, and am trying to send back a response that can be used by jQuery.

This is my jQuery bit:

$.ajax({
                                    url: $(this).attr('action'),
                                    data: $(this).serialize(),
                                    type: $(this).attr('method'),
                                    dataType: 'json',
                                    success: function(data, status) {
                                        var content = data.message;
                                        this.set('content.text',content);
                                    },
                                    // Disable/Enable input elements
                                    beforeSend: function() { inputs.attr('disabled', 'disabled'); },
                                    complete: function() { inputs.removeAttr('disabled'); inputs[0].focus(); }
                                });

I can see that the request is going through successfully in Firebug (200 OK), but I have no idea how to manipulate the data on my CF page and then return it and use it in the code above. I know I can access the JSON data like this:

<cfset requestBody = toString(getHttpRequestData().content) />

But after that, I am totally lost! Is this even possible? Please let me know, thank you.

[Carl Von Stetten]

The AJAX request will hit the ColdFusion page in much the same way as if you did a normal form submit, rather than via AJAX.  All of the form data will either be in the page's URL scope (if the form's method is GET) or the page's FORM scope (if the form's method is POST).  So all the fields should be accessible either as URL.fieldname or FORM.fieldname.

As far as manipulating the data, that totally depends on what you want to accomplish with it. You'll have to provide a lot more information for assistance with that.

With regard to returning data, what are you expecting to have the ColdFusion page return?

-Carl V.

Message was edited by: Carl Von Stetten

[Guest]

Hi, thanks for your response!

I have modified my AJAX call slightly:

$.ajax({
                                    url: $(this).attr('action'),
                                    data: $(this).serialize(),
                                    type: $(this).attr('method'),
                                    dataType: 'json',
                                    success: function(data, status) {
                                        alert(status);
                                        var content = 'Email sent.';
                                        api.set('content.text', content);
                                    },
                                    error: function(data, status) {
                                        alert(status);
                                        var content = 'Email not sent.';
                                        api.set('content.text', content);
                                    }
                                });

On the CFM page (form action), I need to send an email based on the form data that was submitted. If that email is sent, I want to send Message A back to the calling function; if it doesn't I want to send Message B. I am fine with the CF code - that's not a problem - I just need to know how to post back to the AJAX function!

Also, I thought my AJAX post was successful based on the Firebug output, but the alert() inside the error attribute is being fired when the form is submitted.

[Miguel-F]

Since you are specifying the datatype to be json that's what your ColdFusion page needs to return.  See the function SerializeJSON here: http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WSc3ff6d0ea77859461172e0811cbec22c24-79fa.html

Once your CF page returns the json data back to your ajax call you can reference the info using the data variable from within your success attribute.  Say your CF page returns a variable named 'emailstatus' in json format.  Then you can reference that as 'data.emailstatus' in your success attribute function.

NOTE: The CF admin has a setting to "Prefix serialized JSON with" a string (under server settings).  You may need to deal with that in your ajax call as well.  See the dataFilter attribute of the ajax call.

[Guest]

OK, I am finally getting somewhere! My AJAX request is returning successfully, but the data value is coming through as NULL. This is what I have on my CFM page:

<cfscript>
    returnMessage = serializeJSON(local.message);
</cfscript>

The local.message variable is set above, in a series of conditional statements. It is just a string variable, rather than a query, but I believe this should still work - I tested the same value with isJSON(), and it returned true. I guess what I'm not sure about is if there is any other scripting that needs to be done to make my AJAX call "see" this returnMessage variable, rather than returning NULL data?

[Miguel-F]

It may be what I was referring to in my note above.  CF will prefix the JSON data with "//" by default.  This is done to prevent cross-site scripting attacks.  So you do want it done, but that also means you need to deal with it in your code.  As you know, "//" in javascript is an inline comment.  So if your code does not remove those characters, the AJAX call see's it as a comment (or NULL).

In my previous note I told you to reference the dataFilter attribute of the ajax call.  Check it out.  It allows you to do something like this to remove the first two characters (the //) of the returned data before processing.

(along with other AJAX attribs...)

dataFilter: function(data, type) {return data.substr(2)},

[Guest · Accepted solution]

Finally figured this out! The prefix option was turned off on our server, but it's good to know about that. In the end, this seems to return what I need it to:

<cfscript>
    returnMessage = serializeJSON(local.message);
    writeOutput(returnMessage);
</cfscript>

Then, in the AJAX function I just have this:

success: function(data, status) {
     var content = data;
     api.set('content.text', content);
},
error: function(data, status) {
     var content = data;
     api.set('content.text', content);
}

And my content updates!