p:blockUI 从数据表触发时未显示

Question

我正在处理发送短信的任务，其中一部分我需要显示一个繁忙的加载器，我已经尝试过 primefaces p:blockUI，但它根本不起作用。从数据table 按钮行触发时，块UI 不会显示。这是我的代码不起作用。我正在使用 primefaces 5.3。它就像 table 中的每个按钮都被分配了自己的唯一 ID，这意味着 Ui 块触发器中指定的 ID 不是单击按钮行上的那个。

<?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>

但是当我尝试在按钮而不是数据中触发它时table它工作正常。

Answer 1

没有您在触发器中引用的 ID 为 :form1:tbl:btn_send_sms 的客户端组件。

dataTable 是一个迭代组件，它将 "index" 添加到客户端 ID，因此如果您使用浏览器开发人员工具检查按钮，您会看到按钮的 ID 类似于

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

所以你需要在触发器中添加一些不同的东西，比如 PrimeFaces 选择器（例如基于 class），或者使用块 ui 的客户端 api =]中的onStart和onComplete属性中的commandButton喜欢onStart="PF('wds').show()和对应的hide

另见

How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
How can I know the id of a JSF component so I can use in Javascript
https://primefaces.github.io/primefaces/8_0/#/components/blockui

Answer 2

您没有使用该按钮处理任何事情。您需要将 process"@this" 或 process"tableID" 放在命令按钮中。

p:blockUI 从数据表触发时未显示

p:blockUI not getting shown when triggered from datatable

jsf

primefaces

另见