La pagina JSF caricata con jQuery non lega i valori
Domanda
Uso l'evento OnComplete da A per caricare dinamicamente una pagina JSF in un div usando una funzione jQuery. L'idea è che quando un utente fa clic sul pulsante di modifica accanto a una riga in un datatato, il Div viene riempito con una pagina JSF con alcuni campi di input legati agli attributi nel mio fagiolo di supporto.
<p:commandButton id="btnEditCompany" value="Edit company" action="#{companyBean.navigateUser}" oncomplete="showCertificateEdit()">
<f:setPropertyActionListener value="#{company}" target="#{companyBean.selectedCompany}"/>
</p:commandButton>
Questo chiamerà la funzione nel mio bacio di supporto che deve impostare alcuni campi con il valore corrispondente dell'elemento selezionato nel mio dati. Ma il problema è che i campi non vengono riempiti. La pagina viene visualizzata dopo l'esecuzione del mio metodo ma i campi rimangono vuoti.
function showCertificateEdit() {
jQuery("#content").load('/profilemanager/editCompanyDetail.xhtml');
}
Questa è la funzione jQuery.
E questa è la pagina delle mie facciate:
<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>
Soluzione
Potrebbe essere più facile realizzare questo con F: Ajax:
<h:panelGroup id="content" layout="block" rendered="#{companyBean.selectedCompany != null}">
whatever content you want to load
</h:panelGroup>
E il tuo pulsante di comando:
<p:commandButton id="btnEditCompany" value="Edit company" action="#{companyBean.navigateUser}">
<f:setPropertyActionListener value="#{company}" target="#{companyBean.selectedCompany}"/>
<f:ajax render="content" />
</p:commandButton>
In questo modo tutto il contenuto verrà caricato correttamente nell'albero dei componenti. È possibile utilizzare un'interfaccia utente: includere all'interno del blocco di contenuto per caricare quella facelet in modo da poter separare il codice di visualizzazione in un altro file.