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 投票标签

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 refresh 与面板刷新进行分组会更简单、更清晰。

然而，一个快速的解决方案，几乎没有修改，可能适合你没有解释的约束，你可以从那里切换

<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 的相对位置，pour 可能必须调整要更新的组件的路径，或者可能只使用其中一个方便的 primefaces 函数 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/ 中没有看到更新属性，但你会在 p:commandButton http://www.primefaces.org/docs/vdl/3.5/primefaces-p/commandButton.html 中找到它

您应该阅读 PrimeFaces 文档中的“部分渲染”部分，以获得有关其工作原理的更详细说明（PrimeFaces 优秀用户指南http://www.primefaces.org/docs/guide/primefaces_user_guide_5_0.pdf 第 498 页第 4.1 节）。