Question

说明

使用Primeface时，Servlet会呈现html页面。有时Servlet只生成html标签，但有时会生成javascript。

案例1

XHTML：

<h:outputText id="outputId" value="Hello!!!" />

生成：

<span id="outputId">Hello!!!</span>

在这种情况下，使用jQuery脚本添加addtional回调非常容易。 Beacouse已生成所有html元素。

案例2：

XHTML：

<p:schedule id="bigCalendarId" value="#{csController.lazyEventModel} view="month" />

此示例显示并非总是生成纯html。在这种情况下，生成javascipt：

<script id="formId:bigCalendarId_s" type="text/javascript">$(function(){PrimeFaces.cw('Schedule','widget_formId_bigCalendarId',{id:'formId:bigCalendarId',defaultView:'month',offset:3600000,header:{left:'prev,next today',center:'title',right:'month,agendaWeek,agendaDay'}},'schedule');});</script>

所以Primefaces使用一些脚本来完成初始化。构建DOM树时调用此函数。

问题：

Primafaces使用脚本来构建视图，但我想为生成的内容添加一些回调。问题是我的脚本必须在Primefaces生成的javascript完成后执行。怎么实现呢？如何在Primefaces之后执行我的脚本？

Answer 1

当我想在Primefaces页面加载后执行JS函数时，有两种方法对我有用：

使用jQuery（因为它已经被Primefaces使用），最好的解决方案是将document.ready嵌套两次，以便我的JS代码在所有Primefaces代码之后执行：
- jQuery(document).ready(function () { jQuery(document).ready(function () { // twice in document.ready to execute after Primefaces callbacks myInitialisationFunction(); }); });
或者使用p：remoteCommand和autorun，并在其上放置完整的JS回调
- 这种形式由AJAX提交给服务器，但没有在服务器端执行监听器，之后执行JS回调
- <p:remoteCommand oncomplete=" myInitialisationFunction(); " autoRun="true"/>

Answer 2

您没有指定要使用的PrimeFaces版本。但是，从PrimeFaces 7.0开始，没有 PrimeFaces准备就绪这样的事件。这是stated by tandraschko ，他是2019年的PrimeFaces核心开发人员。

他的建议是，在页面的末尾添加一个jQuery ready()处理程序，该处理程序应在之后 PrimeFaces中添加ready（）处理程序（初始化实际上执行相同的操作。

可以直接通过XHTML代码中的<script>或<h:outputScript>或使用OmniFaces的<o:onloadScript>组件直接在末尾添加ready（）处理程序XHTML中的任何位置，但将在结果HTML中重定位到末尾。这是一些示例代码：

<ui:composition xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:o="http://omnifaces.org/ui"
                xmlns:p="http://primefaces.org/ui">

  <o:onloadScript rendered="#{not faces.ajaxRequest}">
    $(function() {
      console.log('PrimeFaces now ready.');
    })
  </o:onloadScript>

  <!-- your JSF and PrimeFaces components go here... -->

</ui:composition>

我还尝试使用嵌套的ready（）处理程序尝试 OndroMih 的建议，

在Primefaces脚本完成后调用我的jQuery函数

2 个答案: