p:blockUI在从datable触发时不显示。

问题描述 投票:0回答:1

我正在做一个发送短信的任务,其中一部分需要显示一个繁忙的加载器,我已经尝试了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中触发它时,它可以正常工作。

jsf primefaces
1个回答
3
投票

客户端没有一个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。onStartonComplete 的属性 commandButton 喜欢 onStart="PF('wds').show() 和相应的隐藏

另见


0
投票

你没有用那个按钮处理任何东西。你需要在命令按钮中加入process"@this "或process "tableID"。

© www.soinside.com 2019 - 2024. All rights reserved.