jQuery not executing in Primefaces view?

Question

I want execute one little jQuery code if my Primefaces view is loaded. This is the code for the jQuery function:

<script type="text/javascript">
    jQuery(document).ready(function(){ 
        jQuery('#myButton').click();
    }) 
</script>

This is my hidden button for the referenced ID:

<p:commandButton id="myButton" actionListener="#{myController.myFunction()}" value="Bla bla" style="visibility: hidden;" ajax="false" />

This is how Primefaces includes jQuery:

<script type="text/javascript" src="/myapp/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces&amp;v=6.2"></script>

The jQuery code is generated, it's in the html source code, I can see it in the browser, but the click function is not executed, NetBeans breakpoint isn't activated (it's on the first line of the myFunction() ). What most important: I can't see any errors or relevant trace in the Chrome script console as well...

What am I missing here?

EDIT:

Chrome script console giving me this result if I enter "jQuery('myButton')":

I also edited my jQuery (I hope it's okay so...), because the id is generated, so it only included my referenced id:

<script type="text/javascript">
    jQuery(document).ready(function(){ 
        jQuery("input[id*='myButton']").each(function (i, el) {
            el.click();
        });
    }) 
</script>

Thank you.

EDIT2:

I changed my code as Melloware suggested, now my browser getting into infinte reload loop and I see following error in Chrome:

Edited jQuery:

<script type="text/javascript">
    jQuery(document).ready(function(){ 
        PF('myButton').jq.click();
    })
</script>

Edited Button html:

<p:commandButton id="hiddenButton" widgetVar="myButton" actionListener="#{myController.myFunction()}" value="Bla bla" style="visibility: hidden;" ajax="false" />

So you typed `jQuery('#myButton')` in the browser developer tool and saw an html element being returned — Kukeltje, Feb 05 '19 at 11:16
The console is returning me something... Screenshot will be edited into the question — VORiAND, Feb 05 '19 at 11:42

score 2 · Accepted Answer · answered Feb 05 '19 at 12:32

2

Do it the PrimeFaces way use a widgetVar...

<p:commandButton id="myButton" 
                 widgetVar="widgetMyButton" 
                 actionListener="#{myController.myFunction()}" 
                 value="Bla bla" style="visibility: hidden;" ajax="false" />

Then in your JavaScript...

<script type="text/javascript">
    jQuery(document).ready(function(){ 
        PF('widgetMyButton').jq.click();
    }) 
</script>

answered Feb 05 '19 at 12:32

Melloware

10,435
2
32
62

Edited question, inserted you code, sadly I'm getting infinite reload loop :( – VORiAND Feb 05 '19 at 14:52
Your getting an infinite loop because your button has ajax="false" which is refreshing the full page which is then executing the Document Ready again. change it to ajax="true". – Melloware Feb 05 '19 at 16:24
but without ajax=false, I can't export the report as .pdf (the function "prints" one report and exports it as .pdf file), it doesn't work sadly... – VORiAND Feb 05 '19 at 16:34
So then I will say you are approaching the whole problem the wrong way with your document onready click(). Your solution is then a "hack". What is the goal of what you are trying to do an accomplish that. – Melloware Feb 05 '19 at 17:41
I want to do the “close report” and the “print” with one click. After the “close report” the user is redirected to the report list. The jQuery is in the report list view, where the myFunction is checking if there is a new report to be printed, if yes the pdf export will start. I don’t know any other way to do this. – VORiAND Feb 05 '19 at 18:05

jQuery not executing in Primefaces view?

1 Answers1