9 Replies Latest reply on Feb 11, 2008 5:06 PM by henry katz

    Problems w/ a4j:commandButton inside ui:include ?

    Tom N Newbie

      So I have a main page that has a table displaying data, and a form that is dynamically shown below when rows are edited/ added. This for is broken into a separate template, and included using the <ui:include> tag. For some reason, the a4j tags inside the form template don't work. What's worse, I have an identical table + included form structure further up on the same page, and that one works!

      Here is an outline of my code...
      Main page: profile.xhtml:

      <ui:composition xmlns="http://www.w3.org/1999/xhtml"
       xmlns:s="http://jboss.com/products/seam/taglib"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:rich="http://richfaces.org/rich"
       xmlns:a4j="http://richfaces.org/a4j"
       template="layout/template.xhtml">
      
      <ui:define name="body">
      
       <rich:panel>
       ...
      
       <!-- THIS WORKS CORRECTLY : -->
      
       <h:form id='deviceConfigSection' styleClass='componentSection'>
       <div class='header'>
       <h2>Device Behaviors</h2>
       <a4j:commandButton value='Add' action='#{componentHandler.editDevice}'
       title='Add a new device behavior to this profile'
       reRender='deviceConfigFormContainer' />
       </div>
      
       <h:dataTable value='#{devices}' var='dc'>
       ...
       </h:dataTable>
      
       <s:div id='deviceConfigFormContainer'>
       <ui:include src='/inc/deviceConfigForm.xhtml' />
       </s:div>
       </h:form>
      
      
       <!-- THE EDIT BUTTON HERE WORKS, BUT A4J BUTTONS INSIDE THIS UI:INCLUDE DO NOT -->
      
       <h:form id='siteServerConfigSection' styleClass='componentSection'>
       <div class='header'>
       <h2>Site Server</h2>
       <a4j:commandButton value='Edit' action='#{componentHandler.editSiteConfig}'
       reRender='siteServerFormContainer' />
       </div>
      
       <h:dataTable value='#{servers}' var='s'>
       ...
       </h:dataTable>
      
       <s:div id='siteServerFormContainer'>
       <ui:include src='/inc/siteServerForm.xhtml' />
       </s:div>
       </h:form>
      
       </rich:panel>
      
      </ui:define>
      </ui:composition>
      


      Included form page: siteServerForm.xhtml
      <s:fragment xmlns="http://www.w3.org/1999/xhtml"
       xmlns:s="http://jboss.com/products/seam/taglib"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:rich="http://richfaces.org/rich"
       xmlns:a4j="http://richfaces.org/a4j"
       rendered='#{showSiteConfigForm}'>
      
       <h:panelGrid columns='2'>
       <!-- form fields -->
      
       <a4j:commandButton value='Save' action='#{componentHandler.updateSiteConfig}'
       reRender='siteServerConfigSection' />
       <a4j:commandButton value='Cancel' action='#{componentHandler.cancel}'
       reRender='siteServerFormContainer' />
       </h:panelGrid>
      </s:fragment>
      


      So when I click one of the a4j buttons in the included form, the request is made to the server, but the method in my backing bean is never actually called! The same link and method call work correctly from inside the first include (inc/deviceConfigForm.xhtml) but not this second one.

      I have gone over this a million times and I cannot figure out the difference between the first form and the second one. I even tried re-ordering them and the deviceConfigForm still works, while the siteServerForm does not.

      Any ideas?

      Thanks in advance.