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

Posted 2021-05-04

描述：

当使用Primefaces时，由Servlet呈现html页面。有时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。在这种情况下生成javascript：

<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之后执行我的脚本？

答案

当我想在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，并在其上放置完整的JS回调 这种方式表单由AJAX提交给服务器，但没有在服务器端执行监听器，之后执行JS回调 <p:remoteCommand oncomplete=" myInitialisationFunction(); " autoRun="true"/>

另一答案

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

他的建议是，在页面末尾添加一个jQuery ready()处理程序，它应该在PrimeFaces之后添加ready（）处理程序（实际上它对初始化做了同样的事情）。

最后添加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（）处理程序的建议，这看起来也很有用。