CODEWITHSUNDEEP
javascriptjsf-2primefacesonload
steffan
steffan

Reputation: 619

How to execute JavaScript after page load?

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

Upvotes: 20

Views: 64036

Answers (6)

imalfabon
imalfabon

Reputation: 53

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>

Upvotes: 3

daniel
daniel

Reputation: 31

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>

Upvotes: 0

Ondro Mih&#225;lyi
Ondro Mih&#225;lyi

Reputation: 7710

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

Upvotes: 9

Mau
Mau

Reputation: 31

For primefaces I have managed to successfully use the following:

  1. 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">

  2. I have used the following in order to run the JS functions I needed from "nameOfMyFile.js":

    < h:body onload="nameOfMyFunction()" >

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

Upvotes: 3

Bhesh Gurung
Bhesh Gurung

Reputation: 51030

Use JQuery as follows: 

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

Update:

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

Upvotes: 30

kinakuta
kinakuta

Reputation: 9037

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

Upvotes: 5

Related Questions