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

【问题标题】：call my jQuery function after Primefaces script is finishedPrimefaces脚本完成后调用我的jQuery函数
【发布时间】：2014-01-21 09:47:10
【问题描述】：

说明：

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

案例 1

XHTML:

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

生成：

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

在这种情况下，很容易使用 jQuery 脚本添加额外的回调。因为所有的 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 之后执行我的脚本？

【问题讨论】：

标签： javascript jquery jsf-2 primefaces

【解决方案1】：

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

要么使用 jQuery（因为它已经被 Primefaces 使用），最好的解决方案是嵌套 document.ready 两次，以便在所有 Primefaces 代码之后执行我的 JS 代码：
- jQuery(document).ready(function () { jQuery(document).ready(function () { // twice in document.ready to execute after Primefaces callbacks myInitialisationFunction(); }); });
或使用 p:remoteCommand 与自动运行，并在其上放置 oncomplete JS 回调
- 这种方式表单是通过AJAX提交给服务器，但是服务器端没有执行任何监听，之后会执行一个JS回调
- <p:remoteCommand oncomplete=" myInitialisationFunction(); " autoRun="true"/>

【讨论】：

【解决方案2】：

您没有指定您使用的 PrimeFaces 版本。然而，从 PrimeFaces 7.0 开始，没有像 PrimeFaces 准备就绪这样的事件。这是stated bytandraschko，2019 年的 PrimeFaces 核心开发人员。

他的建议是，在页面的末尾添加一个jQuery ready()-handler，它应该添加 ready()-handler after PrimeFaces（实际上对初始化做同样的事情）。

最后添加一个 ready() 处理程序可以直接通过 XHTML 代码中的 <script> 或 <h:outputScript> 完成，或者使用 OmniFaces 的 <o:onloadScript> 组件来完成，该组件可以放置在 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>

我还尝试了 OndroMih 的建议，使用嵌套的 ready() 处理程序，这似乎也有效。

【讨论】：