Prototype v1.6 Ajax.Updater and textarea in FireFox v2.x

There is a slight issue with how Prototype v1.6 (and prior) deals with textarea form elements when used in combination with Ajax.Updater. This appears to only be an issue with FireFox v2.0.0.x and not IE7 or Safari v3 for Windows. I have not tested to confirm if this is an issue on non-windows versions of FireFox or other browsers or platforms.

The problem enters when Updater is successful in putting the results content in to the textarea innerHTML, but the contents are not displayed. Most of the solutions that I have been able to find on the web suggests to use a onSuccess: callback then within there, pull the responseText from the response object and shove it in to the value of the textarea.

Example of a BAD use of Ajax.Updater with the textarea:

  <form id="formid">
    <textarea id="textareaid" />
  </form>
  Ajax Status: <div id="ajaxStatus"></div>
...
  new Ajax.Updater( 'textareaid', 'anSOAapp.jsp', {
      parameters: { id: anId, afield : avar },
      onFailure: function(){
          $('ajaxStatus').update('An error occurred.'); 
      }, 
      onSuccess: function(response) {
           $('textareaid').value = response.responseText;
           $('ajaxStatus').update( response.status ); 
   }});

How wasteful! Not only in redundant processing (the contents of the textarea is being updated twice!), but also in memory that JavaScript is now having to allocate and use. What is the point of using the Ajax.Updater function if you are just going to overwrite its output?! For small tidbits of data, it may not be noticeable, but for larger data sets, then you can not only risk the out of memory exceptions, but also a non-functional page.

The whole point of utilizing the Ajax.Updater function is to help streamline the whole data flow and to offset the needs to keeping the data in a variable or as a String in JavaScript, which is what occurs when using the responseText field.

There is an easy solution that helps to avoid these problems of redundancy and excessive memory utilization. It is actually quite simple.

Example of the correct use of Ajax.Updater with the textarea:

  <form id="formid">
    <textarea id="textareaid" />
  </form>
  Ajax Status: <div id="ajaxStatus"></div>
...
  new Ajax.Updater( 'textareaid', 'anSOAapp.jsp', {
      parameters: { id: anId, afield : avar },
      onFailure: function(){
          $('ajaxStatus').update('An error occurred.'); 
      }, 
      onSuccess: function(response) {
           if ( Prototype.Browser.Gecko ) {
              $('formid').reset();
           }
           $('ajaxStatus').update( response.status ); 
   }});

Notice that the key element was

$('formid').reset();

inside a conditional to ensure it only is performed for FireFox browsers.

Give it a try.

Resources
Prototype API Docs
Prototype's Form.reset() function API Docs