jsf - primefaces 对话内容在页面开头

Question

下面是xhtml页面的代码，

即使我将对话框放入表单中，我也可以在页面下方看到输出文本。

我第一次遇到这种情况。

<h:form id="form">
    <h:outputLabel value="Welcome #{loginBean.name}"></h:outputLabel>
    <p:dataTable id="cars" var="book" value="#{indexView.mediumBooksModel}" paginator="true" rows="10"  
             selection="#{indexView.selectedBook}" rowKey="">  

    <f:facet name="header">  
        RadioButton Based Selection  
    </f:facet>  

    <p:column selectionMode="single" style="width:2%" />  

    <p:column headerText="Title" style="width:25%">  
        #{book.title}  
    </p:column>  

    <p:column headerText="ISBN" style="width:25%">  
        #{book.isbn}  
    </p:column>  

    <p:column headerText="Year" style="width:24%">  
        #{book.year}  
    </p:column>  

    <p:column headerText="Price" style="width:24%">  
        #{book.price}  
    </p:column>  

    <f:facet name="footer">  
        <p:commandButton id="viewButton" value="View" icon="ui-icon-search"  
                         update=":displaySingle" oncomplete="singleBookDialog.show()"/>  
    </f:facet>  
</p:dataTable> 

</h:form> 


<p:dialog id="dialog" header="Book Detail" widgetVar="singleBookDialog" resizable="false"  
         modal="true" >  

    <h:panelGrid id="displaySingle" columns="2" cellpadding="4">  

        <f:facet name="header">  
            <p:graphicImage value="/images/books/#{indexView.selectedBook.image}.jpg"/>  
        </f:facet>  

        <h:outputText value="Title:" />  
        <h:outputText value="#{indexView.selectedBook.title}" style="font-weight:bold"/>  

        <h:outputText value="Year:" />  
        <h:outputText value="#{indexView.selectedBook.year}" style="font-weight:bold"/>  

        <h:outputText value="ISBN:" />  
        <h:outputText value="#{indexView.selectedBook.isbn}" style="font-weight:bold"/>  

        <h:outputText value="Price:" />  
        <h:outputText value="#{indexView.selectedBook.price}" style="font-weight:bold"/>  
    </h:panelGrid>  
</p:dialog>