call my jQuery function after Primefaces script is finished

Question

Description:

When using Primefaces html page is rendered by Servlet. Sometimes Servlet generates only html tags, but sometimes generates javascript.

Case 1

XHTML:

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

Generated:

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

In this case it is very easy to add addtional callback using jQuery script. Beacouse all html elements are already generated.

Case 2:

XHTML:

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

This example shows that not always pure html is generated. In this case javascipt is generated:

<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>

So Primefaces use some script to finish initialization. This function is called when DOM tree is built.

Question:

Primafaces uses script to build view, but I would like to add some calbacks to generated content. Problem is that my script has to be executed after javascript generated by Primefaces is finished. How to achieve that? How to execute my script after Primefaces?

Answer 1

There are 2 ways that work for me, when I want to execute a JS function after page load in Primefaces:

• either use jQuery (as it is already used by Primefaces), best solution is to nest document.ready twice, so that my JS code is executed after all Primefaces code:
  • jQuery(document).ready(function () { jQuery(document).ready(function () { // twice in document.ready to execute after Primefaces callbacks myInitialisationFunction(); }); });
• or use p:remoteCommand with autorun, and place oncomplete JS callback on it
  • this way form is submitted by AJAX to server but no listener executed on server side, a JS callback is executed afterwards
  • <p:remoteCommand oncomplete=" myInitialisationFunction(); " autoRun="true"/>

Answer 2

You didn't specify the PrimeFaces version you are using. However, as of PrimeFaces 7.0 there is no such event as PrimeFaces is ready . This was stated by tandraschko , a PrimeFaces core developer in 2019.

His suggestion was, to add a jQuery ready() -handler at the end of your page, which should add the ready()-handler after PrimeFaces (which actually does the same thing for initialization).

Adding a ready()-handler at the end could be done directly via <script> or <h:outputScript> in your XHTML code, or by using OmniFaces' <o:onloadScript> component, which could be placed anywhere in XHTML but will be relocated to the end in the resulting HTML. Here is some example code:

<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>

I also tried the suggestion from OndroMih with nested ready()-handlers, which seems to work as well.