11 Replies Latest reply on Jan 20, 2009 7:43 AM by Ilya Shaikovsky

    Ajax Partial Page Submit

    Greg Hinkle Newbie

      Hi there. I'm having some trouble getting one of my forms to do an ajax submit without needing to restore the entire view.

      I've tried many different combinations of using a4j:region, a4j:htmlCommandLink and a4j:outputPanel, but the entire view is still trying to load.


      <a4j:region renderRegionOnly="true" id="testRegion">
       <a4j:form ajaxSingle="true" >
       <a4j:commandLink ajaxSingle="true" reRender="testRegion"
       actionListener="#{UserPreferencesUIBean.setSummaryPanelDisplayState}"
       immediate="true">
       Update
       </a4j:commandLink>
       </a4j:form>
      </a4j:region>



      The reason I need to only load part of the view is that I can't pass the necessary parameters needed to rebuild the entire view. This ajax form is part of a template page that is then used on many different pages in the app. (e.g. a search box in the header) Any advice on how to do this or otherwise set a form value on the server from an ajax request outside the rest of the view update?


      Using RF 3.2.2 SR1

        • 1. Re: Ajax Partial Page Submit
          Nick Belaevski Master

          Hello,

          http://livedemo.exadel.com/richfaces-demo/richfaces/region.jsf?c=region&tab=usage - The area(s) marked for update might be re-rendered directly from the component tree rather than involving jsp (xhtml) page processing if selfRendered attribute is set to true.

          Have you tried selfRendered="true"?

          • 2. Re: Ajax Partial Page Submit
            Alexey Kakunin Newbie

            Actually, during submitting ajax-request, only current form is submitted, and only components, specified in reRender is rerendered.

            With a4j:region you can submit with ajax-request only part of form, inside this region.

            So:
            1. a4j:region should be inside a4j:form;
            2. a4j:region is responsbile for what data is submitted, not what data is rerendered.
            3. immediate=true avoid submitting any data
            4. ajaxSingle - submitted only data from specific component.

            I'm not sure how restoring is working in this case.

            So, I can suggests try to place region under form, and remove ajaxSignle and immediate. Probably it will help

            • 3. Re: Ajax Partial Page Submit
              Greg Hinkle Newbie

              Thanks for the responses, but this still isn't working.


              I tried both suggestions. With a regular form inside a selfRendered region according to the example from the demo site. Other components are still trying to load and failing.

              <a4j:region selfRendered="true" id="splitPaneRegion">
               <div style="position: absolute; top: 50px; left: 50px; z-index: 20">
              
               <h:form>
               <h:inputText id="leftResourceNavStateField" value="#{UserPreferencesUIBean.leftResourceNavState}">
               <a4j:support event="onblur" reRender="testDataOuput"/>
               </h:inputText>
               </h:form>
              
               <h:panelGroup id="testDataOuput">
               <h:outputText value="#{UserPreferencesUIBean.leftResourceNavState}"/>
               </h:panelGroup>
               </div>
              </a4j:region>
              



              Same issue when I try to use a a4j:region inside an aj4:form.


              <a4j:form>
               <a4j:region selfRendered="true" id="splitPaneRegion2">
               <div style="position: absolute; top: 200px; left: 50px; z-index: 20">
              
               <h:inputText id="leftResourceNavStateField2" value="#{UserPreferencesUIBean.leftResourceNavState}">
               <a4j:support event="onblur" reRender="testDataOuput2"/>
               </h:inputText>
              
               <h:panelGroup id="testDataOuput2">
               <h:outputText value="#{UserPreferencesUIBean.leftResourceNavState}"/>
               </h:panelGroup>
               </div>
               </a4j:region>
              </a4j:form>
              


              • 4. Re: Ajax Partial Page Submit
                Sergey Smirnov Master

                 

                "akakunin" wrote:

                So:
                1. a4j:region should be inside a4j:form;
                2. a4j:region is responsbile for what data is submitted, not what data is rerendered.
                3. immediate=true avoid submitting any data
                4. ajaxSingle - submitted only data from specific component.



                Unfortunately, all four statements are false.

                • 5. Re: Ajax Partial Page Submit
                  Nick Belaevski Master

                   

                  "ghinkle" wrote:
                  Hi there. I'm having some trouble getting one of my forms to do an ajax submit without needing to restore the entire view.
                  In fact, special input containing view state is rendered for each form. So the view should be restored successfully even if the form is somewhere inside template. You do not need to pass parameters to restore view. And the whole view is restored at each request, not the part of it.

                  How do you detect that the entire view is still trying to load? What do you mean by saying "Other components are still trying to load and failing."? What are these components?

                  • 7. Re: Ajax Partial Page Submit
                    Greg Hinkle Newbie

                     

                    "nbelaevski" wrote:
                    ...
                    You do not need to pass parameters to restore view. And the whole view is restored at each request, not the part of it.

                    How do you detect that the entire view is still trying to load? What do you mean by saying "Other components are still trying to load and failing."? What are these components?



                    So I have two .xhtml files. One is the details.xhtml and one is the template.xhtml. details.xhtml references the template with <ui:composition template=...

                    in the template I have the above code that is meant to show a search box in the header (or other functionality) that i want to submit without reloading any of the rest of the page.

                    But the details.xhtml is outputting data from a managed bean... let's say with <h:output value="#{ResourceUIBean.name}/>. The failure I see during the ajax request is that the ResourcUIBean component (which is request scope) is being constructed. That constructor fails on the managed bean because it is trying to find a request parameter to load the necessary data.





                    • 8. Re: Ajax Partial Page Submit
                      Greg Hinkle Newbie

                      As another piece of data I found a couple of places where I was able to make this work and I've been able to simplify it down to a small example.

                      The following example displays a stack trace when you leave the input box. The ajax form submission is cause the ResourceUIBean referenced lower down to be instantiated. This only happens if I have the rendered="#{ResourceUIBean... on the h:outputText.

                      Am I using region wrong?

                      <html
                       xmlns="http://www.w3.org/1999/xhtml"
                       xmlns:h="http://java.sun.com/jsf/html"
                       xmlns:a4j="http://richfaces.org/a4j">
                      
                      <body>
                      
                       <a4j:region selfRendered="true">
                       <h:form>
                       <h:panelGrid columns="2">
                       <h:inputText id="myinput" value="#{UserPreferencesUIBean.leftResourceNavState}">
                       <a4j:support event="onblur" reRender="outtext"/>
                       </h:inputText>
                       <h:outputText id="outtext" value="#{UserPreferencesUIBean.leftResourceNavState}"/>
                       </h:panelGrid>
                       </h:form>
                       </a4j:region>
                      
                       Resource name: <h:outputText value="#{ResourceUIBean.name}"/><br/>
                      
                       Up percentage:
                       <h:outputText value="#{ResourceUIBean.availabilitySummary.upPercentage}"
                       rendered="#{ResourceUIBean.availabilityType.name == 'UP'}}"/>
                      
                      </body>
                      
                      </html>



                      • 9. Re: Ajax Partial Page Submit
                        Nick Belaevski Master

                        Ok, I've experimented with 3.2.2.SR1. Conclusions:

                        <html
                         xmlns="http://www.w3.org/1999/xhtml"
                         xmlns:h="http://java.sun.com/jsf/html"
                         xmlns:a4j="http://richfaces.org/a4j">
                        
                        <body>
                        
                         <a4j:region renderRegionOnly="true">
                         <h:form>
                         <h:panelGrid columns="2">
                         <h:inputText id="myinput" value="">
                         <a4j:support event="onblur" reRender="outtext"/>
                         </h:inputText>
                         <h:outputText id="outtext" value=""/>
                         </h:panelGrid>
                         </h:form>
                         </a4j:region>
                        
                         Resource name: <h:outputText value="#{testRequestBean.rendered}"/><br/>
                        
                         Up percentage:
                         <h:outputText value="#{testRequestBean.rendered}"
                         rendered="#{testRequestBean.rendered}"/>
                        
                        </body>
                        
                        </html>
                        work as it should for me. So setting renderRegionOnly="true" should work without beans initialization. The only case when it does not behave in such way that I could reproduce is when Facelets source page gets modified with server running. Then the behavior described is reproduced for me due to the fact that auto-generated component identifiers change on rendering and subsequent request processing.

                        Also we've observed such behavior deploying application built in another timezone to server located in another. Please check server console/log for messages like this:
                        20.01.2009 1:10:23 com.sun.facelets.impl.DefaultFacelet refresh
                        INFO: Facelet[/pages/forum1.xhtml] was modified @ 1:10:18, flushing component applied @ 1:05:39


                        So: try to add ids explicitly, also set renderRegionOnly="true" and check if now it works ok. If no, then can you please prepare simple demo application reproducing the issue? You can send it to nbelaevski at exadel dot com

                        • 10. Re: Ajax Partial Page Submit
                          Greg Hinkle Newbie

                          Hi there. renderRegionOnly="true" was the part I was missing. (Had it mixed up with selfRendered) I thought I had tested both, but I think when I tested that it was on pages that had dataTable. Which brings me to my next question...

                          This still fails on with any page that has rich:dataTable as per RF-3341. That is unfortunately on nearly everyone of our pages. I tried to use the listed workaround, but I'm still seeing the problem listed above.

                          From what I read, I should just put a aj4:region with renderRegionOnly="true" inside the form that surrounds the dataTable. Is that correct? In the case below, an ajax update of the top form is causing the bottom form to try and reload the dataModel.

                          <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                           xmlns:h="http://java.sun.com/jsf/html"
                           xmlns:f="http://java.sun.com/jsf/core"
                           xmlns:ui="http://java.sun.com/jsf/facelets"
                           xmlns:c="http://java.sun.com/jstl/core"
                           xmlns:onc="http://jboss.org/on/component"
                           xmlns:onf="http://jboss.org/on/function"
                           xmlns:a4j="https://ajax4jsf.dev.java.net/ajax"
                           xmlns:rich="http://richfaces.ajax4jsf.org/rich">
                          
                          
                          <a4j:region renderRegionOnly="true" selfRendered="true">
                           <h:form>
                           <h:panelGrid columns="2">
                           <h:inputText id="myinput4" value="#{UserPreferencesUIBean.leftResourceNavState}">
                           <a4j:support event="onblur" reRender="outtext4" />
                           </h:inputText>
                           <h:outputText id="outtext4" value="#{UserPreferencesUIBean.leftResourceNavState}"/>
                           </h:panelGrid>
                           </h:form>
                          </a4j:region>
                          
                          
                          
                          
                           <h:form id="EventsForm" >
                          
                           <a4j:region renderRegionOnly="true">
                           <ui:param name="eventHistoryDataModel" value="#{EventHistoryUIBean.dataModel}" />
                          
                           <rich:dataTable binding="#{EventHistoryUIBean.dataTable}"
                           id="eventHistoryDataTable"
                           value="#{eventHistoryDataModel}"
                           rows="#{PageControl.EventsHistoryList.pageSize}"
                           var="item">
                          
                           <rich:column>
                           <f:facet name="header">source</f:facet>
                           <h:outputText value="#{item.sourceLocation}" />
                           </rich:column>
                           </rich:dataTable>
                          
                           <onc:metric binding="#{EventHistoryUIBean.metric}"
                           optionList="m,h,d" />
                          
                           </a4j:region>
                           </h:form>
                          
                          </ui:composition>



                          • 11. Re: Ajax Partial Page Submit
                            Ilya Shaikovsky Master

                             

                             <a4j:region renderRegionOnly="true">
                             <a4j:commandButton value="Just submit"></a4j:commandButton>
                             </a4j:region>
                             <rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="20" reRender="ds" id="simpletable">
                            
                            


                            using this code data table model list not fetched.