Update form in xhtml file by id from another xhtml file

Question

Here is my code

index.xhtml

<h1>Student List</h1>
    <h:form id="studentListForm">
        <h:dataTable id="studentsList"
                     style="border:2px solid;"
                     var="student"
                     value="#{tableItems.students}">
            <h:column>
                <f:facet name="First Name"/>
                <h:outputText value="#{student.firstName}"/>
            </h:column>
            <h:column>
                <f:facet name="Last Name"/>
                <h:outputText value="#{student.lastName}"/>
            </h:column>
            <h:column>
                <f:facet name="Faculty Name"/>
                <h:outputText value="#{student.faculty.name}"/>
            </h:column>
        </h:dataTable>
        <br/>
        <p:commandButton value="Add Student"
                         update=":studentAdding"
                         oncomplete="PF('studentAddingDialog').show();"/>
    </h:form>

addStudent.xhtml

<p:dialog id="studentAddingDialogId" modal="true"
              header="Add Student"
              widgetVar="studentAddingDialog"
              closeOnEscape="true">

        <h:form id="studentAdding">
            <h:outputLabel value="Student first name"/>
            <h:inputText id="firstName"
                         value="#{tableItems.studentFirstName}"
                         required="true"/>
            <br/>
            <h:outputLabel value="Student last name"/>
            <h:inputText id="lastName"
                         value="#{tableItems.studentLastName}"
                         required="true"/>
            <br/>
            <h:outputLabel value="Choose student faculty"/>
            <h:selectOneMenu id="selectFaculty"
                             value="#{tableItems.studentFaculty}"
                             required="true">

                <f:selectItem itemLabel="--Select--" itemValue=""/>
                <f:selectItems value="#{faculties.faculties}"
                               var="itam"
                               itemValue="#{itam.name}"
                               itemLabel="#{itam.name}"/>
            </h:selectOneMenu>
            <p:commandButton value="Submit"
                             actionListener="#{tableItems.addStudent}"
                             oncomplete="PF('studentAddingDialog').hide();"
                             update="studentListForm"/>
        </h:form>
    </p:dialog>

After running the program I see an Error(HTTP Status 500 - Cannot find component for expression ":studentAdding" referenced from "studentListForm:j_idt10".) why it can't recognize the form with it's id from another xhtml file?

Bilal Dekar · Answer 1 · 2016-10-08T18:59:59.877

Here you are trying to open a dialog that is located in another page, so when you try to update studentAdding it does not find the form, that explains the error Cannot find component for expression ":studentAdding" referenced from "studentListForm:j_idt10", i suggest you include the page addStudent.xhtml in the main page that is index.xhtml :

<ui:include src="/../studentAdding.xhtml">
    <ui:param name="updateForm" value=":studentListForm"/>
</ui:include>

You have to make sure that anything that you want to update from studentAdding.xhtml and that is located in index.xhtml, you have to pass it as a parameter to studentAdding.xhtml, as an exemple studentListForm that you are updating in submit button, so when you update you use the name of the parameter that you passed, which is updateForm, like this :

<p:commandButton value="Submit"
                 actionListener="#{tableItems.addStudent}"
                 oncomplete="PF('studentAddingDialog').hide();"
                 update="updateForm "/>

score 0 · Answer 2 · answered Jan 29 '19 at 13:51

To use any xhtml element from included xhtml file you can pass it as <ui:param name="yourElementAlias" value=":pathTo:Element"/>. It allows you to use this particular element from included source file:

<ui:include src="/../studentAdding.xhtml">
    <ui:param name="yourElementAlias" value=":pathTo:Element"/>
</ui:include>

Then, to use this element in studentAdding.xhtml (for example update it) do it like so:

<p:commandButton value="Submit"
             actionListener="#{tableItems.addStudent}"
             oncomplete="PF('studentAddingDialog').hide();"
             update="#{yourElementAlias}"/>

Update form in xhtml file by id from another xhtml file

2 Answers2