Question

Currently working on trying to figure out asynchronous submission in ColdFusion. I always have trouble with this. I have a form that I want to submit to a remote CFC and get some sort of response back. (Eventually this form is going to have a draft like function…) I know how to set up each part: the form and the CFC. My problem is connecting them!!! There was some similar post about this, but none offer sufficient information….for me at least.

Form:

<cfform action = "/cfc/request.cfc?method=updateRequest"  method = "post" name = "requestForm" id = "requestForm" enctype="multipart/form-data">
    ........<!-- Fields redacted -->

</cfform>

CFC Method (this was just a test):

<cffunction name="updateRequest" access="remote" returntype="numeric">
        <cfargument name="form" type="struct" required="yes">
        <cfset var status = 0>

         <cfreturn status>
</cffunction>

Note: my CFC function is set to remote etc. etc. etc…

I have my form here which should post to the cfc, however it actually goes to the cfc page. I don’t want this. I’ve grown so frustrated with trying to use ajax with ColdFusion. I’m ready to resort to just using jQuery to submit it. I can do it jQuery…however I don’t know how to get the fields into a struct. (This form is going to be large…) I’d like to see how to send form information as a struct in either ColdFusion or jQuery. I want to be able to retain the form field names.

Even if someone could point me in the right direction…that would be great. I’ve tried to find a GOOD tutorial on this for sometime and have not been able too.

Answer 1

If you want to pass the form controls as a structure, I would first try serializing the form elements as a json string, then pass that string to your webservice. From your webservice, you could then use DeserializeJSON() to convert it back to a structure. Here’s some code that should get you close to this:

<script>
/* function prototype code modified from here: http://api.jquery.com/serializeArray/#comment-130159436 */
(function( $ ){
$.fn.serializeJSON=function() {
var json = [];
jQuery.map($(this).serializeArray(), function(n, i){
json.push('"' + escape(n['name']) + '":"' + escape(n['value']) + '"');
});
return '{' + json.join(',') + '}';
};
})( jQuery );

// make the request to your webservice
$.post('myComponent.cfc?method=updateRequest', { formJSON: $("#requestForm").serializeJSON()}, function () { /* handle response here. */ })
</script>

Then in your CFC, change the argument like so:

<cffunction name="updateRequest" access="remote" returntype="numeric">
    <cfargument name="formJSON" type="string" required="yes">
    <cfset var formStruct = DeserializeJSON(arguments.formJSON)>
    <cfset var status = 0>

     <cfreturn status>
</cffunction>