Raymond Camden's Blog Rss

Bug with Ajax HTML Grid and File Upload Forms

10

Posted in ColdFusion | Posted on 08-25-2008 | 3,801 views

Dave sent me an interesting bug this weekend. Turns out if you use an HTML grid, and if you use enctype="multipart/form-data" in your form (required for file upload forms), you get a bug when posting to the server. If you want to try this right now, skip to the end of this post and run the CFM there. (By the way, a huge thank you to David for sending me a question along with a script I could just save and run. That makes it a thousand times easier to help!) David's script simply has a grid and a submit button. If you select a row in the grid and submit the form, you get:

The submitted cfgrid form field is corrupt (name: __CFGRID__MYTEST__MYGRID value: ,__CFGRID__COLUMN__=DESCRIPTION; __CFGRID__DATA__=myTest2)

This doesn't occur on any particular line per se, it happens as soon as you submit the data. That means that - unfortunately - there is no fix for this. (I reminded David to file a bug report on this.) As soon as you remove the enctype, the bug goes away. (And to be clear, in the real script, there is an actual file upload going on as well. Again, David provided a very slim, easy to test script.)

Now part of me thinks there may be a way around this. My assumption is that when you select a row in the grid, CF's client side code is updating some hidden form fields before the post continues. I think we can use more client side code to possibly fix this. If you use a tool like Firebug, we should be able to dig into the DOM, find where CF is writing the data, and then manipulate that such that the POST doesn't break the submission.

Consider this an open call. I don't have the time right now to dig very deeply into this, but I know a workaround could be found by my oh so smart, very handsome readers out there. (A little flattery goes a long way...) Any takers?

view plain print about
1<cfscript>
2variables.myQuery = queryNew("ID,Description","integer,varchar");
3queryAddRow(variables.myQuery,1);
4querySetCell(variables.myQuery,"ID",1);
5querySetCell(variables.myQuery,"Description","my Test 1");
6queryAddRow(variables.myQuery,1);
7querySetCell(variables.myQuery,"ID",2);
8querySetCell(variables.myQuery,"Description","myTest2");
9</cfscript>
10
11<cfform name="myTest" format="html" action="test.cfm" method="post" enctype="multipart/form-data">
12<cfgrid name="myGrid" format="html" selectmode="row" pagesize="20" autowidth="true" preservepageonsort="true" selectonload="false" striperows="yes" query="myQuery" width="360">
13    <cfgridcolumn name="Description">
14</cfgrid>
15<cfinput type="submit" name="btn_submit" value="Go">
16</cfform>
17
18<cfdump var="#form#">

Comments

[Add Comment] [Subscribe to Comments]

Dave Byers said on 08-25-2008 at 1:22 PM #
Well aren't I just a little brown-noser for making it all easy on people. :) Just kidding... you guys are helping me out, so the least I could do is make it as easy as possible.

Bug submitted to Adobe.
Kevin said on 08-25-2008 at 3:51 PM #
Not sure if this will work for you but I've been using cfgrids and forms on the same page for a file upload with my grid outside my file upload form and it's been okay. If there isn't a reason to have the grid in the form you could move it in the markup and it should start working.

If you're using the grid selection to populate form fields you can still bind things and connect values with the grid outside the form and if you need the grid values use some JavaScript to copy the grid values to a few hidden form fields.
Kevin said on 08-25-2008 at 3:53 PM #
Dang, I should read more closely, I misunderstood the problem a little, but the workaround should still apply - move the grid outside the form and bind the selected values to hidden form fields inside the form so you control what is submitted. This should work regardless of your enctype value.
Dave Byers said on 08-25-2008 at 5:20 PM #
This did work in my preliminary tests. It's an interesting workaround and obviously it would be best if you didn't have to compensate for this kind of thing.

When I'm able to flush out the page and make it work completely, I'll send an update with a definitive "Yep, this is the way to do it."
Dave Byers said on 08-26-2008 at 11:53 AM #
Yep, this si the way to do it.
BJ McShane said on 01-23-2009 at 9:44 PM #
I'm getting this error: (The submitted cfgrid form field is corrupt) on my cfgrid. All my grid does is list records. I tracked down the problem. One of my fields in the cfgrid had an semi-colon (;) in the field. When I took out the ; then the error didn't happen.
Here is the data field in the record:
24085-O'Connell sig RFQ, PO; AP email

I'm going to submit a bug report but I'm not sure of an easy work around.
cfJeff said on 03-24-2009 at 12:39 PM #
Just ran into the semicolon cfgrid error myself. Any suggestions on how to handle this one from anyone?
Serge Rappaille said on 04-05-2009 at 3:14 PM #
If I try to deselect row(s) before submit, it's OK (for my context)

More info : http://www.coldfusionguy.com/ColdFusion/blog/index...

Regards,

Serge
Daniel Fredericks said on 05-07-2010 at 7:34 AM #
Anybody come up with a solution for this? I have a form where I select a item number, and then I associate documents to that number and display the results in a grid. If I want to upload another doc to associate to the number, I get this error. I tried the deselect JS, but my form still thinks it is submitted. I can't move the grid outside of the form tag due to formatting issues.
Maybe I should not use a grid, however I have no idea how many documents may be associated to the number.

Anyone have any other ideas? I hear the ; is stull a bug, however I don't have that issue just the enctype="multipart/form-data"

thanks
Dan
Greg said on 08-16-2011 at 2:34 PM #
For the semi-colon issue, replace the semi-colon using sql if you can- for example, on sql server use:
-- Replace any semi-colons with a comma, or the cfgrid will error out.
...
SELECT
REPLACE(Description, ';', ',') AS Description,
...

Good luck!

[Add Comment] [Subscribe to Comments]