Loaded JSF page with JQuery doesn't bind values

Question

I use the oncomplete event from a to dynamically load a JSF page in a div by using a JQuery function. The idea is that when a user clicks on the edit button next to a row in a datatable the div is being filled with a JSF page with has some input fields bound to attributes in my backing bean.

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

This will call the function in my backing bean which needs to set some fields with the value corresponding of the selected item in my datatable. But the problem is that the fields aren't being filled. The page is being displayed after my method is being executed but the fields remain empty.

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

}

This is the JQuery function.

And this is my facelets page:

                        <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>

Dave Maple Dave Maple · Accepted Answer · 2011-05-04T13:13:01

It might be easier to accomplish this with f:ajax:

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

and your command button:

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

This way all the content will be properly loaded in the component tree. You can use a ui:include inside the content block to load that facelet so you can separate the view code into another file.

Loaded JSF page with JQuery doesn't bind values

1 Answers