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

    Problems w/ a4j:commandButton inside ui:include ?

      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.

        • 1. Re: Problems w/ a4j:commandButton inside ui:include ?
          ilya_shaikovsky

          so the links in different forms.. And if you didn't get any validation errors for the first form, but have some in the second - it's expected behaviour.

          Place rich:messages components to your page to check this.

          • 2. Re: Problems w/ a4j:commandButton inside ui:include ?

            Good point. I added a <rich:messages /> tag to the top of my main page, but it doesn't seem to have helped.

            The second button on the form is the cancel button, which I actually don't want to validate the input data anyway. So in that case, how do I make AJAX execute an action when I don't want the input validated?? This seems like a problem since a4j is tied to form submits. Or is there a way to say "don't validate the input" for certain actions?

            In either case, adding that tag does not seem to have helped my case.

            As an additional note, I found that if I move the buttons outside of the include:

            <s:div id='siteServerFormContainer'>
             <ui:include src='/inc/siteServerForm.xhtml' />
             <a4j:commandButton value='Save' action='#{componentHandler.updateSiteConfig}'
             reRender='siteServerConfigSection' />
             <a4j:commandButton value='Cancel' action='#{componentHandler.cancel}'
             reRender='siteServerFormContainer' />
            </s:div>
            

            It works! But wait...

            If I put a s:fragment with a 'rendered' attribute around the buttons, like so...
            <s:div id='siteServerFormContainer'>
             <ui:include src='/inc/siteServerForm.xhtml' />
             <s:fragment rendered='#{showSiteConfigForm}'>
             <a4j:commandButton value='Save' action='#{componentHandler.updateSiteConfig}'
             reRender='siteServerConfigSection' />
             <a4j:commandButton value='Cancel' action='#{componentHandler.cancel}'
             reRender='siteServerFormContainer' />
             </s:fragment>
            </s:div>
            

            It suddenly doesn't work! Now, I know there are issues where the page won't be updated if you're trying to insert data into a non-rendered component, but this fragment is rendered because I can see the buttons! So why would that affect how the request (not response) is made?!

            Thanks again...

            • 3. Re: Problems w/ a4j:commandButton inside ui:include ?

               

              "tomstrummer" wrote:
              The second button on the form is the cancel button, which I actually don't want to validate the input data anyway. So in that case, how do I make AJAX execute an action when I don't want the input validated?? This seems like a problem since a4j is tied to form submits. Or is there a way to say "don't validate the input" for certain actions?


              Nevermind; I realized the 'immediate' attribute solves this problem.

              • 4. Re: Problems w/ a4j:commandButton inside ui:include ?
                freemarket

                Tomstrunner,

                Did you having any other issues when you had embedded ajax functions
                within your ui:include page? I have javascript popup errors when using
                a4j:include where the included pages contain ajax functionality.

                Thanks,
                Henry

                • 5. Re: Problems w/ a4j:commandButton inside ui:include ?

                  a4j:include? Do you mean ui:include? In any case, I'm not sure what I did but the problem went away. :|

                  • 6. Re: Problems w/ a4j:commandButton inside ui:include ?
                    freemarket

                    Hi,
                    Not ui:include, specifically a4j:include. This has additional ajax functionality
                    that the facelet ui:include doesn't have.

                    Yep, I know the feeling when something miraculously goes away - but that hasn't happened yet in my case - so I'm still trying to figure it out.

                    Thanks,
                    Henry

                    • 7. Re: Problems w/ a4j:commandButton inside ui:include ?

                      Actually I never used a4j:include. My original post was using ui:includes. Can you give an example of when you would use a4j:include?

                      • 8. Re: Problems w/ a4j:commandButton inside ui:include ?

                        a4j:include is almost the same as ui:include, but has one more additional feature: it allows to have a partial Ajax navigation. See the livedemo example: http://livedemo.exadel.com/richfaces-demo/richfaces/include.jsf?c=include

                        • 9. Re: Problems w/ a4j:commandButton inside ui:include ?
                          freemarket

                          Sergey,

                          Would you pls be so kind as to address my issue. If you use a4j:include within
                          an a4j:form to perform navigation as detailed by Sergey, in this post,
                          last year:
                          http://jboss.com/index.html?module=bb&op=viewtopic&t=107843

                          is it still required to use a new form within the a4j:included page?

                          Regards,
                          Henry