Sending all of form scope to a CFC asynchronously
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 informat开发者_StackOverflowion....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.
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>
Use ColdFusion.Ajax.submitForm function
<html>
<head>
<!--- The cfajaximport tag is required for the submitForm function to work
because the page does not have any Ajax-based tags. --->
<cfajaximport>
<script>
function submitForm() {
ColdFusion.Ajax.submitForm('myform', 'asyncFormHandler.cfm', callback,
errorHandler);
}
function callback(text)
{
alert("Callback: " + text);
}
function errorHandler(code, msg)
{
alert("Error!!! " + code + ": " + msg);
}
</script>
</head>
<body>
<cfform name="myform">
<cfinput name="mytext1"><br />
<cfinput name="mytext2">
</cfform>
<a href="javascript:submitForm()">Submit form</a>
http://help.adobe.com/en_US/ColdFusion/9.0/Developing/WSc3ff6d0ea77859461172e0811cbec22c24-7a01.html#WS71B55A73-D08F-47c7-B062-0543793B83A5
I think you may have a problem uploading everything if you want to include the file field and it's contents. Security in browsers won't let you read the file (which you'd need to do in order to upload it's contents through an ajax request). As has been mentioned, using serialize will get you the other contents of the form, which you can decode at the server. if you really need the contents of the file, you may need to look at submitting the form to a hidden iFrame which won't cause the page to reload, but ought to send over the file:
<form action="saveCode.cfc?method=safeDraft" method="post" enctype="multipart/form-data" target="upframe">
Say Something: <input type="text" name="foo"><br>
Add a File: <input type="file" name="myfile"><br>
<input type="submit">
<iframe src="initial.html" id="upframe" name="upframe"></iframe>
I'd also strongly recommend using Fiddler (fiddler2.com) to watch what's getting uploaded and to make sure you're decoding what's uploaded correctly
Edit: Stack Overflow hid my iframe tag in the example above. I've also tested the example in Chrome and FireFox on a Mac and it seems to work ok.
I think what you're looking for is the tag and something like this :
<cfajaxproxy bind="cfc:mycfc.myfunction(arg1={myform:myfield1},arg2={myform:myfield2})" />
You don't actually specify an action in the url as you've done, you call it through the ajax proxy.
I think this is what you're attempting, could be wrong, let me know :)
加载中,请稍侯......
精彩评论