【问题标题】:How to refresh div and change that div css class after refresh?如何刷新 div 并在刷新后更改该 div css 类?
【发布时间】:2015-03-17 10:53:33
【问题描述】:

下面是我的代码:

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

有标题、条款、名称以及“链接/按钮”的合同列表。当我单击该链接/按钮时,该特定合同详细信息在另一个 div 中打开,ID 为“contractDIV”,来自数据库,css 类名称从“openPopup”更改为“closePopup”。在 JSF 中怎么可能?

【问题讨论】:

  • 请告诉我们到目前为止你尝试了什么?它在 JSF 中的可能性 在这里不是有效的问题
  • 你在用什么 Primeaces 或 Richfaces ?

标签: ajax jsf


【解决方案1】:

首先,该链接/按钮必须是 JSF 组件。其次,那个 div 也应该是一个 JSF 组件。从那里开始,它非常简单。

更新

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

【讨论】:

  • 我在 内使用
    并且还使用
【解决方案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的处理完成,内容就会被刷新

【讨论】:

    【解决方案3】:

    您可以使用 javascript 更改 oncompletep:ajax 中的类。

    类似:

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-02-12
      • 1970-01-01
      • 2014-04-23
      • 2013-01-05
      • 1970-01-01
      相关资源
      最近更新 更多