Question

我熟悉RichFaces，但对Primefaces来说相对较新，并试图在h:graphicImage内部（另外在p:dataTable内）实现一个简单的ui:repeat。这是p:ajax inside h:graphicImage的后续问题。

我将拆分以下xhtml - 代码以直接评论行为：

<!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">

现在，第一个h:form跟随其中包含h:outputText和h:graphicImage。通过单击图像调用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/>

在第二个h:form中，按钮位于p:dataTable内。如果我单击图像，则调用bean方法更新计数器。（注意在第一次尝试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/>

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>

现在让我们来p:dataTable内的ui:repeat。使用这段代码，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>

在这种情况下，我得到了<partial-response><changes><update id="f1:counter">...，但没有调用bean方法（在{em>计数器未更新的内部tag()方法）。这是通过调试测试的。我读了 unable to use <p:ajax> on my primeface's datatable 但我与primefaces-3.0.M3.jar和primefaces-2.2.1.jar的行为相同。

Answer 1

我曾经遇到过类似的问题。我可能是偏执狂，但我的印象是JSF2中的迭代组件UIData和UIRepeat被窃听。特别是当它们嵌套时，它们不会正确处理组件状态。我自己修补了UIRepeat，它适用于任何级别的嵌套。我知道tomahawk的迭代组件也能正常工作。

在您的特定情况下，一个相当简单的解决方法可能会有所帮助，因为无论单击哪个图像，您都需要相同的行为。在表单f1中创建一个h:commandLink，其中包含正确的ajax元素，ID类似于'update-counter'。把它藏起来。将onclick属性添加到值为jsf.ajax.request("f1:update-counter", event, {render: "f1:counter", execute="@this"})的graphicImage。你可能需要用document.getElementById("f1:update-counter")替换第一个参数，我不确定。这个javascript api调用应该等同于单击隐藏的commandLink。或者，您可以尝试跳过commandLink并从f1传递graphicImage id / DOM节点。

我曾经使用f:ajax执行此操作，但也可能适用于p:ajax。

JSF和p：ajax里面的p：dataTable里面的ui：repeat

1 个答案: