How to execute JavaScript after page load?
Solution 1
Use JQuery as follows:
<script>
jQuery(document).ready(function() {
PathFinder.findAndGo();
});
</script>
Update:
It has to be within <ui:define name="content">
.
Solution 2
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 PathFinder.findAndGo(); }); });
- 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=" PathFinder.findAndGo(); " autoRun="true"/>
Solution 3
window.onload = function () {
// code to execute here
}
Solution 4
Using OndrejM second option of a remoteCommand but inside an outputPanel configured to load after the page load by adding deferred="true"
and deferredMode="load"
:
<p:outputPanel deferred="true" deferredMode="load" rendered="#{...}">
<p:remoteCommand oncomplete="PathFinder.findAndGo();" autoRun="true" />
</p:outputPanel>
Solution 5
For primefaces I have managed to successfully use the following:
I have loaded in
<head>
the JS file containing the functions I needed onLoad by using:< h:outputScript library="javascript" name="nameOfMyFile.js" target="head">
I have used the following in order to run the JS functions I needed from "nameOfMyFile.js":
< h:body onload="nameOfMyFunction()" >
Please note that my js file also contained the following command at the bottom:
$(document).ready(nameOfMyFunction());
The 3'rd point is for running the function onReady
. This was all an experiment to see if I can add HTML to the schedule events ... as the strings passed there are parsed and html tags escaped. I have yet to figure out why I need both onReady
and onLoad
.... but at the moment it's the only way it worked for me. I will update if I find anything new.
It was successful.
steffan
Updated on July 09, 2022Comments
-
steffan almost 2 years
I would like to execute a JavaScript function after the page was loaded. At the moment I have a commandButton and everything works fine. However it would be more comfortable if the user is not supposed to hit the button.
I have tried f:event, but I do not have a listener, I have only the JavaScript function. Moreover body onload does not work for me as I use only high level components.
<f:view xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:pm="http://primefaces.org/mobile" contentType="text/html"> <ui:composition template="/resources/master.xhtml"> <ui:define name="content"> <pm:content> <h:inputHidden id="address" value="#{pathFinderBean.address}" /> <div id="map" style="width: 100%; height: 285px;"></div> <p:commandButton type="button" value="Route" onclick="PathFinder.findAndGo()"/> <div id="route"></div> </pm:content> </ui:define> </ui:composition>
The JavaScript function PathFinder.findAndGo is defined in my master.xhtml