使用 JQuery 加载的 JSF 页面不绑定值答案

【问题标题】：Loaded JSF page with JQuery doesn't bind values使用 JQuery 加载的 JSF 页面不绑定值
【发布时间】：2011-08-18 10:41:22
【问题描述】：

我使用来自 a 的 oncomplete 事件通过使用 JQuery 函数在 div 中动态加载 JSF 页面。这个想法是，当用户单击数据表中一行旁边的编辑按钮时，div 将被一个 JSF 页面填充，其中一些输入字段绑定到我的支持 bean 中的属性。

 <p:commandButton id="btnEditCompany" value="Edit company" action="#{companyBean.navigateUser}" oncomplete="showCertificateEdit()">
                                    <f:setPropertyActionListener value="#{company}" target="#{companyBean.selectedCompany}"/>
                                </p:commandButton>

这将调用我的后备 bean 中的函数，该函数需要设置一些字段与我的数据表中所选项目的对应值。但问题是这些字段没有被填写。执行我的方法后，页面正在显示，但字段仍为空。

function showCertificateEdit() {
jQuery("#content").load('/profilemanager/editCompanyDetail.xhtml');

}

这是 JQuery 函数。

这是我的 facelets 页面：

                        <p:tab title="My Companies">
                        <p:dataTable value="#{companyBean.companiesByUser}" var="company" id="companyTable"
                                     emptyMessage="No companies found for given user" paginator="true" rows="10"
                                     paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                     rowsPerPageTemplate="5,10,15">

                            <p:column headerText="name" sortBy="#{company.companyName}"
                                      filterBy="#{company.companyName}"
                                      filterMatchMode="contains"
                                      style="width: 100px;">
                                <h:outputText value="#{company.companyName}"/>
                            </p:column>
                            <p:column headerText="Start date" sortBy="#{company.startDate}"
                                      filterBy="#{company.startDate}"
                                      filterMatchMode="contains"
                                      style="width: 100px;">
                                <h:outputText value="#{company.startDate}">
                                    <f:convertDateTime pattern="dd/MM/yyyy" type="date" timeZone="CET"/>
                                </h:outputText>
                            </p:column>
                            <p:column headerText="End date" sortBy="#{company.endDate}"
                                      filterBy="#{company.endDate}"
                                      filterMatchMode="contains"
                                      style="width: 100px;">
                                <h:outputText value="#{company.endDate}">
                                    <f:convertDateTime pattern="dd/MM/yyyy" type="date" timeZone="CET"/>
                                </h:outputText>
                            </p:column>
                            <p:column>
                                <p:commandButton id="btnEditCompany" value="Edit company" action="#{companyBean.navigateUser}" oncomplete="showCertificateEdit()">
                                    <f:setPropertyActionListener value="#{company}" target="#{companyBean.selectedCompany}"/>
                                </p:commandButton>
                            </p:column>
                        </p:dataTable>
                        <p:commandButton action="#{companyBean.navigate}" id="btnAddCompany" value="Add company"/>
                    </p:tab>
                </p:accordionPanel>
            </h:form>

            <div id="content">

            </div>

【问题讨论】：

标签： jquery jsf facelets javabeans backing

【解决方案1】：

使用 f:ajax 可能更容易做到这一点：

<h:panelGroup id="content" layout="block" rendered="#{companyBean.selectedCompany != null}">
    whatever content you want to load
</h:panelGroup>

还有你的命令按钮：

<p:commandButton id="btnEditCompany" value="Edit company" action="#{companyBean.navigateUser}">
    <f:setPropertyActionListener value="#{company}" target="#{companyBean.selectedCompany}"/>
    <f:ajax render="content" />
</p:commandButton>

这样所有内容都将正确加载到组件树中。您可以在内容块中使用 ui:include 来加载该 facelet，以便您可以将视图代码分离到另一个文件中。

【讨论】：