2012-01-25 203 views
17

Me gustaría ejecutar una función de JavaScript después de cargar la página. Por el momento tengo CommandButton y todo funciona bien. Sin embargo, sería más cómodo si se supone que el usuario no presiona el botón.¿Cómo se ejecuta JavaScript después de cargar la página?

He intentado f: evento, pero no tengo un oyente, solo tengo la función de JavaScript. Además, la carga corporal no funciona, 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> 

El PathFinder.findAndGo función de JavaScript se define en mi master.xhtml

+0

sería más bien querer hacerlo en lista en lugar de onload ? –

+0

Si su secuencia de comandos está en la cabeza y el botón está en la página, la secuencia de comandos siempre se cargará antes de que aparezca el elemento. Sin embargo, si el script requiere que ciertos elementos estén en la página y el usuario puede hacer clic en el botón antes de que se carguen, es posible que desee inhabilitar el botón (o realizar alguna otra acción) hasta que estén disponibles. – RobG

+0

usa remoteCommand con autorun verdadero. – meyquel

Respuesta

23

usar jQuery de la siguiente manera:

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

Actualización:

Tiene que ser dentro de <ui:define name="content">.

+0

¿Qué tiene de malo? ¿Por qué downvote? –

+2

jQuery con el único propósito de manejar el evento 'onload' no es una buena idea. – bennedich

+2

Es bueno en este caso ya que está utilizando PrimeFaces que necesita y carga jQuery. –

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

no funciona para mí. Lo puse en etiquetas de guiones y lo coloqué en diferentes lugares en el costado, pero no pasó nada. – steffan

3

Para PrimeFaces he sabido utilizar con éxito los siguientes:

  1. he cargado en <head> el archivo JS que contiene las funciones que necesitaba onLoad mediante el uso de:

    < h:outputScript library="javascript" name="nameOfMyFile.js" target="head"> 
    
  2. He utilizado lo siguiente para ejecutar las funciones de JS que necesitaba de "nameOfMyFile.js":

    < h:body onload="nameOfMyFunction()" > 
    
  3. Tenga en cuenta que mi archivo js también contenía el siguiente comando en la parte inferior:

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

El punto es 3'rd para ejecutar la función onReady. Esto fue todo un experimento para ver si puedo agregar HTML a los eventos del cronograma ... a medida que las cadenas pasadas se analizan y las etiquetas html escapan. Aún no entiendo por qué necesito tanto onReady como onLoad .... pero por el momento es la única forma en que funcionó para mí. Actualizaré si encuentro algo nuevo. Fue un éxito.

6

Hay 2 maneras que trabajan para mí, cuando quiero ejecutar una función JS después de carga de la página en Primefaces:

  • o bien usar jQuery (como ya es utilizado por Primefaces), la mejor solución es documento nidodispuestos en dos ocasiones, por lo que mi código JS se ejecuta después de que todo el código Primefaces:
    • jQuery(document).ready(function() { jQuery(document).ready(function() { // twice in document.ready to execute after Primefaces callbacks PathFinder.findAndGo(); }); });
  • o utilizar t: remoteCommand con la ejecución automática, y el lugar onComplete JS devolución de llamada en él
    • esta forma forma en que se presentó por AJAX al servidor, pero no escucha ejecutado el lado del servidor, una devolución de llamada se ejecuta después JS
    • <p:remoteCommand oncomplete=" PathFinder.findAndGo(); " autoRun="true"/>
+2

También hay una opción para indicar a Primefaces que ejecute JS desde el código de Java en el controlador, pero no estoy seguro de si esto se ejecuta después de cargar la página. Utilicé esta opción una vez en acción AJAX, cuando no pude ordenar a Primefaces que actualizara el título de la página después de AJAX: 'org.primefaces.context.RequestContext.getCurrentInstance(). Execute (" document.title = '"+ StringEscapeUtils.escapeEcmaScript (pageTitle) + "'"); ' – OndrejM

0

incluyen (en la parte inferior de la página) jQuery biblioteca dentro de su <ui:define name="content"> y luego usar $(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>

Cuestiones relacionadas