scrollableDataTable cannot be reRender

[betagou]

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

[betagou]

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

and the header of each row is lose.

[nbelaevski]

Hello,

Can you please provide full page code?

[konstantin.mishin]

Describe your environment, please. RichFaces version and etc.

[opr]

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

[opr]

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()()

[konstantin.mishin]

"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.

[opr]

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

[opr]

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>

[konstantin.mishin]

Problem has been fixed.

[opr]

Great.

Will the fix be included in 3.2.2?

Is ist already available in the snapshot?

Regards

Oliver

[konstantin.mishin]

It is already available in the snapshot.

[stefan.mohr]

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?

[pbaker01]

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

[beny2000]

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.