Geek Answers Handbook

Richfaces: changing component rendered attribute value with a4j: support in extendedDataTable

I am trying to use richfaces extendedDataTable with a4j: support to change the value of the rich: panel attribute 'rendered', but it does not work.

This is the part of my JSF page containing rich: extendedDataTable and rich: panel:

<h:form id="tabForm"> <rich:extendedDataTable id="myTable" width="500px" height="250px" value="#{extDataTableBean.extList}" var="dataRow" selection="#{extDataTableBean.selection}" selectionMode="single"> <rich:column> <f:facet name="header"><h:outputText value="ID" /></f:facet> <h:outputText value="#{dataRow.id}"></h:outputText> </rich:column> <rich:column> <f:facet name="header"><h:outputText value="Name" /></f:facet> <h:outputText value="#{dataRow.name}"></h:outputText> </rich:column> <a4j:support id="myTableTakeSelection" action="#{extDataTableBean.takeSelection}" event="onselectionchange" reRender="pane" /> </rich:extendedDataTable> </h:form> <rich:panel id="pane" rendered="#{extDataTableBean.showPane}"> <h:form id="secForm"> <h:outputText value="ID : " /> <h:inputText id="inTextID" value="#{extDataTableBean.idFd}" /> <br/> <h:outputText value="Name : " /> <h:inputText id="inTextName" value="#{extDataTableBean.nameFd}" /> </h:form> </rich:panel>

The default value for rich: panel 'rendered' is false (set in the bean database). What I wanted to achieve is when a row in extendedDataTable is selected, its value is changed to true so that it displays in the GUI.

And this is part of my bean support:

 /* Constructor */ public ExtDataTableBean(){ setShowPane(false); // default to false loadDataList(); } /* Load some test data into extendedDataTable */ public void loadDataList(){ extList = new ArrayList<MyData>(); MyData e1 = new MyData(); e1.setId(1); e1.setName("name 1"); extList.add(e1); MyData e2 = new MyData(); e2.setId(2); e2.setName("name 2"); extList.add(e2); } public String takeSelection(){ Iterator iterator = getSelection().getKeys(); Object key = null; while(iterator.hasNext()){ key = iterator.next(); } /* set the values of inputText with value from selected row */ setIdFd(extList.get(Integer.parseInt(key.toString())).getId()); setNameFd(extList.get(Integer.parseInt(key.toString())).getName()); setShowPane(true); return null; } public List<MyData> getExtList() { /* Lazy loading */ if(extList == null){ loadDataList(); } return extList; }

In the takeSelection () method, I have setShowPane (true) to change the rich: panel 'rendered' attribute value to true. The problem is rich: the panel does not appear in the GUI when a row is selected.

I did another simple test by adding h: commandButton with a4j support: to set showPane to true, for example:

 <h:commandButton id="cmdBtn" value="Show Pane"> <a4j:support id="cmdBtnSupport" reRender="pane" action="#{extDataTableBean.dispPane}" event="onclick" /> </h:commandButton>

and in the bean database:

 public String dispPane(){ setShowPane(true); return null; }

and it works as expected. rich: the panel is displayed in the graphical interface after clicking a button.

What did I miss in my code?

+4
source share
2 answers

I think I found the cause of the problem from this site: http://community.jboss.org/wiki/CommonAjaxRequestsProblems#conditionalRendering

Excerpt on the part that described the problem:

Client side updates:

Attribute

reRender should not point to conditionally rendered elements, since the structure has no idea where to add an element that was not previously in the DOM. Parents of such components should be renamed instead.

So, after I changed the part that needs to be rewritten and displayed with a binding, as shown below, it now works:

 <rich:panel id="pane" > <h:form id="secForm" rendered="#{extDataTableBean.showPane}" > <h:outputText value="ID : " /> <h:inputText id="inTextID" value="#{extDataTableBean.idFd}" /> <br/> <h:outputText value="Name : " /> <h:inputText id="inTextName" value="#{extDataTableBean.nameFd}" /> </h:form> </rich:panel>
+3
source

<rich:extendedDataTable> included Ajax out of the box. You do not need to add the <a4j:support> , which is designed to use the ajax function for non-ajax JSF components, such as <h:inputText> .

So try this instead:

 <rich:extendedDataTable onselectionchange="#{extDataTableBean.takeSelection}">

Good luck.

0
source

More articles:


All Articles