Hello While ajax'ifying one of my forms, I stumbled upon the following bug:
Empty textareas in a repeater are displayed incorrectly by Internet Explorer after a round-trip to the server (for example after adding/deleting a row, or when a validation error occurs!) Instead of being empty, the textareas display a garbled mix of text and html-tags occurring in the html document. Submission of the form usually won't work afterwards... Only Internet Explorer (IE6?) appears to be affected! At least, I couldn't reproduce the bug on neither Firefox (on both Windows and Mac OSX), nor the Safari (OSX) web browsers. You can reproduce the bug as follows: ------------------------------------- Create a form definition file with a repeater containing a text widget, and a repeater action for adding new rows, as in the following snippet: <fd:form xmlns:fd="http://apache.org/cocoon/forms/1.0#definition";> <fd:widgets> <fd:repeater id="texts"> <fd:widgets> <fd:field id="text"> <fd:datatype base="string"/> </fd:field> </fd:widgets> </fd:repeater> <fd:repeater-action id="add_text" command="add-row" repeater="texts"> <fd:label>Add text</fd:label> </fd:repeater-action> </fd:widgets> </fd:form> Create a jx template file to render the above form, as in the following snippet: <ft:form-template action="${cocoon.continuation.id}.kont" method="POST" ajax="true"> <ft:repeater id="texts"> <div> <ft:repeater-rows> <div> <ft:widget id="text"> <fi:styling type="textarea"/> </ft:widget> </div> </ft:repeater-rows> </div> </ft:repeater> <ft:widget id="add_text"><fi:styling type="submit"/></ft:widget> </ft:form-template> Edit your sitemap to include the following: <!-- Flow controller --> <map:flow language="javascript"> <map:script src="flow.js"/> </map:flow> <!-- Pipelines --> <!-- dispatch request to flow controller --> <map:match pattern="test"> <map:call function="test_form"/> </map:match> <!-- render form --> <map:match pattern="render_test"> <map:generate type="jx" src="form.jx"/> <map:transform type="browser-update"/> <map:transform type="xslt" src="forms-styling.xsl"/> <map:select type="ajax-request"> <map:when test="true"> <map:serialize type="xml"/> </map:when> <map:otherwise> <map:serialize type="html"/> </map:otherwise> </map:select> </map:match> The following flow function only displays the form, nothing more: function test_form () { var form = new Form ("test.form"); form.showForm ("render_test"); } Invoke the 'test' pipeline. Click on the 'Add text' button for adding rows to the repeater, and look what happens with IE. You really have to see it to believe it! Possible explanation: --------------------- After googling around a bit, I found similar bug descriptions concerning empty textarea rendering problems: IE doesn't handle <textarea/> tags correctly! It expects to find a closing textarea tag, and a (possibly empty) value inbetween those tags... Problem is, somewhere along the way (xslt transformer, xml serializer?) our form rendering pipeline is turning empty textarea's into <textarea/> Convert <textarea/> into <textarea></textarea>, and even the dumbest web-browser is gonna be satisfied! Possible bugfix: ---------------- I had a look into 'cocoon-ajax.js', and was positively astonished at how compact it is! Found it to be the best place for an IE-specific fix. After all, it is a client-side JS library, and it already (sigh!) contains IE-specific stuff (...it would have been something akin to a miracle, if no IE-specific code were required in such a library. But then, Santa Claus doesn't exist either!) So I added two lines of code in the IE-specific portion of the 'importNode' method. Those lines replace any occurrence of '<textarea attrs/>' tags with '<textarea attrs></textarea>' (svn diff enclosed below) - keeping IE happy for whoever cares. I'm posting this to the dev-list, as I don't like the idea of keeping a patched 'cocoon-ajax.js' around for my webapps (...as that's one more pitfall to be aware of during my next Cocoon update!) I'd therefore rather see some kind of fix in Cocoon's main trunk. Best regards, Fabrizio >svn diff cocoon-ajax.js Index: cocoon-ajax.js =================================================================== --- cocoon-ajax.js (revision 369434) +++ cocoon-ajax.js (working copy) @@ -70,6 +70,10 @@ var div = targetDoc.createElement("DIV"); var text = node.xml; + // Workaround for IE's <textarea/> bug + var tmatch = new RegExp('(<textarea.*?)\/>', 'img'); + text = text.replace(tmatch, "$1></textarea>"); + // Extract scripts var match = new RegExp(cocoon.ajax.DOMUtils.ScriptRegexp, 'img');
