JavaScript errors using ExtendedDataTable or ScrollableDataTable in Modal Popup
jrigby33 May 23, 2012 12:30 PMI 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
-
locals.JPG 46.0 KB