How to load a jQuery function when loading a page that uses JSF and Primefaces

Question

I am using a function to check if all checkbox are marked to load a registered already filled.

So I wanted to know how to call the function.

function selectAllCheckbox() {

  var booleanArray = new Array();
  var allCheckBox = $('input[id*="ufs"]');

  $(allCheckBox).each(function() {
      if ($(this).prop('checked') == true) {
          booleanArray.push($(this).prop('checked'));                 
      }
  });

  if (booleanArray.length == 27) {
      allCheckBox.last().prop('checked', true);
  }
}

In this I check if all checkboxes are filled, if yes, I mark the checkbox all.

<p:selectManyCheckbox id="ufs" value="#{lojaBean.pojo.ufsInss}" layout="grid" columns="4" styleClass="columnLeft">
    <f:selectItems value="#{lojaBean.helper.estados}"/>
    <f:selectItem itemLabel="Todos" itemValue=""/>
    <p:ajax event="change" onstart="selectAll(event)" update="ufs"/> 
</p:selectManyCheckbox>

I use another method selectAll(event) to select the button, select all. I would like when loading a page, it checks if all checkbox have been filled, but do not know how to call...

Answer 1

I was able to do what I needed using the possibility that the system offers me.

When I do that <f:selectItem itemLabel="Todos" itemValue=""/> I pass on the list one String empty when I select this checkbox.

Before I save I try not to record in the bank this String empty.

private void removeNullValueFromArray(Pojo pojo) {

    List<String> listUf = pojo.getUfsInss();
    listUf.removeAll(Collections.singleton(""));

    pojo.setUfsInss(listUf);
}

When carrgar the page using the tag,

<f:metadata>
    <f:event listener="#{lojaBean.load}" type="preRenderView"/>
</f:metadata>

I call on the Bean the method load where I check if the list is filled in with the quantity considered to be full, and then I pass to the List add a String empty.

if (isTodosEstadosSelecionados()) {
    this.getPojo().getUfsInss().add("");                
}

And then it works!

Answer 2

Add a script to the file using the tag <h:outputScript> and normally add a Listener of the kind load jQuery:

$(function() {
     selectAllCheckbox();
})

Alternatively, just enter the Javascript code inline using a tag <script> on your facelet. See some examples here.

However, this will work if the full page is loaded. If it is only a partial update with AJAX, use the attribute oncomplete to perform something after the DOM update. Consider order of Primefaces events.