web-dev-qa-db-ger.com

Wie führe ich JavaScript nach dem Laden der Seite aus?

Ich möchte eine JavaScript-Funktion ausführen, nachdem die Seite geladen wurde. Im Moment habe ich eine Befehlsschaltfläche und alles funktioniert gut. Es wäre jedoch angenehmer, wenn der Benutzer den Knopf nicht drücken soll.

Ich habe f: event ausprobiert, aber ich habe keinen Listener, ich habe nur die JavaScript-Funktion. Body Onload funktioniert für mich nicht, da ich nur Komponenten auf hohem Niveau verwende.

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

Die JavaScript-Funktion PathFinder.findAndGo ist in meiner master.xhtml definiert

javascriptjsf-2primefacesonload
17
steffan

Verwenden Sie JQuery wie folgt: 

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

Aktualisieren:

Es muss sich innerhalb von <ui:define name="content"> befinden.

23
Bhesh Gurung

Es gibt zwei Möglichkeiten, die für mich funktionieren, wenn ich nach dem Laden einer Seite in Primefaces eine JS-Funktion ausführen möchte:

  • verwenden Sie entweder jQuery (wie es bereits von Primefaces verwendet wird). Die beste Lösung besteht darin, document.ready zweimal zu verschachteln, sodass mein JS-Code nach allem Primefaces-Code ausgeführt wird:
    • jQuery(document).ready(function () { jQuery(document).ready(function () { // twice in document.ready to execute after Primefaces callbacks PathFinder.findAndGo(); }); });
  • oder benutze p: remoteCommand mit autorun und platziere einen vollständigen JS Callback darauf
    • auf diese Weise wird das Formular von AJAX an den Server gesendet, aber kein Listener auf der Serverseite ausgeführt. Anschließend wird ein JS-Callback ausgeführt
    • <p:remoteCommand oncomplete=" PathFinder.findAndGo(); " autoRun="true"/>
9
OndroMih
window.onload = function () {
  // code to execute here
}
4
kinakuta

Für Primefaces habe ich erfolgreich Folgendes verwendet:

  1. Ich habe in <head> die JS-Datei geladen, die die Funktionen enthält, die ich onLoad benötige.

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

  2. Ich habe Folgendes verwendet, um die von "nameOfMyFile.js" benötigten JS-Funktionen auszuführen:

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

  3. Bitte beachten Sie, dass meine js-Datei unten den folgenden Befehl enthielt:

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

Der 3. Punkt ist für die Ausführung der Funktion onReady. Dies war alles ein Experiment, um zu sehen, ob ich den Zeitplanereignissen HTML hinzufügen kann ... Wenn die übergebenen Zeichenfolgen dort analysiert werden, werden sie analysiert und HTML-Tags mit Escape-Zeichen versehen. Ich habe noch nicht herausgefunden, warum ich sowohl onReady als auch onLoad.... brauche, aber im Moment hat es für mich nur so funktioniert. Ich werde ein Update machen, wenn ich etwas Neues finde ... es war erfolgreich.

3
Mau

Verwenden der Option OndrejM second eines remoteCommand , jedoch innerhalb eines outputPanel , das so konfiguriert ist, dass es nach dem Laden der Seite durch Hinzufügen von deferred="true" und deferredMode="load" geladen wird:

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

Fügen Sie (am Ende Ihrer Seite) jQuery library in Ihren <ui:define name="content"> ein und verwenden Sie $(document).ready wie üblich:

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

0
daniel