【问题标题】:f:ajax render does not update components anymoref:ajax 渲染不再更新组件
【发布时间】:2015-07-11 03:16:34
【问题描述】:

我有一个数据表,我为编辑数据加载了一个模式。但是当我编辑和渲染数据表时,什么都没有改变。

我的意思是我有一个数据表和删除和编辑等操作。当我按下编辑时,我打开模态,然后我在这个模态上编辑数据,然后按下编辑。如您所见,我为数据表进行了渲染,但在数据表中看不到任何更改

 <h:form id="branchesForm">

                    <h:panelGroup layout="block" class="box-header">
                        <h3 class="box-title">Branches</h3>
                        &nbsp;&nbsp;
                        <h:commandButton value="Add New Branch" id="createBranchBtn" pt:data-loading-text="Loading..." pt:autocomplete="off" class="btn btn-primary sye-action-btn-loading">
                            <f:param name="pageType" value="create"/>
                        </h:commandButton>
                    </h:panelGroup>

                    <h:panelGroup layout="block" class="box-body table-responsive no-padding branches-datatable">
                        <div class="SYE-modal">  </div>
                        <h:panelGroup id="branchesListDiv" layout="block" class="container-fluid">
                            <h:dataTable id="example1" binding="#{index}" class="table table-hover table-bordered table-striped"  value="#{branchesMB.list}" var="branch">
                                <h:column>
                                    <f:facet name="header" >
                                        <h:outputText value="#"/>
                                    </f:facet>
                                    <h:outputText value="#{index.rowIndex+1}"/>
                                    <f:facet name="footer" >
                                        <b><h:outputText value="#"/></b>
                                    </f:facet>
                                </h:column>
                                <h:column >
                                    <f:facet name="header">
                                        <h:outputText value="Branch Name"/>
                                    </f:facet>
                                    <h:outputText value="#{branch.branchName}"/>
                                    <f:facet name="footer">
                                        <b><h:outputText value="Branch Name"/></b>
                                    </f:facet>
                                </h:column>
                                <h:column>
                                    <f:facet name="header">
                                        <h:outputText value="Address"/>
                                    </f:facet>
                                    <h:outputText value="#{branch.branchAddress}"/>
                                    <f:facet name="footer">
                                        <b><h:outputText value="Address"/></b>
                                    </f:facet>
                                </h:column>
                                <h:column>
                                    <f:facet name="header">
                                        <h:outputText value="Abbreviation"/>
                                    </f:facet>
                                    <h:outputText value="#{branch.branchAbbreviation}"/>
                                    <f:facet name="footer">
                                        <b><h:outputText value="Abbreviation"/></b>
                                    </f:facet>
                                </h:column>
                                <h:column headerClass="syeActionDatatable">
                                    <f:facet name="header">
                                        <h:outputText  value="Action"/>
                                    </f:facet>
                                    <f:facet name="footer">
                                        <b><h:outputText  value="Action"/></b>
                                    </f:facet>
                                    <div class="btn-group" >
                                        <a class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" href="#">
                                            <i class="glyphicon glyphicon-cog"></i>
                                            <span class="caret"></span>
                                        </a>
                                        <ul class='dropdown-menu pull-right'>
                                            <li>
                                                <!--pt:data-toggle="modal" pt:data-target=".bs-example-modal-lg"-->
                                                <h:commandLink  actionListener="#{branchesMB.setEntityEditObject(branch)}" class="editDatatable" >
                                                    <f:ajax onevent="load" onerror="load" render=":branchesForm:branchEditArea"/>
                                                    <i class='glyphicon glyphicon-pencil'></i>
                                                    Edit
                                                </h:commandLink>
                                            </li>
                                            <li>
                                                <!--onclick="if (!confirm('Are you sure you want to delete this record?')) return false"-->
                                                <h:commandLink  action="#{branchesMB.destroy()}" onclick="if (!confirm('Are you sure you want to delete this record?'))
                                                            return false;">
                                                    <f:ajax render=":branchesForm:branchEditArea"/>
                                                    <f:setPropertyActionListener target="#{branchesMB.entityDeleteObject}" value="#{branch}"/>
                                                    <i class='glyphicon glyphicon-trash'></i>
                                                    Delete
                                                </h:commandLink>
                                            </li>
                                        </ul>
                                    </div>
                                </h:column>
                            </h:dataTable>

                            <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" id="myModalLabel">Edit Branch</h4>
                                        </div>
                                        <div class="modal-body">
                                            <h:panelGroup id="branchEditArea" layout="block" class="box-body">
                                                <ui:include src="/view/includes/messages.xhtml"/>
                                                <h:inputHidden value="#{branchesMB.entityEditObject}" converter="BranchesConverter"/>
                                                <h:panelGroup id="branchNameDiv" layout="block" class="form-group">
                                                    <h:outputLabel value="Branch Name" for="branchName"/>
                                                    <h:inputText id="branchName" class="form-control" value="#{branchesMB.entityEditObject.branchName}" />
                                                </h:panelGroup>
                                                <h:panelGroup id="branchAddressDiv" layout="block" class="form-group">
                                                    <h:outputLabel value="Branch Address" for="branchAddress"/>
                                                    <h:inputText id="branchAddress" class="form-control" value="#{branchesMB.entityEditObject.branchAddress}"/>
                                                </h:panelGroup>
                                                <h:panelGroup id="branchAbbreviationDiv" layout="block" class="form-group">
                                                    <h:outputLabel value="Abbreviation" for="branchAbbreviation"/>
                                                    <h:inputText id="branchAbbreviation" class="form-control" value="#{branchesMB.entityEditObject.branchAbbreviation}"/>
                                                </h:panelGroup>
                                            </h:panelGroup>
                                        </div>
                                        <div class="modal-footer">
                                            <!--pt:data-dismiss="modal"-->
                                            <h:commandButton id="close" value="Close" class="btn btn-default" >
                                                <f:ajax render="branchesForm:branchesListDiv"/>
                                            </h:commandButton>

                                            <h:commandButton id="edit" value="Edit" action="#{branchesMB.update()}" class="btn btn-primary sye-action-btn-loading" pt:data-loading-text="Loading..." pt:autocomplete="off">
                                                <f:ajax render=":branchesForm:branchesListDiv,:branchesForm:branchEditArea, @this" execute="branchEditArea branchesForm:branchesListDiv"/>
                                            </h:commandButton>
                                            <!--                                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                                                                            <button type="button" class="btn btn-primary">Save changes</button>-->
                                        </div>
                                    </div>
                                </div>
                            </div>   
                        </h:panelGroup>
                    </h:panelGroup>
                    <h:panelGroup layout="block" class="box-footer">
                        Branches
                    </h:panelGroup>
                </h:form>

