1 2 Previous Next 17 Replies Latest reply on Nov 25, 2008 5:57 AM by Ilya Shaikovsky

    scrollableDataTable cannot be reRender

    beta guo Newbie

      Hi,
      I define a scrollableDataTable and a a4j:commandButton, when click the button, the scrollableDataTable will be reRender, but some javascript error msg throw,how to solve it?

      <rich:scrollableDataTable id="countryList"
       var="country"
       width="95%"
       value="#{geo_countryList}"
       height="330px"
       sortMode="single"
       rendered="#{geo_countryList.rowCount gt 0 }"
       rowKeyVar="rkv"
       binding="#{bindingHelper.scrolableDataTable}"
       selection="#{bindingHelper.selection}"
       scriptVar="countryList"
       onselectionchange="showSelectedImg('countryList','selected')">
      ....
      </rich:scrollableDataTable>
      <a4j:commandButton id="updateBtn"
       value="click"
       action="#{geo_countryAction.updateAction}"
       reRender="countryList">
       </a4j:commandButton>
      


      the richfaces' version is 3.2.1.GA


        • 1. Re: scrollableDataTable cannot be reRender
          beta guo Newbie

          The javascript error msg is :
          Line :108
          error :style is null or not a object

          and the header of each row is lose.

          • 2. Re: scrollableDataTable cannot be reRender
            Nick Belaevski Master

            Hello,

            Can you please provide full page code?

            • 3. Re: scrollableDataTable cannot be reRender
              Konstantin Mishin Novice

              Describe your environment, please. RichFaces version and etc.

              • 4. Re: scrollableDataTable cannot be reRender
                Oliver Pütter Newbie

                Hello,
                i face the same problem since rf 3.2.1 causing me to stay on rf 3.2.0 (!)

                Meanwhile in 3.2.2.BETA 5 the javascript error is away, but the headers and footers are still not rendered when ajax rerender occurs.

                Using IE 7, Tomcat 6, JSF 1.2

                Please supply at least a workaround, because my customer burns my ass if this bug is not fixed soon:-(

                Thanks a lot

                • 5. Re: scrollableDataTable cannot be reRender
                  Oliver Pütter Newbie

                  In FireFox the headers and footers are never rendered

                  Error Message is

                  rules.selectorText is undefined
                  unbreakableEach()("#j_id_jsp_1435992162_135_tableRT .dr-sdt-c-0")common-s....js.faces (Linie 32)
                  parseTemplate()(div#j_id_jsp_1435992162_135:tableRT_GridHeaderTemplate.dr-sdt-inlinebox)controls....js.faces (Linie 30)
                  initialize()(div#j_id_jsp_1435992162_135:tableRT_GridHeaderTemplate.dr-sdt-inlinebox)controls....js.faces (Linie 15)
                  initialize()(function(), div#j_id_jsp_1435992162_135:tableRT_GridHeaderTemplate.dr-sdt-inlinebox, Object startInitTime=1219670999443 options=Object)controls....js.faces (Linie 14)
                  clone()()3_2_2.BE...ipt.faces (Linie 18)
                  klass()3_2_2.BE...ipt.faces (Linie 5)
                  initialize()()controls....js.faces (Linie 110)
                  initialize()(function(), "j_id_jsp_1435992162_135:tableRT", Object data=[0] count=0 columns=8, [Object pane=1, Object pane=2, Object pane=3])controls....js.faces (Linie 110)
                  clone()()3_2_2.BE...ipt.faces (Linie 18)
                  valueOf()()3_2_2.BE...ipt.faces (Linie 10)
                  clone()()3_2_2.BE...ipt.faces (Linie 18)
                  onSortComplete()(function(), Object client_id=j_id_jsp_1435992162_135:tableRT)controls....js.faces (Linie 147)
                  clone()()3_2_2.BE...ipt.faces (Linie 18)
                  klass()3_2_2.BE...ipt.faces (Linie 5)
                  home.faces()()

                  • 6. Re: scrollableDataTable cannot be reRender
                    Konstantin Mishin Novice

                     

                    "opr" wrote:
                    headers and footers are still not rendered

                    I cannot reproduce it. Can you please attach war, where problem is reproduced with 3.2.2.BETA5.

                    • 7. Re: scrollableDataTable cannot be reRender
                      Oliver Pütter Newbie

                      Sorry, cannot attach war. It would not work without appropriate database

                      But look at the snippet. Perhaps it might help:


                       <h:form id="customer">
                       <a4j:keepAlive beanName="customerBean"></a4j:keepAlive>
                       <h:panelGrid columns="1">
                       <rich:panel id="overview">
                       <rich:scrollableDataTable
                       sortMode="single"
                       rows="10"
                       id="customerTable"
                       selectedClass="tableSelection"
                       value="#{customerBean.customerModel}"
                       var="customer"
                       height="120px"
                       binding="#{customerBean.htmlScrollableDataTable}"
                       rowKeyVar="rkv"
                       selection="#{customerBean.selectedRows}">
                       <rich:column style="width:140" headerClass="tableHeader" sortable="false">
                       <f:facet name="header">
                       <h:outputText value="#{i18n.general_lbName}"/>
                       </f:facet>
                       <h:outputLabel style="width:100%;height:100%" value="#{customer.name}">
                       <a4j:support ajaxSingle="true" event="onclick" action="#{customerBean.select}" reRender="details, action">
                       <a4j:actionparam name="sel" value="#{customer.id}" assignTo="#{customerBean.selectedCustomerId}"/>
                       </a4j:support>
                       </h:outputLabel>
                       <f:facet name="footer">
                       <h:inputText onkeypress="return enterPressed(event)" style="width:100%;font-size: 0.8em" id="filterName" value="#{customerBean.filterName}"/>
                       </f:facet>
                       </rich:column>
                       <rich:column style="width:140" headerClass="tableHeader" sortable="false">
                       <f:facet name="header">
                       <h:outputText value="#{i18n.masterdata_customer_lbSuperiorCustomer}"/>
                       </f:facet>
                       <h:outputLabel style="width:100%;height:100%" value="#{customer.customer.name}">
                       <a4j:support ajaxSingle="true" event="onclick" action="#{customerBean.select}" reRender="details, action">
                       <a4j:actionparam name="sel" value="#{customer.id}" assignTo="#{customerBean.selectedCustomerId}"/>
                       </a4j:support>
                       </h:outputLabel>
                       <f:facet name="footer">
                       <h:inputText onkeypress="return enterPressed(event)" style="width:100%;font-size: 0.8em" id="filterSuperior" value="#{customerBean.filterSuperior}"/>
                       </f:facet>
                       </rich:column>
                       <rich:column style="width:140" headerClass="tableHeader" sortable="false">
                       <f:facet name="header">
                       <h:outputText value="#{i18n.general_lbPhone}"/>
                       </f:facet>
                       <h:outputLabel style="width:100%;height:100%" value="#{customer.contact.phone}">
                       <a4j:support ajaxSingle="true" event="onclick" action="#{customerBean.select}" reRender="details, action">
                       <a4j:actionparam name="sel" value="#{customer.id}" assignTo="#{customerBean.selectedCustomerId}"/>
                       </a4j:support>
                       </h:outputLabel>
                       <f:facet name="footer">
                       <h:inputText onkeypress="return enterPressed(event)" style="width:100%;font-size: 0.8em" id="filterPhone" value="#{customerBean.filterPhone}"/>
                       </f:facet>
                       </rich:column>
                       <rich:column style="width:140" headerClass="tableHeader" sortable="false">
                       <f:facet name="header">
                       <h:outputText value="#{i18n.general_lbMail}"/>
                       </f:facet>
                       <h:outputLabel style="width:100%;height:100%" value="#{customer.contact.mail}">
                       <a4j:support ajaxSingle="true" event="onclick" action="#{customerBean.select}" reRender="details, action">
                       <a4j:actionparam name="sel" value="#{customer.id}" assignTo="#{customerBean.selectedCustomerId}"/>
                       </a4j:support>
                       </h:outputLabel>
                       <f:facet name="footer">
                       <h:inputText onkeypress="return enterPressed(event)" style="width:100%;font-size: 0.8em" id="filterMail" value="#{customerBean.filterMail}"/>
                       </f:facet>
                       </rich:column>
                       <rich:column style="width:140" headerClass="tableHeader" id="address" sortable="false">
                       <f:facet name="header">
                       <h:outputText value="#{i18n.general_lbAdress}"/>
                       </f:facet>
                       <h:outputLabel style="width:100%;height:100%" value="#{customer.addressByAddress.street}, #{customer.addressByAddress.zip} #{customer.addressByAddress.city}">
                       <a4j:support ajaxSingle="true" event="onclick" action="#{customerBean.select}" reRender="details, action">
                       <a4j:actionparam name="sel" value="#{customer.id}" assignTo="#{customerBean.selectedCustomerId}"/>
                       </a4j:support>
                       </h:outputLabel>
                       <f:facet name="footer">
                       <h:inputText onkeypress="return enterPressed(event)" style="width:100%;font-size: 0.8em" id="filterAddress" value="#{customerBean.filterAddress}"/>
                       </f:facet>
                       </rich:column>
                       </rich:scrollableDataTable>
                       <h:panelGrid columns="2">
                       <a4j:commandButton id="filterButton" style="height:17px;font-size: 0.6em;" actionListener="#{customerBean.doFilter}" value="filter" reRender="customerTable, details" >
                       <a4j:actionparam noEscape="true" name="filterName" value="document.getElementById('customer:customerTable:filterName').value" assignTo="#{customerBean.filterName}"/>
                       <a4j:actionparam noEscape="true" name="filterAddress" value="document.getElementById('customer:customerTable:filterAddress').value" assignTo="#{customerBean.filterAddress}"/>
                       <a4j:actionparam noEscape="true" name="filterSuperior" value="document.getElementById('customer:customerTable:filterSuperior').value" assignTo="#{customerBean.filterSuperior}"/>
                       <a4j:actionparam noEscape="true" name="filterPhone" value="document.getElementById('customer:customerTable:filterPhone').value" assignTo="#{customerBean.filterPhone}"/>
                       <a4j:actionparam noEscape="true" name="filterMail" value="document.getElementById('customer:customerTable:filterMail').value" assignTo="#{customerBean.filterMail}"/>
                       </a4j:commandButton>
                       <a4j:commandButton style="height:17px;font-size: 0.6em;" actionListener="#{customerBean.doFilter}" onclick="resetFilter()" value="reset" reRender="customerTable,details">
                       <a4j:actionparam noEscape="true" name="filterName" value="document.getElementById('customer:customerTable:filterName').value" assignTo="#{customerBean.filterName}"/>
                       <a4j:actionparam noEscape="true" name="filterAddress" value="document.getElementById('customer:customerTable:filterAddress').value" assignTo="#{customerBean.filterAddress}"/>
                       <a4j:actionparam noEscape="true" name="filterSuperior" value="document.getElementById('customer:customerTable:filterSuperior').value" assignTo="#{customerBean.filterSuperior}"/>
                       <a4j:actionparam noEscape="true" name="filterPhone" value="document.getElementById('customer:customerTable:filterPhone').value" assignTo="#{customerBean.filterPhone}"/>
                       <a4j:actionparam noEscape="true" name="filterMail" value="document.getElementById('customer:customerTable:filterMail').value" assignTo="#{customerBean.filterMail}"/>
                       </a4j:commandButton>
                       </h:panelGrid>
                       </rich:panel>
                      ....
                      


                      The footers contain input fields for filtering the table data. After filtering and changing the underlying model we try to rerender the table. If i strip down the functionality it is still not working.

                      Do you need further input?

                      Thanks

                      Oliver

                      • 8. Re: scrollableDataTable cannot be reRender
                        Oliver Pütter Newbie

                        Better have a look at this. This is a stripped down page which I created. It shows that headers and footers are not rerendered.

                        Can you reproduce this bug in your environment?

                        <%@ page language="java" contentType="text/html;charset=UTF-8"%>
                        <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
                        <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
                        <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
                        <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
                        <html>
                        <head>
                        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                        <title>TPM</title>
                        </head>
                        <body>
                        <f:view>
                        
                        <h:form id="customer">
                         <h:panelGrid columns="1">
                         <rich:panel id="overview">
                         <rich:scrollableDataTable
                         sortMode="single"
                         id="customerTable"
                         var="customer"
                         height="120px"
                         rowKeyVar="rkv">
                         <rich:column style="width:140" sortable="false">
                         <f:facet name="header">
                         <h:outputText value="Name"/>
                         </f:facet>
                         <h:outputLabel style="width:100%;height:100%" value="Name">
                        
                         </h:outputLabel>
                         <f:facet name="footer">
                         <h:inputText style="width:100%;font-size: 0.8em" id="filterName"/>
                         </f:facet>
                         </rich:column>
                         </rich:scrollableDataTable>
                         <h:panelGrid columns="2">
                         <a4j:commandButton style="height:17px;font-size: 0.6em;" value="filter" reRender="customerTable">
                         </a4j:commandButton>
                         <a4j:commandButton style="height:17px;font-size: 0.6em;" value="reset" reRender="customerTable">
                         </a4j:commandButton>
                         </h:panelGrid>
                         </rich:panel>
                         </h:panelGrid>
                        </h:form>
                        </f:view>
                        </body>
                        </html>
                        


                        • 9. Re: scrollableDataTable cannot be reRender
                          Konstantin Mishin Novice

                          Problem has been fixed.

                          • 10. Re: scrollableDataTable cannot be reRender
                            Oliver Pütter Newbie

                            Great.

                            Will the fix be included in 3.2.2?

                            Is ist already available in the snapshot?

                            Regards

                            Oliver

                            • 11. Re: scrollableDataTable cannot be reRender
                              Konstantin Mishin Novice

                              It is already available in the snapshot.

                              • 12. Re: scrollableDataTable cannot be reRender
                                Stefan Mohr Newbie

                                I'm still getting this behaviour in 3.2.2CR1.
                                Did the fix go into this release or do I need to grab a different snapshot?

                                • 13. Re: scrollableDataTable cannot be reRender
                                  Paul Baker Apprentice

                                  I am have a similar problem. I have a scrollableDataTable that when rerendered, sometimes loses all of the formatting (layout, color, styles).

                                  I am using:
                                  RichFaces 3.2.2 RC1, Facelets

                                  Scenario:


                                  Empty Table displayed
                                  Select outputlink that displays Rich:ModalPanel via Rich:componentControl
                                  Enter fields in ModalPanel
                                  Submit fields via a4j:commandButton
                                  Rerender fields (I have tried a number of combinations here)


                                  Everything works fine!!!
                                  Repeat, no problem

                                  Sort one of the columns on the scrollableDataTable

                                  Repeat above, then the table is rerendered as trash.. :(

                                  I have had many problems with this component,

                                  Code:

                                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                                   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                                  
                                  <html xmlns="http://www.w3.org/1999/xhtml"
                                   xmlns:ui="http://java.sun.com/jsf/facelets"
                                   xmlns:h="http://java.sun.com/jsf/html"
                                   xmlns:rich="http://richfaces.ajax4jsf.org/rich"
                                   xmlns:a4j="http://richfaces.org/a4j"
                                   xmlns:c="http://java.sun.com/jstl/core"
                                   xmlns:f="http://java.sun.com/jsf/core" xml:lang="en" lang="en">
                                  
                                  
                                   <ui:composition template="#{menuState.layout}">
                                  
                                   <ui:define name="header">
                                   <ui:include src="/topMenuBar.xhtml" />
                                   </ui:define>
                                  
                                   <ui:define name="menu">
                                   <ui:include src="/leftMenu.xhtml" />
                                   </ui:define>
                                  
                                   <ui:define name="content">
                                   <center>
                                   <h:outputLabel value="Supplier" styleClass="titleText" />
                                   </center>
                                  
                                   <rich:messages layout="list" infoClass="msgInfoText"
                                   errorClass="msgErrorText" fatalClass="msgFatalText">
                                   <f:facet name="header">
                                   <h:outputText value="Entered Data Status:"></h:outputText>
                                   </f:facet>
                                   <f:facet name="infoMarker">
                                   <h:graphicImage value="/images/GreenFlag.gif" />
                                   </f:facet>
                                   <f:facet name="errorMarker">
                                   <h:graphicImage value="/images/Exclamation.gif" />
                                   </f:facet>
                                   </rich:messages>
                                  
                                   <h:form id="supplierForm">
                                   <center>
                                   <h:panelGrid columns="2" border="0"
                                   columnClasses="colSty150R, colSty700L">
                                   <h:outputLabel for="address" value="Mailing Address:"
                                   styleClass="labelRjTop" />
                                   <h:panelGroup style="width:700px">
                                   <h:panelGrid columns="2" border="0"
                                   columnClasses="colSty250L, colSty450L">
                                   <h:inputTextarea id="address"
                                   value="#{supplierController.supplierImpl.address}" rows="6"
                                   cols="25" />
                                   <h:panelGrid columns="2" border="0"
                                   columnClasses="panelGridColRj, panelGridColLj">
                                   <h:outputLabel for="phone" value="Phone Number:"
                                   styleClass="labelRj" />
                                   <h:inputText id="phone"
                                   value="#{supplierController.supplierImpl.phone}" size="25" />
                                   <h:outputLabel for="fax" value="Fax Number:"
                                   styleClass="labelRj" />
                                   <h:inputText id="fax"
                                   value="#{supplierController.supplierImpl.fax}" size="25" />
                                   <h:outputLabel for="dtm" value="Data Transfer Method:"
                                   styleClass="labelRj" />
                                   <h:panelGroup id="dtm">
                                   <h:panelGrid columns="4" border="0">
                                   <h:selectBooleanCheckbox id="dtmDirect"
                                   value="#{supplierController.supplierImpl.dtmDirectDataTransmitted}">
                                   </h:selectBooleanCheckbox>
                                   <h:outputLabel for="dtmDirect" value="Direct"
                                   styleClass="labelLj" />
                                   <h:selectBooleanCheckbox id="dtmEDoc"
                                   value="#{supplierController.supplierImpl.dtmEDocument}">
                                   </h:selectBooleanCheckbox>
                                   <h:outputLabel for="dtmEDoc" value="E-Document"
                                   styleClass="labelLj" />
                                   <h:selectBooleanCheckbox id="dtmHardCpy"
                                   value="#{supplierController.supplierImpl.dtmHardCopyDocument}">
                                   </h:selectBooleanCheckbox>
                                   <h:outputLabel for="dtmHardCpy" value="Hardcopy"
                                   styleClass="labelLj" />
                                   <h:selectBooleanCheckbox id="dtmOther"
                                   value="#{supplierController.supplierImpl.dtmOther}">
                                   </h:selectBooleanCheckbox>
                                   <h:outputLabel for="dtmOther" value="Other"
                                   styleClass="labelLj" />
                                   </h:panelGrid>
                                   </h:panelGroup>
                                   </h:panelGrid>
                                  
                                   </h:panelGrid>
                                   <rich:spacer height="20px" />
                                   </h:panelGroup>
                                  
                                   <h:panelGrid columns="1" border="0">
                                   <h:outputLabel for="ttyList" value="TTY Addresses:"
                                   styleClass="labelRj" />
                                   <h:outputLink value="#" id="link">
                                   <f:verbatim>new</f:verbatim>
                                   <rich:componentControl for="ttyModal" attachTo="link"
                                   operation="show" event="onclick" />
                                   </h:outputLink>
                                  
                                   </h:panelGrid>
                                  
                                   <h:panelGroup id="ttyAddrGrp">
                                   <rich:scrollableDataTable rowKeyVar="rkvt" frozenColCount="1"
                                   height="100px" id="ttyList"
                                   columnClasses="col" var="tty"
                                   sortMode="single"
                                   binding="#{supplierController.ttyDataTable}"
                                   value="#{supplierController.ttyAddresses}" rows="4" width="700px">
                                  
                                   <rich:column width="200px" id="ttyAddress">
                                   <f:facet name="header">
                                   <h:outputText styleClass="headerText" value="TTY Address" />
                                   </f:facet>
                                   <h:outputText value="#{tty.ttyAddress}" />
                                   </rich:column>
                                   <rich:column width="450px" id="description">
                                   <f:facet name="header">
                                   <h:outputText styleClass="headerText" value="TTY Description" />
                                   </f:facet>
                                   <h:outputText value="#{tty.description}" />
                                   </rich:column>
                                   </rich:scrollableDataTable>
                                   <rich:spacer height="20px" />
                                   </h:panelGroup>
                                  
                                   <h:outputLabel for="emailList" value="Email Addresses:"
                                   styleClass="labelRj" />
                                  
                                   <h:panelGroup>
                                   <rich:scrollableDataTable rowKeyVar="rkve" frozenColCount="1"
                                   height="100px" id="emailList"
                                   columnClasses="colSty200L,colSty500L" var="email"
                                   sortMode="single"
                                   value="#{supplierController.supplierImpl.emailAddress}">
                                  
                                   <rich:column id="emailAddress" width="200px">
                                   <f:facet name="header">
                                   <h:outputText styleClass="headerText" value="TTY Address" />
                                   </f:facet>
                                   <h:outputText value="#{tty.emailAddress}" />
                                   </rich:column>
                                   <rich:column id="description" width="500px">
                                   <f:facet name="header">
                                   <h:outputText styleClass="headerText" value="TTY Description" />
                                   </f:facet>
                                   <h:outputText value="#{email.description}" />
                                   </rich:column>
                                   </rich:scrollableDataTable>
                                   <rich:spacer height="20px" />
                                   </h:panelGroup>
                                  
                                   <h:outputLabel for="remarks" value="Remarks:" styleClass="labelRj" />
                                  
                                   <h:inputTextarea id="remarks"
                                   value="#{supplierController.supplierImpl.remarks}" rows="6"
                                   cols="80" />
                                   </h:panelGrid>
                                  
                                  
                                   <rich:spacer width="1" height="5" />
                                  
                                  
                                   <h:commandButton id="update" value="Update"
                                   action="#{supplierController.updateAircraftType}" />
                                   </center>
                                  
                                   <h:inputHidden id="supplierImpl_id"
                                   value="#{supplierController.supplierImpl.id}" />
                                   <h:inputHidden id="supplierImpl_ver"
                                   value="#{supplierController.supplierImpl.ver}" />
                                  
                                  
                                   </h:form>
                                  
                                   <rich:modalPanel id="ttyModal" autosized="true">
                                   <f:facet name="header">
                                   <h:outputText value="TTY Address" />
                                   </f:facet>
                                   <f:facet name="controls">
                                   <span style="cursor: pointer"
                                   onclick="javascript:Richfaces.hideModalPanel('ttyModal')">X</span>
                                   </f:facet>
                                   <h:form>
                                   <h:panelGrid columns="2" border="0"
                                   columnClasses="panelGridColRj, panelGridColLj">
                                   <h:outputLabel for="ttyAddr" value="TTY Address:"
                                   styleClass="labelRj" />
                                   <h:inputText id="ttyAddr"
                                   value="#{supplierController.ttyAddress.ttyAddress}" size="25" />
                                   <h:outputLabel for="ttyDesc" value="Description:"
                                   styleClass="labelRj" />
                                   <h:inputText id="ttyDesc"
                                   value="#{supplierController.ttyAddress.description}" size="25" />
                                   </h:panelGrid>
                                   <center>
                                   <a4j:commandButton id="addTty" value="Add"
                                   reRender="ttyAddrGrp"
                                   action="#{supplierController.addTtyAddress}" />
                                   </center>
                                   </h:form>
                                   </rich:modalPanel>
                                  
                                  
                                   </ui:define>
                                  
                                   </ui:composition>
                                  </html>
                                  
                                  


                                  This is literally what is rendered when the problem occurs, no formatting.


                                  TTY Addresses:
                                  new
                                  ATLRMXS
                                  TEST
                                  a
                                  TEST
                                  C
                                  TEST
                                  d
                                  TEST
                                  TTY AddressTTY Description


                                  • 14. Re: scrollableDataTable cannot be reRender
                                    Mateusz Beny Newbie

                                    Hello everyone.

                                    I have the same problem as pbaker01. Exactly the same!
                                    Is there any way to fix this?

                                    I'm using 3.2.2.SR1.
                                    Problem is unrelated to web browser, I've checked with IE6, IE7, FF2 and FF3

                                    Any help would be appreciated.

                                    1 2 Previous Next