cocoon-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Fabrizio Sitzia" <fabrizio.sit...@chem.lu>
Subject Ajax and IE empty textarea bugfix
Date Mon, 16 Jan 2006 16:28:11 GMT
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');




Mime
View raw message