模式對話框無法正常工作

我正在處理JSF/Primefaces應用程序。我想阻止頁面在primefaces對話框後面。我想這樣的代碼：模式對話框無法正常工作

<h:form id="form"> 
     <p:dataTable id="types" value="#{resourcesTypesMBean.resourceTypes}" var="item" 
        selection="#{resourcesTypesMBean.selectedResourceType}" 
        rowKey="#{item.id}" selectionMode="single"> 
      <f:facet name="header" > 
       <table style="border: hidden"> 
        <tbody > 
         <tr > 
          <td align="left" style="border: hidden"> 
           <p:outputLabel value="List of Resources' Types"/> 
          </td> 
          <td align="right" style="border: hidden"> 
           <p:commandButton 
            oncomplete="ResourceTypeDialogNew.show()" 
            icon="ui-icon-plus" title="add"/> 
           <p:commandButton id="btnDelete" title="delete 
         " actionListener="#{resourcesTypesMBean.deleteResourceType()}" 
           update="types" icon="ui-icon-trash" /> 
           <p:button outcome="Resources.xhtml" 
           icon="ui-icon-arrowthick-1-w" title="back"/> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
      </f:facet> 
      <p:column headerText="Name"> 
       <p:outputLabel value="#{item.name}"/> 
      </p:column> 
      <p:column headerText="Code"> 
       <p:outputLabel value="#{item.code}"/> 
      </p:column> 
        </p:dataTable> 
    </h:form> 

    <h:form id="newResourceTypeForm"> 
      <p:dialog header="New Resource Type" widgetVar="ResourceTypeDialogNew" 
      resizable="false" modal="true" appendTo="@(body)" showEffect="explode" 
      hideEffect="explode" style="position: absolute ;" 
      id="dialogNewResourceType"> 
      <p:panel id="panel"> 
       <p:messages id="messages" /> 
       <p:panelGrid id="newResourceType" columns="2" style="margin-bottom:10px"> 
        <f:facet name="header"> 
         <p:graphicImage value="/images/resource.png"/> 
        </f:facet> 
        <p:outputLabel value="Name" for="name"/> 
        <p:inputText id="name" value="#{resourcesTypesMBean.name}" 
        required="true" requiredMessage="The Name field is required." /> 
        <p:outputLabel value="Code" for="code"/> 
        <p:inputText id="code" value="#{resourcesTypesMBean.code}" 
        required="true" requiredMessage="The Code field is required." /> 
        </p:panelGrid> 
       <div align="right" > 
        <p:commandButton value="Save" style="margin-right: 5px" icon="ui- 
        icon-circle-check" oncomplete=" handleSubmitRequest(xhr, status, 
        args, 'ResourceTypeDialogNew','newResourceTypeForm');" 
        actionListener="#{resourcesTypesMBean.addResourceType()}" 
        update=":form:types, :growl" /> 
        <p:commandButton value="Cancel" 
        oncomplete="ResourceTypeDialogNew.hide();" 
        icon="ui-icon-arrowrefresh-1-n" styleClass="ui-priority-primary"/> 
       </div> 
      </p:panel> 
     </p:dialog> 
    </h:form>

當所示的對話框，後面的頁面被阻止，但save和cancel按鈕不能正常工作，用戶將自動從應用程序註銷。我需要你的幫助。更新：無modal="true" appendTo="@(body)"它正常工作（均爲save和cancel按鈕）。

來源

2013-12-18 Reem

嗨Reema，嘗試熔化上面的xhtml代碼，直到只剩下重要的部分。這會讓有人能幫助你的變化更高。另外'resourcesTypesMBean.addResourceType（）'後面的方法可能是有趣的。 –

@ L-Ray請檢查更新。 – Reem

現在不能檢查解決方案的生命，但下面看起來可疑：

當您檢查呈現的XHTML代碼（例如，通過Firefox中的Firebug），你可能會認識到，形式newResourceTypeForm實際上是空的。與appendTo="@body", I guess, the dialog panel is attached directly to the身體元素，並通過這是任何形式之外。這可以防止工作中的按鈕。

上移形式進入p:dialog，或
嘗試下探appendTo
嘗試重寫appendTo="@form"

希望的是一個可以幫助你向前走，而如果 - upvotes讚賞 - ...

來源

2013-12-18 12:35:47

with appendTo =「@ form」或者刪除appendTo，對話框後面的頁面不會被阻止。 – Reem

感謝您的幫助:)解決方案是將窗體 ...移動到p：對話框中。 – Reem

模式對話框無法正常工作

回答

相關問題