Component inside <a4j:region> cannot reRender outside parent

[zjda]

Hi,

I use a rich:tree to display object attributes. If an attribute is modified, I want the whole tree are refreshed since some other attributes (e.g. modification time) may be changed by the server. I use <a4j:region> for each treenode because only modified node needs to be submitted. However, <a4j:region> prevents the tree from re-rendering. Here is my simplified code:

<a4j:form id="propertyForm">
<rich:tree id="propertytree" value="#{propertyTree.data}" var="item" switchType="client" width="100%" adviseNodeOpened="#{propertyTree.adviseNodeOpened}" nodeFace="#{item.type}" binding="#{propertyTree.propUiTree}">
 <rich:treeNode type="namespace">
 <h:outputText value="#{item.name}" />
 </rich:treeNode>

 <rich:treeNode type="Date" data="#{item}">
 <h:outputLabel value="#{item.name}:" />
 <h:outputText id="date_property" value="#{item.stringValue}" />
 </rich:treeNode>

 <rich:treeNode type="Text">
 <h:outputLabel value="#{item.name}:" for="text_property" />
 <a4j:region>
 <rich:inplaceInput id="text_property" layout="block" immediate="true" selectOnEdit="true" editEvent="ondblclick" defaultLabel="Double Click to Edit" value="#{item.stringValue}" minInputWidth="200px" rendered="#{item.property.editable}">
 <a4j:support event="onviewactivated" reRender="propertytree"/>
 </rich:inplaceInput>
 </a4j:region>
 </rich:treeNode>
</rich:tree>
</a4j:form>

I can see that getStringValue is called for all tree nodes and returned values are correct. However, all tree nodes, except modified node, are not refreshed. Is it a bug or by design? Is there any workaround?

Thanks,
ZJ

[david.spark]

Hi, I had a similar problem with <a4j:region>. I don't know if mine is the best solution but what I ended up doing was placing the following in the region I wanted to reRender:

<a4j:jsFunction name="rerender" reRender="billingDetails" ajaxSingle="true"/>

and to the a4j:support call in the <a4j:region>, adding:

oncomplete="rerender();"

It works but can start to get messy if there's a lot of things to reRender so I did wonder if there is a better way of doing it.

[zjda]

Thanks, David.

It solves my problem. I also tried to put <a4j:form> inside each node, but it did not work.

Regards,
ZJ

[nbelaevski]

Hello,

Thank you for reporting the problem: https://jira.jboss.org/jira/browse/RF-6493! I've added workaround description to the issue.

[zjda]

Hi Nick,

If I put a <a4j:outputPanel> around the <rich:tree>, the tree get refreshed. However, I got javascript error: "'this.element' is null or not an object" at the third line of the following code:

this.onAjaxSelect=C;
this.element=$(F);
this.element.component=this;
this.inputId=A;
this.input=$(this.inputId);
this.toggleOnClick=B.toggleOnClick;
this.showConnectingLines=B.showConnectingLines;
this.disableKeyboardNavigation=B.disableKeyboardNavigation;
var B=Object.extend({columnCount:0},arguments[1]||{});
this.options=B;
this.getElements();
this.selectionManager=new Tree.SelectionManager(this);
this.selectionManager.restoreSelection();
this["rich:destructor"]="destroy";

"this" in the above code points to "propertyviewer:propertyForm:propertytree"

Here is my simplified code:

<a4j:form id="propertyForm">
 <a4j:outputPanel id="propertyPanel">
 <rich:tree id="propertytree" value="#{propertyTree.data}" var="item" switchType="client" style="zoom:1;" width="100%" adviseNodeOpened="#{propertyTree.adviseNodeOpened}" nodeFace="#{item.type}" >
 <rich:treeNode type="namespace">
 <h:outputText value="#{item.name}" />
 </rich:treeNode>

 <rich:treeNode type="Text">
 <a4j:region>
 <h:outputLabel value="#{item.name}:" />
 <rich:inplaceInput id="text_property" layout="block" immediate="true" selectOnEdit="true" editEvent="ondblclick" defaultLabel="Double Click to Edit" value="#{item.stringValue}" minInputWidth="200px">
 <a4j:support event="onviewactivated" reRender="propertyPanel"/>
 </rich:inplaceInput>
 </a4j:region>
 </rich:treeNode>
 </rich:tree>
 </a4j:outputPanel>
