모달 대화 상자가 올바르게 작동하지 않습니다.

Question

JSF/Primefaces 응용 프로그램에서 작업하고 있습니다. 나는 primefaces 대화 상자 뒤에 페이지를 방지하고 싶습니다. 대화 상자가 페이지 뒤에 차단되어 있지만 save 및 cancel 버튼이 제대로 작동하지 않는 사용자가 자동으로 응용 프로그램에서 로그 아웃 표시됩니다

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

: 나는이 코드를 시도했다. 당신의 도움이 필요합니다. 업데이트 : modal="true" appendTo="@(body)"이 없으면 올바르게 작동합니다 (save 및 cancel 버튼 모두).

Answer 1

이제 솔루션 수명을 확인할 수 없습니다 만, 다음이 의심스러운 : 당신이 (예를 들어, 파이어 폭스의 방화범을 통해) 렌더링 된 XHTML 코드를 검사 할 때, 양식 newResourceTypeForm 실제로 비어 있음을 인식 할 수

. appendTo="@body", I guess, the dialog panel is attached directly to the body` - 요소를 가지고 있으며이를 통해 어떤 형식적인 규칙도 벗어납니다. 이렇게하면 작업중인 단추를 막을 수 있습니다.

• 는 p:dialog로 양식을 이동하거나,
• 는 appendTo
• 당신이 앞으로 이동 한 경우에 도움이 될 수 있습니다 재 작성을 appendTo="@form"

희망 그 중 하나를 시도 포기하려고 - upvotes가 감사 - ...