web-dev-qa-db-fra.com

Comment exécuter JavaScript après le chargement de la page?

Je voudrais exécuter une fonction JavaScript après le chargement de la page. Pour le moment, j'ai un bouton de commande et tout fonctionne bien. Cependant, il serait plus confortable si l'utilisateur n'est pas censé appuyer sur le bouton.

J'ai essayé f: event, mais je n'ai pas d'auditeur, je n'ai que la fonction JavaScript. De plus, body onload ne fonctionne pas pour moi car je n'utilise que des composants de haut niveau.

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

La fonction JavaScript PathFinder.findAndGo est définie dans mon master.xhtml

javascriptjsf-2primefacesonload
17
steffan

Utilisez JQuery comme suit: 

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

Mettre à jour:

Il doit être dans <ui:define name="content">.

23
Bhesh Gurung
window.onload = function () {
  // code to execute here
}
4
kinakuta

Pour les primefaces, j'ai réussi à utiliser les éléments suivants:

  1. J'ai chargé dans <head> le fichier JS contenant les fonctions dont j'avais besoin onLoad en utilisant:

    < h:outputScript library="javascript" name="nameOfMyFile.js" target="head">

  2. J'ai utilisé ce qui suit pour exécuter les fonctions JS dont j'avais besoin à partir de "nameOfMyFile.js":

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

  3. Veuillez noter que mon fichier js contenait également la commande suivante en bas:

    $(document).ready(nameOfMyFunction());

Le 3ème point sert à exécuter la fonction onReady. C'était une expérience pour voir si je pouvais ajouter du HTML aux événements de planification ... car les chaînes transmises y sont analysées et les balises HTML échappées. Je n'ai pas encore compris pourquoi j'avais besoin de onReady et onLoad.... mais pour l'instant, c'est la seule façon dont cela a fonctionné pour moi. Je mettrai à jour si je trouve quelque chose de nouveau . C'était réussi.

3
Mau

Utilisation de OndrejM second option d’un remoteCommand mais dans un outputPanel configuré pour être chargé après le chargement de la page en ajoutant deferred="true" et deferredMode="load":

<p:outputPanel deferred="true" deferredMode="load" rendered="#{...}"> 
     <p:remoteCommand oncomplete="PathFinder.findAndGo();" autoRun="true" />
</p:outputPanel>
1
imalfabon

Incluez (au bas de votre page) jQuery library dans votre <ui:define name="content"> et utilisez ensuite $(document).ready comme d'habitude:

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

0
daniel