p: blockUI не отображается при запуске из datatable - PullRequest
0 голосов
/ 08 мая 2020

Я работаю над задачей по отправке sms и, частично, мне нужно показать загруженный загрузчик, и я пробовал primefaces p: blockUI, который вообще не работает. Пользовательский интерфейс блока не отображается при запуске из строки кнопки с данными. Вот мой код, который не работает. Я использую праймфейсы 5.3. Это похоже на то, что каждой кнопке в таблице назначается собственный уникальный идентификатор, что означает, что идентификатор, указанный в триггере блока Ui, не тот, который был нажат в строке кнопки.

<?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 работает нормально.

Ответы [ 2 ]

3 голосов
/ 08 мая 2020

На стороне клиента нет компонента с идентификатором :form1:tbl:btn_send_sms, на который вы ссылаетесь в своем триггере.

DataTable - это повторяющийся компонент, который добавляет «индекс» к идентификатору клиента, поэтому если вы проверите кнопки с помощью инструмента разработчика браузера, для кнопок вы увидите идентификаторы, такие как

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

Таким образом, вам нужно добавить что-то другое в триггер, например, селектор PrimeFaces (например, на основе класса), или использовать клиентский api блока ui в onStart и onComplete атрибуты commandButton like onStart="PF('wds').show() и соответствующего скрытия

См. Также

0 голосов
/ 15 мая 2020

Вы ничего не обрабатываете этой кнопкой. Вам нужно поместить процесс «@this» или процесс «tableID» в командную кнопку.

...