Comment faire pour exécuter un code JavaScript après le chargement de la page?
Je voudrais exécuter une fonction JavaScript après que la page a été chargée. Pour le moment j'ai un bouton de commande et tout fonctionne bien. Cependant, il serait plus à l'aise si l'utilisateur n'est pas censé frapper le bouton.
J'ai essayé de f:événement, mais je n'ai pas de port d'écoute, je n'ai que la fonction JavaScript. En outre body onload ne fonctionne pas pour moi car je n'utilise que des composants de 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
- préférez-vous voulez le faire sur prêt au lieu de onload?
- Si votre script est dans la tête et que le bouton est dans la page, le script va toujours être chargé avant de l'élément s'affiche. Cependant, si le scénario l'exige, certains éléments pour être à la page et l'utilisateur peut cliquer sur le bouton avant de les charger, vous pourriez conisder la désactivation de la touche (ou à prendre d'autres mesures) jusqu'à ce qu'ils sont disponibles.
- utilisation remoteCommand avec autorun vrai.
Vous devez vous connecter pour publier un commentaire.
Utiliser JQuery comme suit:
Mise à jour:
Il doit être à l'intérieur de
<ui:define name="content">
.onload
événement n'est pas une bonne idée.Il y a 2 façons de travailler pour moi, quand je veux exécuter une fonction JS après le chargement de la page en Primefaces:
jQuery(document).ready(function () {
jQuery(document).ready(function () {
//twice in document.ready to execute after Primefaces callbacks
PathFinder.findAndGo();
});
});
<p:remoteCommand oncomplete=" PathFinder.findAndGo(); " autoRun="true"/>
org.primefaces.context.RequestContext.getCurrentInstance().execute("document.title='" + StringEscapeUtils.escapeEcmaScript(pageTitle) + "'");
Pour primefaces j'ai réussi à utiliser les éléments suivants:
J'ai chargé dans
<head>
la JS fichier contenant les fonctions dont j'ai besoin onLoad en utilisant:J'ai utilisé les éléments suivants dans l'ordre d'exécuter les fonctions JS j'avais besoin de "nameOfMyFile.js":
Veuillez noter que mon fichier js contenait aussi la commande suivante en bas:
Le 3'rd point est pour l'exécution de la fonction
onReady
. Ce fut toute une expérience pour voir si je peux ajouter du code HTML à la planification des événements ... comme les cordes y sont passés sont analysées et les balises html échappé. Je n'ai pas encore de comprendre pourquoi j'ai besoin des deuxonReady
etonLoad
.... mais pour le moment c'est la seule façon dont il a travaillé pour moi. Je mettrai à jour si je trouve quelque chose de nouveau.Il a réussi.
À l'aide de OndrejM deuxième option d'un remoteCommand mais à l'intérieur d'un outputPanel configuré pour charger après le chargement de la page en ajoutant
deferred="true"
etdeferredMode="load"
:Inclure (au bas de votre page) jQuery bibliothèque au sein de votre
<ui:define name="content">
et ensuite utiliser$(document).ready
comme d'habitude:JS: