1 Reply Latest reply on Jun 24, 2008 7:17 AM by ilya_shaikovsky

    'multi select' slows down the AJAX submit of a Form while ha

    massimiliano.gobbi

      With IE (both 6.x and 7.x), a performance problem arises performing an AJAXSubmit of a form having a "multi select" TAG with thousands of items.

      Activating the AJAX tracing with IE, I noticed that while the multi select is populated with 2000 items, the request phase is performed by AJAX in more than 5 seconds (with a pentium core duo 2GHz), while Firefox takes about nothing.

      The cause:

      In my opinion the problem is caused by the way AJAX javascript within IE is performing the preparation of the request. In detail, each time an AJAX submit is performed, the application code calls the function A4J.AJAX.Submit(). Following the sequence of commands...

      A4J.AJAX.Submit->A4J.AJAX.SubmitRequest->A4J.Query->appendFormControls->'select-multiple'

      ...I found that the time is spent inside 'select-multiple' function whose purpose is basically to add the selected items to the list of parameters of the request. It consumes all the time looping on the child nodes of the DOM SELECT object.

      A proposed solution:

      to change the loop using the "options" collection instead of the generic "childNodes" collection. The change basically does what done in the case "select-multiple" of method Sarissa.formToQueryString()

      example:
      richfaces-impl-3.2.1.GA.jar/org/ajax4jsf/javascript/scripts/AJAX.js.:

      ...
       'select-multiple' : function(control){
       var cname = control.name;
       var childs = control.childNodes;
       for( var i=0 ;i< childs.length;i++ ){
       var child=childs;
       if( child.tagName == 'OPTGROUP' ){
       var options = child.childNodes;
       for(var j=0; j < options.length; j++){
       this._addOption(cname, options[j]);
       }
       } else {
       this._addOption(cname, child);
       }
       }
       },

      is more efficient rewritten in this way:

      'select-multiple' : function(control){
       var options = control.options;
       for( var i=0 ;i< control.length;i++ ){
       var option = options;
       this._addOption(cname, option);
       }
       },


      Note: the change keeps support of 'OPTGROUP' tags