Data cache for dynamic tab

[zjda]

Hi, When I double-click a tree node, I want to add a tab to a rich:tabPanel which has a rich:editor to open th tree node content.

<a4j:support event="ondblclick" action="#{navTree.openObjectAction}"
reRender="mainFrame">
</a4j:support>

The action method is to add the node to the openedNodes list, and the "mainFrame" has tabPanel and c:forEach to create the dynamic tab:

<rich:tabPanel switchType="client" binding="#{navTree.tabPanel}">
 <c:forEach items="${navTree.openedNodes}" var="node">
 <rich:tab name="#{node.objectID}" label="#{node.name}>
...
 </rich:tab>
 </c:forEach>
</rich:tabPanel>

I set the switchType to "client" because I want the client to hold all modified contents until I click the save button to upload them to the server.

Everything works well. However, when I double-click another tree node, it goes back to the server to repopulate all tabs and all modified data on the client are lost.

Is it possible to add a new tab on client and use a4j:jsFunction to get data from the server to populate the new tab without touching the existing tabs?

I saw that there is a suggestion to use ajax mode and ontableave="saveData()" to save the tab data on server. It is not best solution for my case since there is a lot of data going back and forward and it consumes the server memory. And I don't know how to trigger saveData() from double-click event on the tree node.

Any suggestion will be appreciated.

-ZJ

[zjda]

Looks like that I cannot cache the modified data on the client and I have to send them to the server. Therefore, I added a4f:jsFunction to each tab:

<rich:tab name="#{node.objectID}" label="#{node.name}" ontableave="saveData();">
 <h:form>
 <a4j:jsFunction name="saveData" eventsQueue="queue" />
...

The data is sent to the server when switching active tab. However, I don't know how to call the saveData() function from the a4j:support which is used to handle double-click event for treenode:

<a4j:support event="ondblclick" action="#{navTree.openObjectAction}"
 reRender="mainFrame" endered="#{navTree.selectedNode.contentable}" immediate="true">
 <a4j:actionparam name="view" value="shared/contentTabView.xhtml" assignTo="#{navTree.view}" />
</a4j:support>

Please help. Thanks,
-ZJ

[nbelaevski]

Hello ZJ,

You can do the following:

<a4j:support onsubmit="saveData()" ... />

[nbelaevski]

Note, you should add eventsQueue="queue" to a4j:support in order to prevent concurrent requests.

[zjda]

Hi Nick,

Thank you for you answers. However, it does not work well. The problem is that the tabPanel parent form is not always submitted. First time when I double-click a tree node, it adds a tab. I type a string in the text field, then double-click another node. the text field is uploaded to server. However, when I do same thing again, the text field is not uploaded to the server anymore. Switching active tab always submits the form. Also, if I double-click same node twice, the second time the form is submitted. Do I miss something? Does the nodeSelectListener cause any problem?

Here is my code:

<rich:treeNode type="#{item.typeName}" acceptedTypes="#{item.allowedChildTypeString}" dropValue="#{treeNode}" dragIndicator=":treeindicator"
dragType="#{item.typeName}" nodeSelectListener="#{navTree.nodeSelectListener}" data="#{treeNode}" >
 <rich:dndParam name="label" type="drag">#{item} </rich:dndParam>
 <h:outputText value="#{item.name}" />

<a4j:support event="ondblclick" action="#{navTree.openObjectAction}" onsubmit="saveData();" reRender="mainFrame" rendered="#{item.contentable}" immediate="true" eventsQueue="contentQueue">
</a4j:support>
...

<a4j:form ajaxSubmit="true">
 <a4j:jsFunction name="saveData" eventsQueue="contentQueue" />
 <h:outputText value="No object opened." rendered="#{empty navTree.openedNodes}" />
 <rich:tabPanel id="contentTab" switchType="ajax" binding="#{navTree.tabPanel}" rendered="#{not empty navTree.openedNodes}">
 <c:forEach items="${navTree.openedNodes}" var="node">
 <rich:tab name="#{node.bjectID}" abel="#{node.name}">
 <h:inputText value="#{node.test}" />
...

-ZJ

[zjda]

I figured it out ...

I set the active tab in the nodeSelectListener

this.tabPanel.setSelectedTab(this.selectedNode.getData().getObjectID());

After I removed the line of code, saveData is called and the tab data is uploaded to the server when double-click a tree node.

Thanks for help.
ZJ