javascript - change - noscript html
¿Cómo ejecutar JavaScript después de cargar la página? (6)
Hay dos formas que me funcionan cuando quiero ejecutar una función JS después de cargar la página en Primefaces:
- o use jQuery (como ya lo usa Primefaces), la mejor solución es anidar document.ready dos veces, de modo que mi código JS se ejecute después de todo el código de Primefaces:
-
jQuery(document).ready(function () { jQuery(document).ready(function () { // twice in document.ready to execute after Primefaces callbacks PathFinder.findAndGo(); }); });
-
- o use p: remoteCommand con ejecución automática, y coloque en él la devolución de llamada JS completa
- De esta manera, AJAX envía el formulario al servidor, pero no se ejecuta la escucha en el lado del servidor. Posteriormente se ejecuta una devolución de llamada JS.
-
<p:remoteCommand oncomplete=" PathFinder.findAndGo(); " autoRun="true"/>
Me gustaría ejecutar una función de JavaScript después de cargar la página. En este momento tengo un comando y todo funciona bien. Sin embargo, sería más cómodo si el usuario no debe presionar el botón.
He intentado f: event, pero no tengo un oyente, solo tengo la función de JavaScript. Además, la carga del cuerpo no funciona para mí, ya que solo uso componentes de alto nivel.
<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 función de JavaScript PathFinder.findAndGo se define en mi master.xhtml
Incluya (en la parte inferior de su página) la biblioteca jQuery dentro de su <ui:define name="content"> y luego use $(document).ready como de costumbre:
<ui:define name="content">
...
<!-- jQuery -->
<h:outputScript name="vendor/jquery/jquery.min.js"/>
<script>
$(document).ready(function(){
alert(1);
});
</script>
</ui:define>
Para primefaces he logrado usar con éxito lo siguiente:
He cargado en
<head>el archivo JS que contiene las funciones que necesitaba onLoad usando:< h:outputScript library="javascript" name="nameOfMyFile.js" target="head">He usado lo siguiente para ejecutar las funciones JS que necesitaba de "nameOfMyFile.js":
< h:body onload="nameOfMyFunction()" >Tenga en cuenta que mi archivo js también contenía el siguiente comando en la parte inferior:
$(document).ready(nameOfMyFunction());
El punto 3 es para ejecutar la función en onReady . Esto fue todo un experimento para ver si puedo agregar HTML a los eventos de programación ... ya que las cadenas que se pasan allí se analizan y se escapan las etiquetas html. Todavía tengo que descubrir por qué necesito tanto onReady como onLoad ... pero en este momento es la única forma en que funcionó para mí. Voy a actualizar si encuentro algo nuevo. Fue un exito.
Usa JQuery de la siguiente manera:
<script>
jQuery(document).ready(function() {
PathFinder.findAndGo();
});
</script>
Actualizar:
Debe estar dentro de <ui:define name="content"> .
Utilizando la segunda opción de OndrejM de una RemoteCommand pero dentro de un outputPanel configurado para cargar después de la carga de la página, agregando deferred="true" y deferredMode="load" :
<p:outputPanel deferred="true" deferredMode="load" rendered="#{...}">
<p:remoteCommand oncomplete="PathFinder.findAndGo();" autoRun="true" />
</p:outputPanel>
window.onload = function () {
// code to execute here
}