如何刷新 div 并在刷新后更改 div css class？

Question

下面是我的代码：

      <c:forEach items="#{myBean.contractList}" var="contract">
         <tr>
            <td>#{contract.title}</td>
            <td>#{contract.terms}</td>
            <td> 
                 <h:form>
                 <h:commandLink> 
                   <p:ajax event="click" update=":panelID" listener="#{bean.selectProject(contractID)}"/>
                 </h:commandLink> 
                 </h:form>
            </td>
         </tr>
      </c:forEach>

      <h:panelGroup id="panelID">
        <div id="contractDIV" class="closePopup">
           Full Details of particular contract 
        </div>
      </h:panelGroup>

有包含标题、条款、名称和 "link/button" 的合同列表。当我单击那个 link/button 时，那个特定的合同详细信息在另一个 div 中打开，ID "contractDIV" 来自数据库并且 css class 名称更改为 "closePopup"来自 "openPopup"。它在 JSF 中如何实现？

Answer 1

首先，link/button 必须是 JSF 组件。其次，div 也应该是一个 JSF 组件。从那里开始，它非常简单。

更新

将 event="click" 更改为 event="action"，并使用类似这样的方法来控制将哪个 class 应用于 div class="#{bean.someBoolean ? 'closePopup' : 'openPopup'}"。您可以在 #{bean.selectProject()} 方法

中更改 #{bean.someBoolean} 值

Answer 2

而不是 div 有输出面板考虑为输出面板生成的 Id 是 form:refreshPanel

<h:form id="form">
   <c:forEach items="#{myBean.contractList}" var="contract">
     <tr>
        <td>#{contract.title}</td>
        <td>#{contract.terms}</td>
        <td><p:commandLink actionListener="#{bean.method(contract)}"  update=":form:refreshPanel" /></td>
     </tr>
  </c:forEach>
<p:outputPanel styleClass="closePopup" id="form:refreshPanel"> </p:outputPanel>
</h:form>

所以一旦actionListener的处理完成，内容就会被刷新

Answer 3

您可以使用 javascript 更改 p:ajax 的 oncomplete 中的 class。

类似于：

<p:ajax event="click" update=":panelID" listener="#{bean.selectProject(contractID)}" oncomplete="openPopup();"/>

function openPopup(){
    //your js code
}

如何刷新 div 并在刷新后更改 div css class？

How to refresh div and change that div css class after refresh?

ajax

jsf