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
– RobG, Commented Jan 25, 2012 at 0:50

Bhesh Gurung · Accepted Answer · 2012-01-25 13:56:27Z

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, 2012 at 13:56

answered Jan 25, 2012 at 0:27

Bhesh Gurung

51.1k23 gold badges96 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

bennedich Over a year ago

jQuery for the only purpose of handling the onload event is not a good idea.

Bhesh Gurung Over a year ago

It's good in this case since he is using PrimeFaces which needs and loads jQuery itself.

steffan Over a year ago

I also put it somewhere... on my page but nothing was executed.

Ondro Mihályi · Accepted Answer · 2014-07-09 08:01:34Z

9

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

answered Jul 9, 2014 at 8:01

Ondro Mihályi

7,8401 gold badge31 silver badges47 bronze badges

1 Comment

Ondro Mihályi Over a year ago

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) + "'");

kinakuta · Accepted Answer · 2012-01-25 00:30:01Z

5

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

answered Jan 25, 2012 at 0:30

kinakuta

9,0371 gold badge41 silver badges48 bronze badges

1 Comment

steffan Over a year ago

doesn't work for me. I put it in script tags and placed it on different places in the side but nothing happened.

Martijn Pieters · Accepted Answer · 2012-05-29 09:02:55Z

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.

Kukeltje · Accepted Answer · 2018-07-23 21:11:41Z

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, 2018 at 21:11

Kukeltje

12.4k4 gold badges26 silver badges47 bronze badges

answered Jul 23, 2018 at 19:12

imalfabon

635 bronze badges

Comments

daniel · Accepted Answer · 2017-10-11 14:42:53Z

0

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>

answered Oct 11, 2017 at 14:42

daniel

311 silver badge6 bronze badges

Collectives™ on Stack Overflow

How to execute JavaScript after page load?

6 Answers 6

3 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related