使用 ajax 更新 PrimeFaces 数据表答案

【问题标题】：update PrimeFaces datatable using ajax使用 ajax 更新 PrimeFaces 数据表
【发布时间】：2015-01-14 02:33:39
【问题描述】：

我正在使用 primefaces 数据表。更新 primefaces 数据表存在问题。我有一个命令按钮，当我提交命令按钮时，我想更新我的数据表。

下面给出的代码：

<h:form  id="mainform">
       <p:outputPanel id="my" autoUpdate="true">
            <p:dataTable var="test" value="#{examinationFormBean.examinationList}" 
            paginator="false" rows="10" id="datatable" widgetVar="examinationdata" 
            filteredValue="#{examinationFormBean.getFilterExaminationList}">


            <f:facet name="header">

                 <p:outputPanel>
                     <h:outputText value="Search all fields:" />
                     <p:inputText id="globalFilter" onkeyup="PF('examinationdata').filter()"
                    style="width:150px" />
               </p:outputPanel>

             </f:facet>



            <p:column headerText="Id" filterBy="#{test.formStatus.id}">
                <h:outputText value="#{test.formStatus.id}" />
            </p:column>

            <p:column headerText="Name Of Candidate" filterBy="#{test.formStatus.user.name}">
                <h:outputText value="#{test.formStatus.user.name}" />
            </p:column>

            <p:column headerText="Examination" filterBy="#{test.examination.name}">
                <h:outputText value="#{test.examination.name}" />
            </p:column>


             <p:column headerText="View/Action">
                  <p:commandLink value="View"   action="#{examinationFormBean.readFormStatus(test.formStatus.id)}" 
                   oncomplete="PF('test').show()" update="@(.ui-panel)">
                    </p:commandLink>
             </p:column>

         </p:dataTable>
       </p:outputPanel>
        </h:form>


and my diloag box is :

         <p:dialog  widgetVar="test"  modal="true" id="dialog" height="600" width="760" dynamic="true" draggable="false" closable="true">

                <h:form id="data">
                  <div class="row" >

                      <p:growl id="growl" sticky="true" showDetail="true" />

                       <p:panel header="Examination Details">

                        <h:panelGrid columns="2" cellpadding="4"  border="1"  id="panael1" style="text-align: left;color: #333399;" width="760">

                                <h:outputText   value="#{msg['elicense.examinationform.personal.proposeofexam']}"/>
                                <h:outputText id="propExam" value="#{examinationFormBean.examination.name}"/>

                                <h:outputText  value="#{msg['elicense.examinationform.personal.classofcertificates']}" />


                                <ui:fragment rendered="#{examinationFormBean.elementaryPrinciples==true}">
                                   <h:outputText id="grid"  value="Elemetry Principle"/> 
                                </ui:fragment>

                                <ui:fragment rendered="#{examinationFormBean.wiringForSystem==true}">
                                    <p:spacer></p:spacer>
                                   <h:outputText id="data1" value="Wiring for System not Exceeding 250 Volts"></h:outputText>
                                </ui:fragment>

                                <ui:fragment rendered="#{examinationFormBean.dcApparatus==true}">
                                  <p:spacer></p:spacer>
                                  <h:outputText id="data2" value="D. C. Apparatus not Exceeding 650 Volts"></h:outputText>
                                </ui:fragment>

                                <ui:fragment rendered="#{examinationFormBean.acApparatus==true}">
                                  <p:spacer></p:spacer>
                                  <h:outputText id="data31" value="A. C. Apparatus not Exceeding 650 Volts"></h:outputText>
                                </ui:fragment>

                                <ui:fragment rendered="#{examinationFormBean.acApparatus==true}">
                                  <p:spacer></p:spacer>
                                  <h:outputText id="data3" value="A. C. Apparatus not Exceeding 650 Volts"></h:outputText>
                                </ui:fragment>

                                <ui:fragment rendered="#{examinationFormBean.undergroundCable1100Volts==true}">
                                  <p:spacer></p:spacer>
                                  <h:outputText id="data4" value="Underground Cables Voltage upto 1100 Volts"></h:outputText>
                                </ui:fragment>

                                <ui:fragment rendered="#{examinationFormBean.undergroundCable11900Volts==true}">
                                  <p:spacer></p:spacer>
                                  <h:outputText id="data5" value="Underground Cables Voltage upto 11900 Volts"></h:outputText>
                                </ui:fragment>

                                <ui:fragment rendered="#{examinationFormBean.undergroundCable3300Volts==true}">
                                  <p:spacer></p:spacer>
                                <h:outputText id="data6" value="Underground Cables Voltage exceeding 33000 Volts"></h:outputText>
                                </ui:fragment>

                                <ui:fragment rendered="#{examinationFormBean.installationExceding650Volts==true}">
                                 <p:spacer></p:spacer>
                                 <h:outputText id="data7" value="Installation exceeding 650 Votts"></h:outputText>
                                </ui:fragment>

                                <ui:fragment rendered="#{examinationFormBean.overHeadLiesupto650Volts==true}">
                                 <p:spacer></p:spacer>
                                <h:outputText id="data8" value="Overhead lies Upto 650 Volts"></h:outputText>
                                </ui:fragment>

                                <ui:fragment rendered="#{examinationFormBean.overHeadLiesupto3300Volts==true}">
                                <p:spacer></p:spacer>
                                <h:outputText id="data9" value="Overhead lies Upto 33000 Volts"></h:outputText>
                                </ui:fragment>

                                <ui:fragment rendered="#{examinationFormBean.overHeadLiesExceeding3300Volts==true}">
                                 <p:spacer></p:spacer>
                                <h:outputText id="data10" value="Overhead lies Exceeding 33000 Volts" ></h:outputText>
                                </ui:fragment>

                                <ui:fragment rendered="#{examinationFormBean.minigInstallation==true}">
                                  <p:spacer></p:spacer>
                                  <h:outputText id="data11" value="Mining Installation(Bellow Ground)"></h:outputText>
                                </ui:fragment>

                               <ui:fragment rendered="#{examinationFormBean.minigInstallation==true}">
                                 <p:spacer></p:spacer>   
                                <h:outputText id="data12" value="Mining Installation(Bellow Ground)"></h:outputText>
                                </ui:fragment>

                                <ui:fragment rendered="#{examinationFormBean.minigInstallation==true}">
                                 <p:spacer></p:spacer>   
                                 <h:outputText id="data121" value="Mining Installation(Bellow Ground)" ></h:outputText>
                                </ui:fragment>

                                <ui:fragment rendered="#{examinationFormBean.wiringForSystemUpto650Volts==true}">
                                 <p:spacer></p:spacer>
                                <h:outputText id="data13" value="Wiring for System not exceeding 650 Volts"></h:outputText>
                                </ui:fragment>

                                <ui:fragment rendered="#{examinationFormBean.electricIt==true}">
                                 <p:spacer></p:spacer>
                                  <h:outputText id="data14" value="Electric Lt"></h:outputText>
                                </ui:fragment>

                                <ui:fragment rendered="#{examinationFormBean.electricIt==true}">
                                 <p:spacer></p:spacer>
                                  <h:outputText id="data141" value="Electric Lt"></h:outputText>
                                </ui:fragment>

                                <ui:fragment rendered="#{examinationFormBean.electricSigns==true}">
                                 <p:spacer></p:spacer>
                                 <h:outputText id="data15" value="Electrict Signs"></h:outputText>
                                </ui:fragment>

                                <ui:fragment rendered="#{examinationFormBean.mediumPressure==true}">
                                  <p:spacer></p:spacer>
                                  <h:outputText id="data16" value="Medium Pressure Indian Electricity Rules 1959" />

                                </ui:fragment>

                                <ui:fragment rendered="#{examinationFormBean.mediumPressure==true}">
                                  <p:spacer></p:spacer>
                                  <h:outputText id="data161" value="Medium Pressure Indian Electricity Rules 1959" />

                                </ui:fragment>

                                <ui:fragment rendered="#{examinationFormBean.ltOverHeadLines==true}">
                                   <p:spacer></p:spacer>
                                 <h:outputText id="data18" value="Overhead Lines(LT)" />

                                </ui:fragment>

                                <ui:fragment rendered="#{examinationFormBean.paperInsulatedCables==true}">
                                  <p:spacer></p:spacer>
                                 <h:outputText id="data19" value="Pepar Insulated cables(laying and joining)" /> 

                                </ui:fragment>




                                <h:outputText value="#{msg['elicense.examinationform.examination.centerofexamination']}" />
                                <h:outputText id="examcenterid" value="#{examinationFormBean.center.name}" />

                                <h:outputText value="#{msg['elicense.examinationform.examination.languagepaper']}" />
                                <h:outputText id="language" value="#{examinationFormBean.language.name}" />

                            </h:panelGrid>
                        </p:panel>



                        <!-- personal details -->

                            <ui:include src="/pages/personalView.xhtml" />



                        <!-- Education Qualification -->

                        <p:panel header="Education Qualification">

                            <ui:include src="/pages/educationalQualificationsView.xhtml" />


                        </p:panel>


                        <!-- Certificate or Permit Details -->


                        <p:panel header="Previous Certificate Details">
                            <h:panelGrid columns="2" style="text-align: left;color: #333399;" width="760">

                                <h:outputText   value="#{msg['elicense.examinationform.academic.premitno']}" />
                                <h:outputText id="permitid" value="#{examinationFormBean.previousCertificate.previousPermitNo}" />

                                <h:outputText   value="#{msg['elicense.examinationform.academic.certificate']}" />
                                <h:outputText id="certificateid"    value="#{examinationFormBean.previousCertificateNo}" />

                                <h:outputText   value="#{msg['elicense.examinationform.academic.otherstatepermitno']}" />
                                <h:outputText id="otherstatepermitid"   value="#{examinationFormBean.otherStatePermitNo}" />

                                <h:outputText   value="#{msg['elicense.examinationform.academic.otherstatecertificateno']}" />
                                <h:outputText id="otherstatecertificateid"  value="#{examinationFormBean.otherStateCertificateNo}" />

                                <!-- <h:outputText
                                    value="#{msg['elicense.examinationform.academic.dateofissue']}" />
                                <h:outputText id="compopupforprivious"
                                    value="#{examinationFormBean.previousRegistrationDate}" />
     -->
                            </h:panelGrid>
                        </p:panel>


                        <!-- Experience Details -->

                        <p:panel header="Experience Details">
                            <ui:include src="/pages/experienceView.xhtml" />
                        </p:panel>



                        <!-- Treasury Challan Details -->

                        <ui:include src="/pages/treasuryChallanView.xhtml" />


                        <!-- Attachment -->

                        <p:panel header="Upload necessary Document">

                            <h:panelGrid columns="2" style="text-align: left;color: #333399;" width="760" border="1">

                                <h:outputText value="#{msg['elicense.examinationform.uplod.document']}" />

                                <p:graphicImage value="#{examinationFormBean.candidatePhoto}" />

                                <h:outputText  value="#{msg['elicense.examinationform.uplod.sign']}" />
                                <p:graphicImage value="#{examinationFormBean.signature}"    mode="simple" disabled="false" 
                                label="Candidates Signature " />
                                <p:spacer></p:spacer>
                                 <p:messages id="messageid"/>

                                <h:outputText value="Action :" class="alignment"/>

                                 <p:selectOneRadio id="console" value="#{examinationFormBean.action}" 
                                  required="true" label="Action">
                                    <f:selectItem itemLabel="Ok" itemValue="ok" />
                                    <f:selectItem itemLabel="Have Issued" itemValue="haveissue" />
                                     <p:ajax process="console"   update="@form" />
                                </p:selectOneRadio>

                                <h:outputLabel value="Comment:" rendered="#{examinationFormBean.action eq 'haveissue'}"></h:outputLabel>

                                <h:inputText id="compid"    value="#{examinationFormBean.comment}" rendered="#{examinationFormBean.action eq 'haveissue'}"/>
                                 <p:watermark for="compid" value="Enter Valid Reason"></p:watermark>

                                <p:commandButton  value="Forwarded to Zonal Electrical Inspector>>"
                                  actionListener="#{examinationFormBean.saveFormStatusByOfficeAssistent()}"  update=**"messageid,my"**  process="data"  oncomplete="if (args &amp;&amp; !args.validationFailed) PF('test').hide()" >


                              </p:commandButton>

                            </h:panelGrid>

                        </p:panel>

                    </div>
            </h:form>   

        </p:dialog>

我想更新我的数据表，我在命令按钮更新中使用了 outputpannel id，我再次使用了我的数据表 id，但 primefaces 找不到它。

【问题讨论】：

标签： jsf jsf-2 primefaces datatable

【解决方案1】：

在具有多个命名容器的复杂布局中引用组件可能是个问题，但在这些情况下最简单的解决方案是按样式类定位组件。

<p:dataTable ... styleClass="myDataTable" ... >

<p:commandButton ... update="@(.myDataTable)" ... >

这种方法的另一个优点是它不受布局更改的影响（否则，每当您在相关位置添加/删除另一个命名容器时，您都必须更新要更新的组件的 ID）。

更新（来自 cmets）

保持saveFormStatusByOfficeAssistent()签名不变（返回无效），只是在方法的末尾添加examinationList=examinationDetailsService.readExaminationList();行

public void saveFormStatusByOfficeAssistent() { 
    System.out.println("hiiii"+this.getComment()); 
    formStatus.setStatus(getAction()); 
    formStatus.setComment(this.getComment()); 
    examinationDetailsService.saveFormStatus(formStatus); 
    System.out.println("Hi page successfully save"+getAction()); 
    this.setAction(""); this.setComment(null); 
    examinationList=examinationDetailsService.readExaminationList();
}

而getUserList() 应该只返回examinationList

public List<ExaminationDetails> getUserList() {
    return examinationList;
}

【讨论】：

我已经尝试过您的代码，但数据表没有更新。我在 init() 方法中生成了我的数据表
@ChandanSarma 客户端或服务器是否有任何错误？
@ChandanSarma 这段代码应该 100% 工作，所以如果没有，那么可能还有其他与问题相关的事情。您可以将 init() 方法详细信息添加到您的问题中，因为这对于正确回答可能很重要。
公开名单 getUserList() { return ExamList=examinationDetailsService.readExaminationList(); } 这里我正在生成列表，但表仍然没有更新
#{examinationFormBean.saveFormStatusByOfficeAssistent()} 被调用了吗？尝试在该方法中移动examinationList=examinationDetailsService.readExaminationList()，然后从getUserList() 返回examinationList 以查看是否有效。

【解决方案2】：

问题是您没有正确引用组件。您需要添加表单 ID。即update=":mainForm:my , :data:messageid"

【讨论】：

【解决方案3】：

嗯，对放置在另一个 NamingContainer 中的组件调用更新，需要绝对 id/路径解析

您可以在您的 p:commandButton 组件上尝试类似的操作

update=":#{p:component('datatable')}"
update="PF('examinationdata')}"
update=":mainform"

或者您可以检查您的 html 代码并找到数据表的绝对 ID。更多阅读here

【讨论】：