Question

我使用了p：layoutUnit来设置左边的菜单和右边的主页面。这个工作正常，直到我添加一个p：对话框。现在，当我选择库存菜单项时，整个页面将刷新，而不仅仅是主页面。我意识到p：对话框适用于整个页面，因为它是模态的，所以我想知道实现它的正确方法是什么，以避免整个页面刷新？

这是我的布局：

Index2.xhtml：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en"
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://xmlns.jcp.org/jsf/html"
  xmlns:f="http://xmlns.jcp.org/jsf/core"
  xmlns:p="http://primefaces.org/ui"
  xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>   
    <title>Index2</title>   
 </h:head>
<h:body>

<p:layout style="min-width:400px;min-height:700px;">
<p:layoutUnit position="west" resizable="false" size="300" minSize="40" maxSize="200">
    <h:form>   
    <p:menu>
        <p:submenu label="Menu">
            <p:menuitem value="Stocks" outcome="stocks" />
            <p:menuitem value="Portfolio" outcome="portfolio"/>
        </p:submenu>
    </p:menu>
</h:form>
</p:layoutUnit>

<p:layoutUnit position="center">
    <h3 style="margin-top:0">Plain Menu</h3>
    <ui:insert name="source" />
</p:layoutUnit>
</p:layout>

</h:body>
</html>

Stocks.xhtml：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      template="index2.xhtml">
    <ui:define name="source">

            <script type="text/javascript">

                function handleMessage(data) 
                {   
                    if(data == 'price')
                    {                   
                        updateWidget();
                        console.log("stocks: data is price");
                    }

                }

                function onError(){
                    console.log("on error");
                }

                function onStart(){
                    console.log("on start");
                }

                function onComplete(){
                    console.log("on complete");
                }

                function onSuccess(){
                    console.log("on success");
                }
        </script>

        <h:form id="form">
            <p:dataGrid id="prices" var="orderBooks" value="#{stocksView.latestPricesResults}" columns="3" rows="12">
                    <f:facet name="header">
                        WST 100
                    </f:facet>
                    <p:column>
                    <p:panel header="#{orderBooks.bidOrderId.member.memberId}">
                <h:panelGrid columns="1">
                <h:outputText value="#{orderBooks.price}" />
                <h:outputText value="#{orderBooks.bidOrderId.member.party}" />
                <h:outputText value="#{orderBooks.lastUpdate}" />
                <p:commandLink update=":form:buyDetail" oncomplete="PF('buyDialog').show()" title="View Detail">
                    <h:outputText value="Buy"/>
                    <f:setPropertyActionListener value="#{orderBooks}" target="#{stocksView.selectedStock}" />
                </p:commandLink>
                </h:panelGrid>
                </p:panel>
                </p:column>
                </p:dataGrid>

                <p:dialog header="Buy Shares" widgetVar="buyDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false" appendTo="@(body)">
                    <p:outputPanel id="buyDetail" style="text-align:center;">
                        <p:panelGrid  columns="2" columnClasses="label,value">
                        <h:outputText value="Member" />
                        <h:outputText value="#{stocksView.selectedStock.bidOrderId.member.memberId}" />
                        </p:panelGrid>
                    </p:outputPanel>
                </p:dialog>

                <p:remoteCommand name="updateWidget"
                 actionListener="#{stocksView.findLatestPrices}"
                 autoRun="true"
                 update="prices"
                 onstart="onStart()"
                 oncomplete="onComplete()"
                 onsuccess="onSuccess()"
                 onerror="onError()">
                 </p:remoteCommand>
        </h:form>

        <p:socket onMessage="handleMessage" channel="/notify" />

    </ui:define>

    </ui:composition>

使用p：layoutunit时，防止p：dialog刷新整个页面

0 个答案: