Access to primefaces widgetvars on document ready

Question

Im trying to access to primefaces components on document ready like this:

$(function() {
  var showDialog = getUrlParameter("showDialog");
  if (showDialog == "true") {
    PF('myDialog').show();
  }
});

But in that moment the primefaces widgetvars are not available and I get the following error:

Widget for var 'myDialog' not available!

In PrimeFaces 6.2 and 7.0 (and maybe some earlier versions) the error you get is

TypeError: PF(...) is undefined

but when PrimeFaces.widgets['myDialog'].show() is used instead of PF('myDialog').show(); the error is comparable

TypeError: PrimeFaces.widgets.myDialog is undefined

When are the primefaces widgetvars ready to be accessed?

Answer 1

I had success with adding the javascript initialization code in the page AFTER the component with the widgetVar, ie

<p:dataTable widgetVar="test">

</p:dataTable>

<script  type="text/javascript">
  $(document).ready(function()  {
     PF('test'); // access and do whatever here
 }
</script> 

Putting the script tag before the p:dataTable doesn't work.

More info here: http://forum.primefaces.org/viewtopic.php?f=3&t=35718

Answer 2

I found a better solution for my case. I call a JavaScript method using the onload attribute of h:body

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

And this is the JavaScript method:

function checkIfShowDialog(){
  var showDialog = getUrlParameter("showDialog");
  if (showDialog == "true") {
    PF('myDialog').show();
  }
}

This works as desired.

Answer 3

Sometimes the widgetVar needs some time to get initialized (in document.ready), like (non-extensive)

• upload
• dialog
• overlay

in that case you can use setTimeOut

setTimeout(PF('myDialog').show(), 2000);

Hope this helps.

Answer 4

If you run into this error when usin a p:remoteCommand with autoRun="true", like this

<h:body>
    <h:form>
        <p:remoteCommand autoRun="true" name="actualizarSaldosCajero"
            onstart="PF('ajaxStatus').show();"
            action="#{plantillaGeneralMB.actualizarSaldosCajero}" />
    </h:form>

    <p:dialog widgetVar="ajaxStatus">
       Content
    </p:dialog>
</h:body>

You should place the p:remoteCommand code after the components that you reference in the onstart or in a function you call from there.

<h:body>
    <p:dialog widgetVar="ajaxStatus">
       Content
    </p:dialog>

    <h:form>
        <p:remoteCommand autoRun="true" name="actualizarSaldosCajero"
            onstart="PF('ajaxStatus').show();"
            action="#{plantillaGeneralMB.actualizarSaldosCajero}" />
    </h:form>

</h:body>

(Tried with PrimeFaces 6.2 and 7.0)