JSF Javascript調用Primefaces組件

Question

嗨，我想從java腳本函數中定期調用back bean，我想刷新頁面的面板而不是整個頁面，這就是我用腳本編寫的內容

$('#submitbutton').click();

<h:commandButton id="submitbutton" immediate="true" value="" styleClass="ui-day" style="border:0;display : none;" 
                            action="#{liveGraphBean.plotInterval1('daily')}" >  

而不是刷新，我只想刷新頁面的面板

<p:panel id="dailyGraphPanel">
                    <div id="chartdiv" style="width: 100%; height: 400px;"></div>
                </p:panel>

所以我該怎么做謝謝

Answer 1

您可以使用Primeface Poll標簽

http://www.primefaces.org/showcase/ui/ajax/poll.xhtml

http://www.primefaces.org/showcase/ui/ajax/remoteCommand.xhtml

<h:commandButton id="submitbutton" immediate="true" value="Submit" styleClass="ui-day" style="border:0;display : none;" action="#{liveGraphBean.plotInterval1('daily')}">
    <f:ajax render="dailyGraphPanel" execute="@this"/>
</h:commandButton>

要么

<p:commandButton id="submitbutton" immediate="true" value="Submit" styleClass="ui-day" style="border:0;display : none;" action="#{liveGraphBean.plotInterval1('daily')}" update="dailyGraphPanel" process="@this" />

<h:panelGroup id="dailyGraphPanel">
  <div id="chartdiv" style="width: 100%; height: 400px;"></div>
</h:panelGroup>

Answer 2

我也建議您使用http://www.primefaces.org/showcase/ui/ajax/poll.xhtml

恕我直言，將圖表組件#chartdiv刷新與面板刷新分組在一起會更加簡單和整潔。

但是，一種快速的解決方案，只需很少的修改，也許您沒有說明合適的約束，您可能會從

<h:commandButton id="submitbutton" immediate="true" value="" styleClass="ui-day" style="border:0;display : none;" action="#{liveGraphBean.plotInterval1('daily')}" >

至

<p:commandButton id="submitbutton" immediate="true" value="" styleClass="ui-day" style="border:0;display : none;" action="#{liveGraphBean.plotInterval1('daily')}" update="dailyGraphPanel">

根據p：commandButton和p：panel的相對位置，傾倒可能不得不調整要更新的組件的路徑，或者可能只是使用那些方便的素數函數之一p：component

<p:commandButton id="submitbutton" immediate="true" value="" styleClass="ui-day" style="border:0;display : none;" action="#{liveGraphBean.plotInterval1('daily')}" update="#{p:component}">

我在h：commandButton doc http://docs.oracle.com/javaee/6/javaserverfaces/2.0/docs/pdldocs/facelets/中看不到update屬性，但是您會在p：commandButton http：// www中找到它.primefaces.org /文檔/ VDL / 3.5 / primefaces-p / commandButton.html

您應該閱讀PrimeFaces文檔中的“部分渲染”部分，以獲取有關其工作原理的更詳細說明（PrimeFaces優秀用戶指南http://www.primefaces.org/docs/guide/primefaces_user_guide_5_0.pdf的第498頁第4.1節） 。