MalformedXML: During update: adminUsersForm not found

Question

I have some doubts about ajax on JSF.

My xhtml looks like this:

<h:body> <h:form id="menuForm"> <h:outputLabel for="menu">Available actions: </h:outputLabel> <h:selectOneMenu id="menu" value="#{menu.mainMenuItem}"> <f:selectItem itemLabel="Select an option..." itemValue="null" /> <f:selectItems value="#{menu.mainMenuItems}" /> <f:ajax render=":menuForm :adminUsersForm :loadInfoForm :viewFilesForm" /> <!-- <f:ajax render="@all" /> --> </h:selectOneMenu> </h:form> <h:form id="adminUsersForm" rendered="#{menu.mainMenuItem == 'Admin users.'}"> <h:commandButton value="Button 1" /> </h:form> <h:form id="loadInfoForm" rendered="#{menu.mainMenuItem == 'Load info.'}"> <h:commandButton value="Button 2" /> </h:form> <h:form id="viewFilesForm" rendered="#{menu.mainMenuItem == 'View files.'}"> <h:commandButton value="Button 3" /> </h:form> </h:body> 

When I use <f:ajax render=":menuForm :adminUsersForm :loadInfoForm :viewFilesForm" /> , I get a malformedXML error, on the other hand, when I use <f:ajax render="@all" /> , the correct <h:form> is a rendering.

What's going on here? I read that with ajax we can only display components inside the same form , but if we use :componentID , we can do it using ajax components outside the form.

Thanks in advance, and maybe this is the main question, but I'm very new to JSF and trying to learn.

Answer 1

<f:ajax render> should point to client identifiers that are always present in the JSF-generated HTML DOM tree. This is required because it is client-side JavaScript that needs to update the HTML DOM tree. However, you point it to client identifiers that are not in the HTML DOM tree because they were not provided by JSF.

You need to put these elements with the rendered attribute in the parent component, which is always present in the JSF-generated HTML DOM tree.

Here is one way:

 <h:form id="menuForm"> <h:outputLabel for="menu">Available actions: </h:outputLabel> <h:selectOneMenu id="menu" value="#{menu.mainMenuItem}"> <f:selectItem itemLabel="Select an option..." itemValue="null" /> <f:selectItems value="#{menu.mainMenuItems}" /> <f:ajax render=":menuForm :adminUsers :loadInfo :viewFiles :adminUsersForm :loadInfoForm :viewFilesForm" /> </h:selectOneMenu> </h:form> <h:panelGroup id="adminUsers"> <h:form id="adminUsersForm" rendered="#{menu.mainMenuItem == 'Admin users.'}"> <h:commandButton value="Button 1" /> </h:form> </h:panelGroup> <h:panelGroup id="loadInfo"> <h:form id="loadInfoForm" rendered="#{menu.mainMenuItem == 'Load info.'}"> <h:commandButton value="Button 2" /> </h:form> </h:panelGroup> <h:panelGroup id="viewFiles"> <h:form id="viewFilesForm" rendered="#{menu.mainMenuItem == 'View files.'}"> <h:commandButton value="Button 3" /> </h:form> </h:panelGroup> 

Here is another way (which I recommend more if you really don't need to update the content between the forms):

 <h:form id="menuForm"> <h:outputLabel for="menu">Available actions: </h:outputLabel> <h:selectOneMenu id="menu" value="#{menu.mainMenuItem}"> <f:selectItem itemLabel="Select an option..." itemValue="null" /> <f:selectItems value="#{menu.mainMenuItems}" /> <f:ajax render=":menuForm :otherForms :adminUsersForm :loadInfoForm :viewFilesForm" /> </h:selectOneMenu> </h:form> <h:panelGroup id="otherForms"> <h:form id="adminUsersForm" rendered="#{menu.mainMenuItem == 'Admin users.'}"> <h:commandButton value="Button 1" /> </h:form> <h:form id="loadInfoForm" rendered="#{menu.mainMenuItem == 'Load info.'}"> <h:commandButton value="Button 2" /> </h:form> <h:form id="viewFilesForm" rendered="#{menu.mainMenuItem == 'View files.'}"> <h:commandButton value="Button 3" /> </h:form> </h:panelGroup> 

Note that in both cases I have included the identifiers of all other forms in render . This is due to a bug in JSF Ajax JavaScript (which should be fixed in JSF 2.2). For a detailed explanation, see also Ajax rendering of content that contains a different form .