2013-03-27 69 views
7

我有一個窗體,其中包含一個打開Primafaces overlayPanel的按鈕。 在面板中還有另一個按鈕,用於執行Ajax操作,然後關閉疊加層。
這裏是一個簡化版本,沒有阿賈克斯行動都:Primefaces動態覆蓋面板只顯示一次

<h:form> 
    <p:commandButton id="button1" value="Open overlay" type="button"/> 
    <p:overlayPanel for="button1" widgetVar="ovl" dynamic="true"> 
     <p:commandButton value="Close" oncomplete="ovl.hide();" 
         update="@form"/> 
    </p:overlayPanel> 
</h:form> 

請注意,面板必須有dynamic="true"因爲動態內容必須在實際應用中獲取,並且需要以更新其他形式的update="@form"組件。

問題是:如果我有attibutes,dynamic="true"update="@form"覆蓋僅顯示第一次。點擊「關閉」按鈕後,如果我嘗試再次點擊「打開覆蓋」,面板將不會顯示。

我在做什麼錯?

(使用PrimeFaces 3.5和GlassFish 3.1.2.2)

回答

0

後來我發現下面的代碼是隻要你包含開放式覆蓋按鈕在窗體上做更新,它打破。

<h:form> 
    <p:commandButton id="button1" value="Open overlay" type="button"/> 
    <p:commandButton value="break things" update="@form" /> 
    <p:overlayPanel for="button1" dynamic="true"> 
     <p:commandButton value="Close" update="@form" /> 
    </p:overlayPanel> 
</h:form> 

如果是好的表格一分爲二,嵌入OverlayPanel按鈕,可以嘗試調用點擊用來切換畫面的按鈕。也許符合下面的內容。

<h:form> 
    <p:commandButton id="button1" value="Open overlay" type="button"/> 
    <p:overlayPanel for="button1" dynamic="true" > 
     <p:commandButton value="Close" update=":formToBeUpdated" onclick="document.getElementById('button1').click();"/> 
    </p:overlayPanel> 
</h:form> 

<h:form id="formToBeUpdated"> 
    <h:inputText value="bleh"/> 
</h:form> 
+0

謝謝阿克塞爾。不幸的是,疊加層是許多不同視圖中使用的複合組件的一部分,所以它必須由父窗體元素託管:它不能定義它自己的窗體,因爲我最終會嵌套窗體。 – yankee 2013-04-03 09:34:38

13

使用onclick="widgetVar.loadContents()"在按鈕落下的overlaypanel,其中widgetVaroverlayPanel的變種。

+1

謝謝它的工作。你是怎麼找到這種方法的,它沒有在Primefaces用戶指南中列出。 – 2013-12-26 04:26:51

+2

更新:onclick =「PF('widgetVar')。loadContents();」 – Koekiebox 2015-12-15 10:55:34

0

你應該給你的overlayPanel一個id和你的按鈕的oncompelete顯示它。代碼如下所示:

<h:form> 
    <p:commandButton id="button1" value="Open overlay" type="button" oncomplete="PF('ovlID').show()"/> 
    <p:overlayPanel id="ovlID" for="button1" widgetVar="ovl" dynamic="true"> 
     <p:commandButton value="Close" oncomplete="ovl.hide();" 
        update="@form"/> 
    </p:overlayPanel> 
</h:form>