How to execute JavaScript after page load?

Question

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

If your script is in the head and the button is in the page, the script will always be loaded before the element appears. However, if the script requires certain elements to be in the page and the user can click the button before they are loaded, you might conisder disabling the button (or take some other action) until they are available. — RobG, Jan 25 '12 at 00:50

Bhesh Gurung · Accepted Answer · 2012-01-25T13:56:27.417

30

Use JQuery as follows:

<script>
    jQuery(document).ready(function() {
        PathFinder.findAndGo();
    });
</script>

Update:

It has to be within <ui:define name="content">.

edited Jan 25 '12 at 13:56

answered Jan 25 '12 at 00:27

Bhesh Gurung

50,430
22
93
142

2

jQuery for the only purpose of handling the `onload` event is not a good idea. – bennedich Jan 25 '12 at 00:32
2

It's good in this case since he is using PrimeFaces which needs and loads jQuery itself. – Bhesh Gurung Jan 25 '12 at 00:33
I also put it somewhere... on my page but nothing was executed. – steffan Jan 25 '12 at 12:42

score 9 · Answer 2 · answered Jul 09 '14 at 08:01

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

There is also an option to instruct Primefaces to execute JS from Java code in controller, but I'm not sure if this is executed after page loads. I used this option once in AJAX action, when I could not instruct Primefaces to update page title after AJAX: `org.primefaces.context.RequestContext.getCurrentInstance().execute("document.title='" + StringEscapeUtils.escapeEcmaScript(pageTitle) + "'");` — OndroMih, Jul 09 '14 at 08:05

score 5 · Answer 3 · answered Jan 25 '12 at 00:30

5

window.onload = function () {
  // code to execute here
}

answered Jan 25 '12 at 00:30

kinakuta

9,029
1
39
48

doesn't work for me. I put it in script tags and placed it on different places in the side but nothing happened. – steffan Jan 25 '12 at 12:41

score 3 · Answer 4 · edited May 29 '12 at 09:02

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.

score 3 · Answer 5 · edited Jul 23 '18 at 21:11

3

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>

edited Jul 23 '18 at 21:11

Kukeltje

12,223
4
24
47

answered Jul 23 '18 at 19:12

imalfabon

53
4

score 0 · Answer 6 · answered Oct 11 '17 at 14:42

Include (at the bottom of your page) jQuery library within your <ui:define name="content"> and then use $(document).ready as usual:

<ui:define name="content">
...
<!-- jQuery -->
<h:outputScript name="vendor/jquery/jquery.min.js"/>
<script>
  $(document).ready(function(){
      alert(1);
  });
</script>
</ui:define>

How to execute JavaScript after page load?

6 Answers6

Linked