Bug with Ajax HTML Grid and File Upload Forms

This post is more than 2 years old.

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?

<cfscript> variables.myQuery = queryNew("ID,Description","integer,varchar"); queryAddRow(variables.myQuery,1); querySetCell(variables.myQuery,"ID",1); querySetCell(variables.myQuery,"Description","my Test 1"); queryAddRow(variables.myQuery,1); querySetCell(variables.myQuery,"ID",2); querySetCell(variables.myQuery,"Description","myTest2"); </cfscript>

<cfform name="myTest" format="html" action="test.cfm" method="post" enctype="multipart/form-data"> <cfgrid name="myGrid" format="html" selectmode="row" pagesize="20" autowidth="true" preservepageonsort="true" selectonload="false" striperows="yes" query="myQuery" width="360"> <cfgridcolumn name="Description"> </cfgrid> <cfinput type="submit" name="btn_submit" value="Go"> </cfform>

<cfdump var="#form#">

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Dave Byers posted on 8/25/2008 at 10: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.

Comment 2 by Kevin posted on 8/26/2008 at 12:51 AM

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.

Comment 3 by Kevin posted on 8/26/2008 at 12:53 AM

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.

Comment 4 by Dave Byers posted on 8/26/2008 at 2:20 AM

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."

Comment 5 by Dave Byers posted on 8/26/2008 at 8:53 PM

Yep, this si the way to do it.

Comment 6 by BJ McShane posted on 1/24/2009 at 8:44 AM

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.

Comment 7 by cfJeff posted on 3/24/2009 at 9:39 PM

Just ran into the semicolon cfgrid error myself. Any suggestions on how to handle this one from anyone?

Comment 8 by Serge Rappaille posted on 4/6/2009 at 12:14 AM

If I try to deselect row(s) before submit, it's OK (for my context)

More info : http://www.coldfusionguy.co...

Regards,

Serge

Comment 9 by Daniel Fredericks posted on 5/7/2010 at 4:34 PM

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

Comment 10 by Greg posted on 8/16/2011 at 11: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!

Comment 11 by Chad Baloga posted on 10/22/2014 at 8:43 PM

This error just starting happening for us after installing the CF 10 Update 14. I reverted back to Update 13 and it works again. Any solutions?

Comment 12 by Raymond Camden posted on 10/23/2014 at 12:48 AM

Report the bug at the bug tracker and - unfortunately - stop using ColdFusion UI controls. That's kind of a mean answer (sorry!) but it is honest.