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

Ajax Partial Page Submit

ghinkle Jan 19, 2009 9:56 AM

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

nbelaevski Jan 19, 2009 11:03 AM (in response to ghinkle)

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"?
Actions
2. Re: Ajax Partial Page Submit

akakunin Jan 19, 2009 11:05 AM (in response to ghinkle)

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
Actions

3. Re: Ajax Partial Page Submit

ghinkle Jan 19, 2009 12:49 PM (in response to ghinkle)

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

sergeysmirnov Jan 19, 2009 2:40 PM (in response to ghinkle)

"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.
Actions
5. Re: Ajax Partial Page Submit

nbelaevski Jan 19, 2009 2:54 PM (in response to ghinkle)

"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?
Actions
6. Re: Ajax Partial Page Submit

nbelaevski Jan 19, 2009 2:55 PM (in response to ghinkle)

BTW, can this be the case: https://jira.jboss.org/jira/browse/RF-3341?
Actions
7. Re: Ajax Partial Page Submit

ghinkle Jan 19, 2009 3:53 PM (in response to ghinkle)

"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.
Actions

8. Re: Ajax Partial Page Submit

ghinkle Jan 19, 2009 4:49 PM (in response to ghinkle)

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

nbelaevski Jan 19, 2009 6:17 PM (in response to ghinkle)
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
Actions

10. Re: Ajax Partial Page Submit

ghinkle Jan 19, 2009 11:43 PM (in response to ghinkle)

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 Jan 20, 2009 7:43 AM (in response to ghinkle)
<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.
Actions

Go to original post