</a4j:form>

I also tried to move <a4j:outputPanel> to outside of <a4j:form>, it did not help. If I use <a4j:jsFunction> as David suggested, I don't see the problem.

Thank you for your time,
ZJ

[ilya_shaikovsky]

As I understand this error occurs after update? Please check then also a4j:log for this request. If there are any errors?

[zjda]

Hi Ilya,

I have some more issues with IE (Version 7 and Javascript debug enabled) when I add a4j:log. When I set popup="false", the log messages are display in the same window, but it does not allow me to select to copy. When I change popup="true", I got "Error: Out of memory " everytime I press "Ctrl" key. Firefox does not have the problems. I can see an error in the log:

...
debug[16:14:24,328]: Evaluate script replaced area in document: // (function() { var tree = new Tree("propertyviewer:j_id136:propertytree", "propertyviewer:j_id136:propertytree:input", "client", { onselect: "", onexpand: "", oncollapse: "", oncontextmenu: "" }, function(event) { A4J.AJAX.Submit('_viewRoot','propertyviewer:j_id136',event,{'similarityGroupingId':'propertyviewer:j_id136:propertytree','parameters':{'propertyviewer:j_id136:propertytree:selectedNode':event.selectedNode} ,'actionUrl':'/ipark/faces/pages/user/workspace.jsp'} ); return false; }, {'showConnectingLines':true} ); tree.drop = function(event,drag){var options = {'similarityGroupingId':'propertyviewer:j_id136:propertytree','parameters':{'propertyviewer:j_id136:propertytree':'propertyviewer:j_id136:propertytree'} ,'actionUrl':'/ipark/faces/pages/user/workspace.jsp'} ;options.parameters['dropTargetId'] = 'propertyviewer:j_id136:propertytree';Object.extend(options.parameters, drag.getParameters());var dzOptions = this.getDropzoneOptions(); if (dzOptions.ondrop) { if (!dzOptions.ondrop.call(this, event)) return; };A4J.AJAX.Submit('_viewRoot','propertyviewer:j_id136',event,options);}; }()); //
error[16:14:24,328]: . Error message: this.element has no properties
debug[16:14:24,328]: Evaluate script replaced area in document:
debug[16:14:24,328]: Script evaluation succeeded
debug[16:14:24,328]: call getElementById for id= org.ajax4jsf.oncomplete
debug[16:14:24,328]: Processing updates finished, no oncomplete function to call

On IE the error messages are a little different:

error[16:17:07, 625]: .Error message: Could not complete the operation due to error 80020101.
debug[16:17:07, 625]: Evaluate script replaced area in document:
error[16:17:07, 625]: .Error message: Invalid argument.
debug[16:17:07, 625]: call selectSingleNode for in=org.ajax4j.oncomplete
debug[16:17:07, 625]: Processing updates finished, no oncomplete function to call

The message does not make sense to me.

Thanks for you help.
-ZJ

[akshog]

Hi David,

I'm using a <rich:DataTable> which has a4j:status for filtering, pagination and items per page.

I would like to have a different status for filtering. So I inserted the filtering region into an a4j:region.

The table was not being re-rendered. I tried the solution posted by you, but still the table is not being re-rendered.

Here is my code

<rich:dataTable id="table" ...>

     <rich:column id="name" filterMethod="#{bean.filter}">

          <f:facet name="header">

               <a4j:region>

                    <h:panelGroup>

                         <h:outputText .../>

                         <h:inputText ...>

                              <a4j:jsFunction name="reRenderer" reRender="table, ds"/>

                              <a4j:support event="onkeyup" action="#{bean.resetCurrentPageAfterFiltering}" ignoreDupResponses="true" requestDelay="700" oncomplete="reRenderer();"/>

                         </h:inputText>

                    </h:panelGroup>

               </a4j:region>

          </f:facet>

     </rich:column>

...

</rich:dataTable>

Any help would be great.