Question

我正在寻找p:overlayPanel内容在点击commendButton或commendLink时应自行更新的解决方案。但是当我点击按钮时它显示空白p:overlayPanel。使用该按钮或链接中的p:overlayPanel ID进行更新。我尝试了很多方法没有成功。我的代码错了吗？请提出一些解决方案。

这是我的代码：

    <ui:repeat id="profiles" value="#{items.lstProfiles}" var="profile">
       <p:commandLink id="profileLink" value="show" update="moviePanel"
                      actionListener="#{dashBoardController.showProfileOverlay}"/>

       <p:overlayPanel id="moviePanel" for="profileLink"  hideEffect="fade"     
                       dynamic="true" style="width:300px; height: 150px;">
           <h:panelGrid columns="2">
               <h:outputText value="Name : "/>
               <h:outputText value="#{dashBoardController.selectedProfile.name}"/>
           </h:panelGrid>
       </p:overlayPanel>
  </ui:repeat>

Answer 1

通常dynamic="true"应该完成这项工作但有时会失败。所以要更新Overlay中的内容。通过调整Jquery，有很多方法可以做到这一点。

我能想到的最简单的一个是：
由于ui:repeat为p:overlayPanel生成动态ID，您可以通过提供每次迭代的唯一css类名来更新。

在Primefaces中，您也可以使用css类选择一个组件：@(.myclass)。

因此您也可以更新该组件： - update="@(.mystyle)"

示例：

<h:form>
    <ui:repeat var="patient" value="#{dataCenter.patientList}">
        <p:commandLink value="#{patient.firstName}" id="patientNameLnk" update="@(.overlay-class-#{patient.patientId})"/><br/>

        <p:overlayPanel for="patientNameLnk">
            <h:panelGroup styleClass="overlay-class-#{patient.patientId}">
                #{patient.firstName}
                #{patient.lastName}
                #{patient.dob}
            </h:panelGroup>
        </p:overlayPanel>
    </ui:repeat>
</h:form>

在上面的示例中，每个h:panelGroup的css类名称将生成为overlay-class-<PATIENT_ID>，因此每个h:panelGroup都将具有唯一的类名称（如果patientId是唯一的）。

注意：请注意，我在h:panelGroup内更新了p:overlayPanel，因为如果您更新p:overlayPanel，那么它可能会开始闪烁（在上面执行示例时，它发生在我身上）。< / p>

通过命令链接/按钮</p：overlaypanel>更新后，<p：overlaypanel>显示空白

1 个答案: