JSF and p:ajax inside p:dataTable inside ui:repeat

Question

I'm familiar with RichFaces, but relatively new to Primefaces and trying to implement a simple h:graphicImage inside a p:dataTable (additionally inside a ui:repeat). This is the subsequent question of p:ajax inside h:graphicImage.

I will split the following xhtml-code to directly comment the behavior:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xml:lang="en" lang="en">
  <h:head id="head">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Test</title>
  </h:head>
    <h:body id="body">
      <f:view contentType="text/html">

Now the first h:form follows which contains a h:outputText and a h:graphicImage. By clicking on the image the bean method is called and the counter is correctly updated.

<h:form id="f1">
  <h:outputText id="counter" value="#{clientBean.counter}" />
  <h:graphicImage url="/images/circle-ok.png">
    <p:ajax event="click" update="counter" process="@this"
            listener="#{clientBean.tag}"/>
  </h:graphicImage> 
</h:form><hr/>

In the second h:form the button is inside a p:dataTable. If I click on the image, the bean method is called the counter is updated. (Note At firt I've tried to update="counter" without success)

<h:form id="f2">
  <p:dataTable var="var" value="#{clientBean.vf}">
    <p:column> 
      <f:facet name="header">Tag</f:facet>
      <h:graphicImage url="/images/circle-ok.png">
        <p:ajax event="click" update="f1:counter" process="@this"
                listener="#{clientBean.tag}" />
      </h:graphicImage>
    </p:column>
  </p:dataTable>
</h:form><hr/>

The image inside ui:repeated updates the counter as expected:

<ui:repeat var="var1" value="#{clientBean.list}">   
  <h:form id="f3">
    <h:graphicImage url="/images/circle-ok.png">
  <p:ajax event="click" update="f1:counter" process="@this"
              listener="#{clientBean.tag}" />
    </h:graphicImage>

Now lets come to the p:dataTable inside a ui:repeat. With this piece of code the bean method is not called:

    <p:dataTable var="var2" value="#{var1.list}">
      <p:column>  
        <f:facet name="header">Tag</f:facet>
        <h:graphicImage url="/images/circle-ok.png">
         <p:ajax event="click" update="f1:counter" process="@this"
                 listener="#{clientBean.tag}" />
        </h:graphicImage> 
      </p:column>
    </p:dataTable>
   </h:form>
 </ui:repeat>
</f:view></h:body></html>

In this case I get the <partial-response><changes><update id="f1:counter">..., but the bean method is not called (an inside it's tag()method the counter not updated). This is tested with a debug. I've read unable to use <p:ajax> on my primeface's datatable but I have the same behaivour with primefaces-3.0.M3.jar and primefaces-2.2.1.jar.

score 4 · Accepted Answer · edited Sep 17 '13 at 07:41

4

I used to have a similar issue. I might be paranoid but my impression is the iterative component UIData and UIRepeat in JSF2 are bugged. In particular they won't handle component state properly when they are nested. I have patched UIRepeat myself and it works for me with any level of nesting. I know iterative component from tomahawk works correctly as well.

In your particular case a reasonably simple workaround could help since you want the same behavior regardless of which image is clicked. Create a h:commandLink say in form f1 with proper ajax element inside and id like 'update-counter'. Hide it. Add onclick attribute to your graphicImage with value jsf.ajax.request("f1:update-counter", event, {render: "f1:counter", execute="@this"}). You may need to replace the first argument with document.getElementById("f1:update-counter"), I'm not sure. This javascript api call should be equivalent to clicking the hidden commandLink. Alternatively you may try to skip the commandLink and pass graphicImage id/DOM node from f1 instead.

I used to do this with f:ajax, but maybe will work for p:ajax as well.

edited Sep 17 '13 at 07:41

LaurentG

11,128
9
51
66

answered Sep 06 '11 at 09:23

mrembisz

12,722
7
36
32

Thanks for the suggestion of the workaround. In reality I don't want the same behavior, I have only described it in this way to demonstrate the problem with a _simple_ example. But does the impression of a buggy JSF2 handling the component state why the bean is not called? – Thor Sep 06 '11 at 10:11
The state saving problem was related to UIData/UIRepeat not cleaning up client ids after processing. This resulted in states being saved under keys with iteration indexes and they won't match with restored component ids. As a consequence state of the nested iterator is lost. Here is another solution for you: use c:forEach instead of surrounding ui:repeat so no iterating components are nested. – mrembisz Sep 06 '11 at 10:43
I'm not sure if it's good to use JSTL tags in JSF, the web is full of contrivers discussions. Although it's working with `c:foreach` I have the side effect that for each AJAX request the `@PostConstruct` method of my `@ViewScoped` bean is called resulting in really poor performance. – Thor Sep 06 '11 at 17:43
I sometimes use c:forEach in JSF. The difference is it will create a separate set of components in each iteration since it's a tag handler, not a component. Also the ids assigned to components under c:forEach are overridden with automatic ones. – mrembisz Sep 07 '11 at 09:15
1

I'm tending to share your opinion that nested iterative components may be buggy ... :-( – Thor Sep 09 '11 at 12:40

JSF and p:ajax inside p:dataTable inside ui:repeat

1 Answers1

Linked