使用JQuery加载的JSF页面不绑定值
我使用来自的oncomplete事件,通过使用JQuery函数在div中动态加载JSF页面。其思想是,当用户单击datatable中某一行旁边的edit按钮时,div将被一个JSF页面填充,其中一些输入字段绑定到我的支持bean中的属性使用JQuery加载的JSF页面不绑定值,jquery,jsf,facelets,javabeans,backing,Jquery,Jsf,Facelets,Javabeans,Backing,我使用来自的oncomplete事件,通过使用JQuery函数在div中动态加载JSF页面。其思想是,当用户单击datatable中某一行旁边的edit按钮时,div将被一个JSF页面填充,其中一些输入字段绑定到我的支持bean中的属性 <p:commandButton id="btnEditCompany" value="Edit company" action="#{companyBean.navigateUser}" oncomplete="showCertificateEdit(
<p:commandButton id="btnEditCompany" value="Edit company" action="#{companyBean.navigateUser}" oncomplete="showCertificateEdit()">
<f:setPropertyActionListener value="#{company}" target="#{companyBean.selectedCompany}"/>
</p:commandButton>
}
这是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>
使用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,以便将视图代码分离到另一个文件中
<p:commandButton id="btnEditCompany" value="Edit company" action="#{companyBean.navigateUser}">
<f:setPropertyActionListener value="#{company}" target="#{companyBean.selectedCompany}"/>
<f:ajax render="content" />
</p:commandButton>