【问题讨论】:

    标签: jsf


    【解决方案1】:

    错误就在这里:

    <f:ajax render=":branchesForm:branchesListDiv,:branchesForm:branchEditArea, @this" ... />
    

    &lt;f:ajax&gt;renderexecute 属性用空格 分隔,而不是逗号分隔。

    <f:ajax render=":branchesForm:branchesListDiv :branchesForm:branchEditArea @this" ... />
    

    通常,这应该引发异常,如本 Q&A How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar" 中所述,但自 Mojarra 2.2.5 起,它停止验证这些属性以支持引用特定的 &lt;ui:repeat&gt; 迭代轮 (issue-2958)。 Spec issue 1372 开始解决这个讨厌的快速修复并恢复验证。

    仅 PrimeFaces &lt;p:ajax&gt; 支持逗号分隔,这很可能是您的困惑所在。它支持空格和逗号分隔。强烈建议不要&lt;p:ajax&gt; 中使用逗号分隔,因为从长远来看,只有在您返回&lt;f:ajax&gt; 时才会混淆。

    【讨论】:

    • 我还有一个问题,当我渲染数据表时,排序不起作用我应该刷新 JS 包含的数据库,你能帮我吗?我不想刷新我的 js
    • 如果您有新问题,只需按右上角的按钮 :)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-05-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多