p:blockUI not getting shown when triggered from datatable

Question

I am working on task to send sms and part of that I need to show a busy loader and I have tried primefaces p:blockUI which is not working at all. The block UI is not get shown when triggered from a datatable button row. Here is my code that is not working. I am using primefaces 5.3. Its like each button in the table is getting assigned its own unique id which means the id specified in the Ui block trigger isn't the one on the button row clicked.

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">

    <body>

        <ui:composition template="./template/template.xhtml">

            <ui:define name="pageTitle">
              Send Sms
            </ui:define>

            <ui:define name="pagecontent" id="blocker">

                <p:panel id="panel_sms" header="My Contacts">
              <p:blockUI block="panel_sms" id="wds" widgetVar="wds" trigger=":form1:tbl:btn_send_sms"  >
                                <p:graphicImage library="images" value="/img/3.gif"/> 
                                <br/>
                                <h:outputText value="Sending Sms Please wait...    " style="font-weight: bolder"/> 
                            </p:blockUI>


                <h:form id="form1">


                    <p:growl showDetail="true"/>


                    <p:dataTable rowKey="#{item.id}"  paginator="false" 
                                 rows="8"  
                                 editable="true"  widgetVar="table_route"
                                 id="tbl"
                                value="#{model.loadContacts}" var="item" >

                         <p:column style="width: 15%;">
                            <f:facet name="header">
                                <h:outputText value="Customer Name"/>
                            </f:facet>
                            <h:outputText value="#{item.name} "/> 
                        </p:column>
                          <p:column style="width: 15%;">
                    <f:facet name="header">
                                <h:outputText value="Contact"/>
                            </f:facet>
                            <h:outputText value="#{item.contact} "/> 
                        </p:column>                        

                        <p:column headerText="Send Sms"   style="width:8%;align-content: center">  
                            <center>
                                <p:commandButton id="btn_send_sms" update="form1"
                                style="background: #4a148c" value="Send Sms" icon="ui-icon-signal-diag" action="#{model.doLenthyTask(item)}"><--Have simulated a threaad to sleep 5 seconds-->

                                    <p:confirm message="Send Sms?"/>
                                </p:commandButton> 
                            </center>
                     </p:column> 

                    </p:dataTable>


                </h:form>

                               </p:panel>
            </ui:define>

        </ui:composition>

    </body>

But when I try trigger it in a button not in a datatable it works fine.

Please read https://www.stackoverflow.com/tags/jsf/info about templates and [mcve] — Kukeltje, May 08 '20 at 13:41
Yes, but it should not include templates (effectively you now imply that it works if you don't use a template if this is your [mcve]. And for me to try to reproduce, I cannot. Copy/pasting this in an empty JSF + PrimeFaces project does not result in something that is runnable. You also miss versioninfo btw, and you forgot a PrimeFaces tag on the question. All just some hints for creating better questions (and also helping you narrow things down). — Kukeltje, May 08 '20 at 13:45
Does this answer your question? [How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"](https://stackoverflow.com/questions/8634156/how-to-find-out-client-id-of-component-for-ajax-update-render-cannot-find-compo) — Kukeltje, May 08 '20 at 13:46
@Kukeltje have updated my question and the issue is that the p:uiBlock not getting invoked by a button inside a table. Its like each button on each row its having its own unique id which does not reflect the id i specified as the trigger in the UiBlock — , May 08 '20 at 13:53
Correct... All default JSF behaviour. See my answer and read the first link in the see also (which I also propose as a duplicate, not sure it it is 100% so, but at least 90%) — Kukeltje, May 08 '20 at 14:01
@Kukeltje its not working for subsequent clicks only for first time <--Have simulated a threaad to sleep 5 seconds--> — , May 08 '20 at 14:15

score 2 · Accepted Answer · answered May 08 '20 at 13:59

There is no component client-side with an id of :form1:tbl:btn_send_sms to which you refer in your trigger.

The dataTable is a iterating component which adds an "index" to the client-id, so if you inspect the buttons with a browser developer tool, for the buttons you'll see id's like

form1:tbl:1:btn_send_sms
form1:tbl:2:btn_send_sms
form1:tbl:3:btn_send_sms

So you'll need to add something different in the trigger like a PrimeFaces selector (e.g. based on a class), or use the client-side api of the block ui in the onStart and onComplete attributes of the commandButton like onStart="PF('wds').show() and the corresponding hide

p:blockUI not getting shown when triggered from datatable

2 Answers2

See also