JSF和ui：repeat内p：dataTable内的p：ajax

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 ). 我熟悉RichFaces，但对于Primefaces来说相对较新，并尝试在p:dataTable （另外在ui:repeat内部）中实现简单的h:graphicImage 。 This is the subsequent question of p:ajax inside h:graphicImage . 这是h：graphicImage中p：ajax的后续问题。

I will split the following xhtml -code to directly comment the behavior: 我将拆分以下xhtml -code以直接注释行为：

<!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 . 现在，第一个h:form随之出现，其中包含一个h:outputText和一个h:graphicImage 。 By clicking on the image the bean method is called and the counter is correctly updated. 通过单击图像，将调用bean方法，并且计数器已正确更新。

<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 . 在第二个h:form ，按钮位于p:dataTable内部。 If I click on the image, the bean method is called the counter is updated. 如果单击图像，则称为bean方法的计数器被更新。 ( Note At firt I've tried to update="counter" without success) （ 请注意，在尝试时，我尝试update="counter"失败）

<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:repeated的图像将按预期更新计数器 ：

<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 . 现在让我们进入ui:repeat内部的p:dataTable 。 With this piece of code the bean method is not called: 使用这段代码，不会调用bean方法：

    <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). 在这种情况下，我得到了<partial-response><changes><update id="f1:counter">... ，但是未调用bean方法（在它的tag()方法内部， 计数器未更新）。 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 . 我已经读过无法在我的primeface的数据表上使用<p：ajax>，但是我与primefaces-3.0.M3.jar和primefaces-2.2.1.jar具有相同primefaces-2.2.1.jar 。

Answer 1

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. 我可能UIData偏执，但我的印象是UIRepeat中的迭代组件UIData和UIRepeat出错了。 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. 我已经修补了UIRepeat我自己，它适用于任何嵌套级别。 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'. 创建一个h:commandLink形式的h:commandLink ，其中包含适当的ajax元素，其ID为'update-counter'。 Hide it. 把它藏起来。 Add onclick attribute to your graphicImage with value jsf.ajax.request("f1:update-counter", event, {render: "f1:counter", execute="@this"}) . 将onclick属性添加到您的graphicImage中，其值为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. 我不确定，您可能需要将第一个参数替换为document.getElementById("f1:update-counter") 。 This javascript api call should be equivalent to clicking the hidden commandLink. 此javascript api调用应等效于单击隐藏的commandLink。 Alternatively you may try to skip the commandLink and pass graphicImage id/DOM node from f1 instead. 或者，您可以尝试跳过commandLink并从f1传递graphicImage id / DOM节点。

I used to do this with f:ajax , but maybe will work for p:ajax as well. 我曾经用f:ajax做到这一点，但也许也可以用于p:ajax 。

JSF和ui：repeat内p：dataTable内的p：ajax

问题描述

1 个解决方案

解决方案1
4 已采纳 2011-09-06 09:23:43

JSF和ui：repeat内p：dataTable内的p：ajax

问题描述

1 个解决方案

解决方案1 4 已采纳 2011-09-06 09:23:43

解决方案1
4 已采纳 2011-09-06 09:23:43