我正在做一个发送短信的任务,其中一部分需要显示一个繁忙的加载器,我已经尝试了primefaces p:blockUI,但完全不起作用。当从一个可数据化的按钮行触发时,块UI没有被显示出来。以下是我的无效代码。我使用的是primefaces 5.3。表中的每个按钮都被分配了自己的唯一id,这意味着在UI块触发中指定的id不是被点击的按钮行的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>
但是当我尝试在按钮而不是在datatable中触发它时,它可以正常工作。
客户端没有一个id为的组件。:form1:tbl:btn_send_sms
你在触发器中引用的。
dataTable是一个迭代组件,它为client-id添加了一个 "索引",所以如果你用浏览器开发工具来检查按钮,你会看到像这样的id。
form1:tbl:1:btn_send_sms
form1:tbl:2:btn_send_sms
form1:tbl:3:btn_send_sms
所以你需要在触发器中添加一些不同的东西,比如PrimeFaces选择器(比如基于一个类),或者使用块ui中的客户端api。onStart
和 onComplete
的属性 commandButton
喜欢 onStart="PF('wds').show()
和相应的隐藏
你没有用那个按钮处理任何东西。你需要在命令按钮中加入process"@this "或process "tableID"。