发表新帖
发表新帖

How to execute JavaScript after page load?

前端 未结
关注
6 845
我寻月下人不归
我寻月下人不归 2020-12-10 11:23

I would like to execute a JavaScript function after the page was loaded. At the moment I have a commandButton and everything works fine. However it would be more comfortable

相关标签:
6条回答
  • 臣服心动
    2020-12-10 11:38

    For primefaces I have managed to successfully use the following:

    1. I have loaded in <head> the JS file containing the functions I needed onLoad by using:

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

    2. I have used the following in order to run the JS functions I needed from "nameOfMyFile.js":

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

    3. Please note that my js file also contained the following command at the bottom:

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

    The 3'rd point is for running the function onReady. This was all an experiment to see if I can add HTML to the schedule events ... as the strings passed there are parsed and html tags escaped. I have yet to figure out why I need both onReady and onLoad.... but at the moment it's the only way it worked for me. I will update if I find anything new. It was successful.

    0 讨论(0)
  • 攒了一身酷
    2020-12-10 11:38

    Using OndrejM second option of a remoteCommand but inside an outputPanel configured to load after the page load by adding deferred="true" and deferredMode="load":

    <p:outputPanel deferred="true" deferredMode="load" rendered="#{...}"> 
     <p:remoteCommand oncomplete="PathFinder.findAndGo();" autoRun="true" />
</p:outputPanel>
    0 讨论(0)
  • 一整个雨季
    2020-12-10 11:38

    Include (at the bottom of your page) jQuery library within your <ui:define name="content"> and then use $(document).ready as usual:

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

    0 讨论(0)
  • 逝去的感伤
    2020-12-10 11:40

    Use JQuery as follows: 

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

    Update:

    It has to be within <ui:define name="content">.

    0 讨论(0)
  • 感情败类
    2020-12-10 11:40

    There are 2 ways that work for me, when I want to execute a JS function after page load in Primefaces:

    • either use jQuery (as it is already used by Primefaces), best solution is to nest document.ready twice, so that my JS code is executed after all Primefaces code:
      • jQuery(document).ready(function () { jQuery(document).ready(function () { // twice in document.ready to execute after Primefaces callbacks PathFinder.findAndGo(); }); });
    • or use p:remoteCommand with autorun, and place oncomplete JS callback on it
      • this way form is submitted by AJAX to server but no listener executed on server side, a JS callback is executed afterwards
      • <p:remoteCommand oncomplete=" PathFinder.findAndGo(); " autoRun="true"/>
    0 讨论(0)
  • 感情败类
    2020-12-10 11:52 
    window.onload = function () {
  // code to execute here
}
    0 讨论(0)
 看不清?
提交回复
热议问题