I'd like to update an <h:outputText>
in one column by processing a value of an <h:selectOneRadio>
located in another column inside a datatable:
...
<rich:column>
<h:selectOneRadio id="mainSelect" value="#{row.select1}" required="true" >
<f:selectItems value="#{row.responses}" var="resp" itemLabel="#{resp.label}" itemValue="#{resp.response}" />
<a4j:ajax event="change" render="outputPanel1"
listener="#{subTableView.updateSecond(row.select1)}" />
</h:selectOneRadio>
</rich:column>
<rich:column>
<a4j:outputPanel id="outputPanel1">
<h:outputText value="#{row.select1}"/>
<p>#{component.clientId}</p>
</a4j:outputPanel>
</rich:column>
...
See below my datatable and Firebug's HTML panel below pointing (automatically highlighted in yellow by Firebug) the correct clientId
when the radio button is clicked but the value taken from the database loaded at view build time inside the <span>
does not change (from YesR
to NoR
in this example).
The NoR
value is attributed to the correct radio component as seen below but does not replace the YesR
:
The good thing is that each row's process is independent and the selectOneRadio
process is pointing to the corresponding outputPanel1
for each row. I tried different combinations of <p:ajax update="">
, <f:ajax render="">
and <h:panelGroup>
without success. I also tried different events like click
, change
and valueChange
without success.
What could be the reason that the value in the outputPanel1
is not updated?
I am using WildFly 9.0.2 (Mojarra 2.2.12) with RichFaces 4.5.8 (or PF5.3) (tested on different browsers).
EDIT (for onepotato):
<rich:dataTable id="grid" width="5000"
value="#{subTableView.getAllHeaders()}"
var="head" >
<rich:column colspan="3" >
<h:outputText value="#{head.name}" />
</rich:column>
<rich:collapsibleSubTable id="cellGrid" value="#{head.questions}" var="row" >
<rich:column>
<h:outputText value="#{row.question}" />
</rich:column>
<rich:column>
<h:selectOneRadio id="mainSelect" value="#{row.select1}" required="true" >
<f:selectItems value="#{row.responses}" var="resp" itemLabel="#{resp.label}" itemValue="#{resp.response}" />
<a4j:ajax event="change" render="outputPanel1"
listener="#{subTableView.updateSecond(row.select1)}" />
</h:selectOneRadio>
</rich:column>
<rich:column>
<a4j:outputPanel id="outputPanel1">
<h:outputText value="#{row.select1}"/>
<p>#{component.clientId}</p>
</a4j:outputPanel>
</rich:column>
</rich:collapsibleSubTable>
</rich:dataTable>
Bean:
@ManagedBean
@ViewScoped
public class SubTableView implements Serializable{
private static final long serialVersionUID = 1L;
@EJB
private PublicService publicService;
private List<Response> responses;
private Response response = new Response();
private List<Header> headers;
private Header header = new Header();
@PostConstruct
public void init() {
this.responses = publicService.getAllResponses();
this.headers = publicService.getAllHeaders();
}
+getters & setters
Service:
@PersistenceContext
private EntityManager entityManager;
public List<Header> getAllHeaders(){
List<Header> headers = entityManager.createQuery("select h from Header h",Header.class).getResultList();
for(Header h : m.getHeaders())
{
headers.add(h);
for(Question q : h.getQuestions())
{
}
}
return headers;
}
Although tried several times before with PrimeFaces Datatable: PFS finally worked here (RF dataTable) for this:
I added the following ajax line in selectOneRadio: <p:ajax update="@(.status)" />
with the target column:
<h:panelGroup id="outputPanel1" styleClass="status">
<h:outputText id="display1" value="#{row.answer.select1}" />
</h:panelGroup>
But now I have the following issue: TabView First Tab not toggled as expected