4 Replies Latest reply on Dec 24, 2013 12:58 AM by bleathem

    JavaScript errors using ExtendedDataTable or ScrollableDataTable in Modal Popup

    jrigby33

      I have an application that launches stand-alone modal popups (2).  The main page opens the first modal popup, and then an action on the first modal popup opens the second.  The second modal popup contains two ExtendedDataTable objects.  Clicking on an entry in the first table drives the data displayed in the second.  Then the selection in the second populates data in an InputTextArea.  This all works fine, except when you resize the IE browser window the ExtendedDataTables throw JavaScript errors which is very problematic for our users.

       

      Here is the error that is thrown in the IE Developer console:

       

      SCRIPT87: Invalid argument.

       

      extended-data-table.js.jsf, line 27 character 25

       

      Which corresponds to this line of code:

       

      if (totalWidth>maxWidth){c[c.length-2].width-=(totalWidth-maxWidth);}},update:function(refreshEvents){this.createControls();if(!ClientUILib.isIE){if(this.fakeIeRow){this.table.getElement().deleteRow(this.fakeIeRow.rowIndex);this.fakeIeRow=null;}

       

      See attached image for local variables at this line when error occurs.

      Code below:

       

            <rich:modalPanel id="journalEntryECMTemplatePanel" height="480" width="750" >
             
               <rich:panel styleClass="panelTemplate">
                <f:facet name="header" >
                        <h:outputText value="#{journalBean.templateWindowTitle}"  />
                 </f:facet>  
                   <f:facet name="controls">
                  <span  onclick="javascript:Richfaces.hideModalPanel('journalEntryECMTemplatePanel')">X</span>
                </f:facet>
                
              <h:form id="journalQCMTemplateForm" >
               <div class="templateWrapper" >
                <h:panelGrid column="2">
               <h:panelGroup>
               <h:column>
               <h:outputText value="Offices:" styleClass="templateLabelLeft"/>
               </h:column>
               <h:column>
               <h:outputText value="Templates:" styleClass="templateLabelRight"/>
               </h:column>
               </h:panelGroup>
               </h:panelGrid>
               <div class="templateLeft" >
                 <rich:extendedDataTable id="officeQCM" 
                         var="officeList"   
                         width="300px"
                         styleClass="selectBoxLeft"
                         height="160px" 
                         value ="#{journalBean.officeList}"
                         border="0" 
                         immediate="true"
                         rowClasses="scrollRowBorder" 
                         columnClasses="scrollRowBorder"
                         selectedClass="templateRowHighLight"
                         selection="#{journalBean.selectOffice}"
                         >
                      <a4j:support event="onselectionchange"  action="#{journalBean.officeRowSelection}" reRender="templateQCM,qcmTemplateDisplayTextArea"/>
                <rich:column>
                <h:outputText value="#{officeList.officeCode}" styleClass="text"/>
                </rich:column>
               </rich:extendedDataTable>
              </div> 
            <div class="templateRight" >
               <rich:extendedDataTable id="templateQCM"  
                       var="templateList" 
                       width="300px" 
                       styleClass="selectBox"
                       height="160px" 
                       value ="#{journalBean.templatePickerValue}" 
                       immediate="true"
                       border="0"  
                       rowClasses="scrollRowBorder"
                       columnClasses="scrollRowBorder"
                        selectedClass="templateRowHighLight"
                       selection="#{journalBean.selectTemplate}"
                       >
               <a4j:support id="templateSupportQCM" event="onselectionchange" onselectionchange="displaySelectedTemplateQCMText();"  
                   action="#{journalBean.templateRowSelection}"
                   reRender="qcmTemplateDisplayTextArea" />  
                <rich:column>
                <h:outputText value="#{templateList.journalTemplateName}"  styleClass="text" />
                </rich:column>
               </rich:extendedDataTable>
              </div>
           </div>
           <h:panelGrid column="1">
           <h:outputText value="Template:"  styleClass="templateLabel"/>
           <h:inputTextarea id="qcmTemplateDisplayTextArea" 
                value="#{journalBean.templateText}" 
                              cols="128" 
                              rows="10" 
                              />
           </h:panelGrid>
           <h:panelGrid column="2" styleClass="panelGridTemplate" border="0">
            <h:panelGroup>
             <h:column>
              <a4j:commandButton value="Select Template"
                   id="selectTemplateQCM"
                   reRender="inputECMTextArea"
                         action="#{journalBean.renderTemplateText}"
                         oncomplete="javascript:Richfaces.hideModalPanel('journalEntryECMTemplatePanel');enableJEButton();" 
                         styleClass="selectTemplate"
                         />
                    
                   </h:column>
                   <h:column>
              <a4j:commandButton value="Cancel"
                            oncomplete="javascript:Richfaces.hideModalPanel('journalEntryECMTemplatePanel');"  styleClass="cancelTemplate"/>
                      </h:column>
                   </h:panelGroup>
                 </h:panelGrid> 
             
           </h:form>
           </rich:panel>
              </rich:modalPanel>
      
      

       

      Attempts to fix:

       

      1) I've tried changing ExtendedDataTables to ScrollableDataTables with the following similar JavaScript error:

       

      SCRIPT16389: Unspecified error.

      controls-scrollable-data-table.js.jsf, line 62 character 23

      Line 63, Char 23: this.scrollBox.element.scrollTop=scrollTop;

       

      2)  Confirmed that there are no nested forms anywhere

       

      3) Tried removing styling and wrapping DIVs around tables with no luck.  It seems like an issue with scrolling/width from the errors and only appears to throw the error after reRendering one or more of the tables from the other.

       

      Thanks in advance,

      Justin