Search code examples
ajaxjsfprimefacesrichfacesajax4jsf

AJAX update or render "points" the correct clientId but does not update the value in datatable


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

datatable being updated

The NoR value is attributed to the correct radio component as seen below but does not replace the YesR:

changed values highlighted within Firebug

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; 

    }

Solution

  • 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