onstart and oncomplete don't work in datatable with p:commandLink

Question

I wrote a JS function which shows a "Loading" DIV while I'm loading the next screen (I'm using commanlinks and it works perfectly, with onstart="showthemodal" oncomlete="hidethemodal").

Now the problem is in this page in particular I have a datatable (I wrote the code above) which have many commandlinks inside the datatable and the onstart and oncomplete here don't work. I'm not able to show the modal without change the appearance of my buttons. Thanks for your support Does anyone know how can I fix it?

Here is my code:

<p:dataTable id="dataTable" var="user"
            tableStyle="table-layout: auto"
            value="#{gestionUsuariosController.listaUsuarios}" paginator="true"
            rows="10" lazy="true" dynamic="true"
            style="font-size:16px;">

            <p:column styleClass="ellipsis"
                sortBy="#{user.userName}">
                <f:facet name="header">
                    <h:outputText value="Nombre" />
                </f:facet>
                <h:outputText id="userName" value="#{user.userName}" />
                <p:tooltip for="userName" value="#{user.userName}" />
            </p:column>

            <p:column styleClass="ellipsis"
                sortBy="#{user.userName}">
                <f:facet name="header">
                    <h:outputText value="Password" />
                </f:facet>
                <h:outputText id="password" value="#{user.password}" />
                <p:tooltip for="password" value="#{user.password}" />
            </p:column>

            <p:column styleClass="ellipsis" style="width: 80px;">
                <f:facet name="header">
                    <h:outputText value="Accion" />
                </f:facet>
                <p:commandLink action="consulta" onstart="javascript:bloquearInterfaz();" oncomplete="javascript:desbloquearInterfaz();">
                    <h:graphicImage value="/resources/img/lupa.png"  height="20px"/>
                    <f:param name="userName" value="#{user.userName}" />
                </p:commandLink>
                &nbsp;
                <p:commandLink action="modificacion" onstart="javascript:bloquearInterfaz();" oncomplete="javascript:desbloquearInterfaz();">
                    <h:graphicImage value="/resources/img/icono_edit.png" height="20px" />
                    <f:param name="userName" value="#{user.userName}" />
                </p:commandLink>
                &nbsp;
                <p:commandLink action="baja" onstart="javascript:bloquearInterfaz();" oncomplete="javascript:desbloquearInterfaz();">
                    <h:graphicImage value="/resources/img/borrar.png"  height="20px" />
                    <f:param name="userName" value="#{user.userName}" />
                </p:commandLink>
            </p:column>
        </p:dataTable>

Answer 1

to make it clear onstart and oncompelte is a client side method that mean that you can't connect it to your managedBean ( execute a method ) however it's possible to make it work (execute a managedBean method ) with p:remoteCommand

it's look like this

mypage.xhtml

<script type="text/javascript">
  myfunction () {
          ...
  }            
</script>

...

<p:commandButton  onstart="myfunction() "  />

and if you want to execut a managedBean method

mypage.xhtml

<script type="text/javascript">
   myfunction () {
        ...
        cpr();
   }            
</script>

...

<p:remoteCommand  name="cpr" actionListener="#{managedBean.method()}"  />
<p:commandButton  onstart="myfunction() "  />

hope that helped you.