Hello!
I have implemented a tree visual component using dataTable and ajax4jsf
links for node collapsing/expanding like this:
<h:panelGroup id="treePanel">
<h:dataTable id="tablePanel"
columnClasses="tableText,tableText,tableText,tableText" var="info"
value="#{mbPlanBean.treeHandler.dataModel}" width="600"
>
<h:column>
<t:div id="droppableSpace" >
<f:verbatim>
<hr size="1" noshade style="border: 1px
dashed #999999;
color: #999999;
background-color: #999999;
height: 1px;">
</f:verbatim>
</t:div>
<t:outputText value="#{info.indent}"
escape="false;"/>
<t:div id="draggableSpace"
style="display:inline;cursor:move">
<a4j:commandLink immediate="true"
reRender="tablePanel" actionListener="#{mbPlanBean.treeHandler.openNode}"
rendered="#{!info.isOpen and info.hasChildren}">
<t:graphicImage style="border: 0"
url="/images/plus.gif" />
</a4j:commandLink>
<a4j:commandLink immediate="true"
reRender="tablePanel" actionListener="#{mbPlanBean.treeHandler.closeNode}"
rendered="#{info.isOpen and info.hasChildren}">
<t:graphicImage style="border: 0"
url="/images/minus.gif" />
</a4j:commandLink>
<t:graphicImage url="/images/spacer.gif"
height="11" width="11" rendered="#{!info.hasChildren}"/>
<h:outputText value="#{info.name}"
style="#{info.isLeafType? 'color:orange': ''}"/>
<h:outputText value=" (#{info.username})"
rendered="#{info.isLeafType}" style="color:blue"/>
</t:div>
</h:column>
<h:column>
<t:popup id="popup" styleClass="table"
closePopupOnExitingElement="false"
closePopupOnExitingPopup="true"
displayAtDistanceX="-5"
displayAtDistanceY="-5">
<t:graphicImage url="/images/cmd.jpg"/>
<f:facet name="popup">
<h:panelGroup>
<h:panelGrid>
<a4j:commandLink id="addBranch"
styleClass="commonLink"
rendered="#{info.isUnitType}"
reRender="detailsForm"
immediate="true"
actionListener="#{mbPlanBean.processAddBranch}">
<h:outputText value="Add
component" styleClass="commonLink"/>
</a4j:commandLink>
<a4j:commandLink id="addLeaf"
styleClass="commonLink"
rendered="#{info.isUnitType}"
reRender="detailsForm"
immediate="true"
actionListener="#{mbPlanBean.processAddTeam}">
<h:outputText value="Add team"
styleClass="commonLink"/>
</a4j:commandLink>
<a4j:commandLink id="attachUser"
styleClass="commonLink"
rendered="#{info.isLeafType}"
reRender="detailsForm"
immediate="true"
actionListener="#{mbPlanBean.processSelectUser}">
<h:outputText value="User"
styleClass="commonLink"/>
</a4j:commandLink>
</h:panelGrid>
</h:panelGroup>
</f:facet>
</t:popup>
</h:column>
</h:dataTable>
</h:panelGroup>
As you could see, there is a popup component in the second column. In the
beginning (when page is shown) there are 3 nodes visible and the
corresponding popups are shown fine:
+Node A
- Node B
+Node C
When a node is expanded, the overall number of visible nodes increases:
- Node A
+ Node AA
- Node B
+Node C
The popups for the first 3 nodes are shown fine again (Node A, Node AA, Node
B) but when the 4th popup is to be shown, the following js error occurs:
"formPlan_3AtablePanel_3A3popupPopup is undefined".
The error occurs in IE and not in Firefox.
On node expansion the a4j log shows the following:
debug[13:34:53,471]: Full response content:
<?xml version="1.0"?>
<html lang="en_US"
xmlns="http://www.w3.org/1999/xhtml";><head><title></title><meta
name="Ajax-Update-Ids" content="formPlan:tablePanel" /><meta
id="Ajax-Response" name="Ajax-Response" content="true" /><script
type="text/javascript"
src="/recoveryPlanner/faces/a4j.res/org.ajax4jsf.framework.ajax.AjaxScript">
</script></head><body><table id="formPlan:tablePanel" width="600"><tbody
id="formPlan:tablePanel:tbody_element"><tr><td class="tableText"><div
id="formPlan:tablePanel:0:droppableSpace"><hr size="1" noshade="noshade"
style="border: 1px dashed #999999; color:
#999999; background-color: #999999;
height: 1px;" /></div>      <div
id="formPlan:tablePanel:0:draggableSpace"
style="display:inline;cursor:move"><a href="#"
id="formPlan:tablePanel:0:_idJsp20" name="formPlan:tablePanel:0:_idJsp20"
onclick="A4J.AJAX.Submit('_viewRoot','formPlan',event,{'parameters':{'formPlan:tablePanel:0:_idJsp20':'formPlan:tablePanel:0:_idJsp20'}});return
false;"><img src="/recoveryPlanner/images/plus.gif" style="border: 0"
/></a><span style="">Branch 1</span></div></td><td class="tableText"><script
type="text/javascript">//<![CDATA[
var formPlan_3AtablePanel_3A0_3ApopupPopup=new
orgApacheMyfacesPopup('formPlan:tablePanel:0:popup',-5,-5);
//
//]]>
</script><img src="/recoveryPlanner/images/cmd.jpg" onmouseover="/*
generated code */formPlan_3AtablePanel_3A0_3ApopupPopup.display(event);"
/><div style="position:absolute;display:none;" class="table"
id="formPlan:tablePanel:0:popup"
onmouseover="formPlan_3AtablePanel_3A0_3ApopupPopup.redisplay();"
onmouseout="formPlan_3AtablePanel_3A0_3ApopupPopup.hide();"><table
border="0"><tbody><tr><td><a href="#" id="formPlan:tablePanel:0:addBranch"
name="formPlan:tablePanel:0:addBranch"
onclick="A4J.AJAX.Submit('_viewRoot','formPlan',event,{'parameters':{'formPlan:tablePanel:0:addBranch':'formPlan:tablePanel:0:addBranch'}});return
false;" class="commonLink"><span class="commonLink">Add
component</span></a></td></tr><tr><td><a href="#"
id="formPlan:tablePanel:0:addLeaf" name="formPlan:tablePanel:0:addLeaf"
onclick="A4J.AJAX.Submit('_viewRoot','formPlan',event,{'parameters':{'formPlan:tablePanel:0:addLeaf':'formPlan:tablePanel:0:addLeaf'}});return
false;" class="commonLink"><span class="commonLink">Add
team</span></a></td></tr></tbody></table></div></td></tr><tr><td
class="tableText"><div id="formPlan:tablePanel:1:droppableSpace"><hr
size="1" noshade="noshade" style="border: 1px dashed #999999;
color: #999999; background-color: #999999;
height: 1px;" /></div>      <div
id="formPlan:tablePanel:1:draggableSpace"
style="display:inline;cursor:move"><a href="#"
id="formPlan:tablePanel:1:_idJsp22" name="formPlan:tablePanel:1:_idJsp22"
onclick="A4J.AJAX.Submit('_viewRoot','formPlan',event,{'parameters':{'formPlan:tablePanel:1:_idJsp22':'formPlan:tablePanel:1:_idJsp22'}});return
false;"><img src="/recoveryPlanner/images/minus.gif" style="border: 0"
/></a><span style="">Branch 2</span></div></td><td class="tableText"><script
type="text/javascript">//<![CDATA[
var formPlan_3AtablePanel_3A1_3ApopupPopup=new
orgApacheMyfacesPopup('formPlan:tablePanel:1:popup',-5,-5);
//
//]]>
</script><img src="/recoveryPlanner/images/cmd.jpg" onmouseover="/*
generated code */formPlan_3AtablePanel_3A1_3ApopupPopup.display(event);"
/><div style="position:absolute;display:none;" class="table"
id="formPlan:tablePanel:1:popup"
onmouseover="formPlan_3AtablePanel_3A1_3ApopupPopup.redisplay();"
onmouseout="formPlan_3AtablePanel_3A1_3ApopupPopup.hide();"><table
border="0"><tbody><tr><td><a href="#" id="formPlan:tablePanel:1:addBranch"
name="formPlan:tablePanel:1:addBranch"
onclick="A4J.AJAX.Submit('_viewRoot','formPlan',event,{'parameters':{'formPlan:tablePanel:1:addBranch':'formPlan:tablePanel:1:addBranch'}});return
false;" class="commonLink"><span class="commonLink">Add
component</span></a></td></tr><tr><td><a href="#"
id="formPlan:tablePanel:1:addLeaf" name="formPlan:tablePanel:1:addLeaf"
onclick="A4J.AJAX.Submit('_viewRoot','formPlan',event,{'parameters':{'formPlan:tablePanel:1:addLeaf':'formPlan:tablePanel:1:addLeaf'}});return
false;" class="commonLink"><span class="commonLink">Add
team</span></a></td></tr></tbody></table></div></td></tr><tr><td
class="tableText"><div id="formPlan:tablePanel:2:droppableSpace"><hr
size="1" noshade="noshade" style="border: 1px dashed #999999;
color: #999999; background-color: #999999;
height: 1px;"
/></div>            <div
id="formPlan:tablePanel:2:draggableSpace"
style="display:inline;cursor:move"><img
src="/recoveryPlanner/images/spacer.gif" height="11" width="11" /><span
style="color:orange">A little yellow leaf</span> <span
style="color:blue">()</span></div></td><td class="tableText"><script
type="text/javascript">//<![CDATA[
var formPlan_3AtablePanel_3A2_3ApopupPopup=new
orgApacheMyfacesPopup('formPlan:tablePanel:2:popup',-5,-5);
//
//]]>
</script><img src="/recoveryPlanner/images/cmd.jpg" onmouseover="/*
generated code */formPlan_3AtablePanel_3A2_3ApopupPopup.display(event);"
/><div style="position:absolute;display:none;" class="table"
id="formPlan:tablePanel:2:popup"
onmouseover="formPlan_3AtablePanel_3A2_3ApopupPopup.redisplay();"
onmouseout="formPlan_3AtablePanel_3A2_3ApopupPopup.hide();"><table
border="0"><tbody><tr><td><a href="#" id="formPlan:tablePanel:2:attachUser"
name="formPlan:tablePanel:2:attachUser"
onclick="A4J.AJAX.Submit('_viewRoot','formPlan',event,{'parameters':{'formPlan:tablePanel:2:attachUser':'formPlan:tablePanel:2:attachUser'}});return
false;" class="commonLink"><span
class="commonLink">User</span></a></td></tr></tbody></table></div></td></tr><tr><td
class="tableText"><div id="formPlan:tablePanel:3:droppableSpace"><hr
size="1" noshade="noshade" style="border: 1px dashed #999999;
color: #999999; background-color: #999999;
height: 1px;" /></div>      <div
id="formPlan:tablePanel:3:draggableSpace"
style="display:inline;cursor:move"><img
src="/recoveryPlanner/images/spacer.gif" height="11" width="11" /><span
style="">Branch 3</span></div></td><td class="tableText"><script
type="text/javascript">//<![CDATA[
var formPlan_3AtablePanel_3A3_3ApopupPopup=new
orgApacheMyfacesPopup('formPlan:tablePanel:3:popup',-5,-5);
//
//]]>
</script><img src="/recoveryPlanner/images/cmd.jpg" onmouseover="/*
generated code */formPlan_3AtablePanel_3A3_3ApopupPopup.display(event);"
/><div style="position:absolute;display:none;" class="table"
id="formPlan:tablePanel:3:popup"
onmouseover="formPlan_3AtablePanel_3A3_3ApopupPopup.redisplay();"
onmouseout="formPlan_3AtablePanel_3A3_3ApopupPopup.hide();"><table
border="0"><tbody><tr><td><a href="#" id="formPlan:tablePanel:3:addBranch"
name="formPlan:tablePanel:3:addBranch"
onclick="A4J.AJAX.Submit('_viewRoot','formPlan',event,{'parameters':{'formPlan:tablePanel:3:addBranch':'formPlan:tablePanel:3:addBranch'}});return
false;" class="commonLink"><span class="commonLink">Add
component</span></a></td></tr><tr><td><a href="#"
id="formPlan:tablePanel:3:addLeaf" name="formPlan:tablePanel:3:addLeaf"
onclick="A4J.AJAX.Submit('_viewRoot','formPlan',event,{'parameters':{'formPlan:tablePanel:3:addLeaf':'formPlan:tablePanel:3:addLeaf'}});return
false;" class="commonLink"><span class="commonLink">Add
team</span></a></td></tr></tbody></table></div></td></tr></tbody></table><span
id="ajax-update-ids"><input type="hidden" name="jsf_sequence" value="3"
/><input id="org.ajax4jsf.view.state" name="org.ajax4jsf.view.state"
type="hidden" /></span></body></html>
and then:
debug[13:34:53,580]: Evaluate script replaced area in document:
//
var formPlan_3AtablePanel_3A0_3ApopupPopup=new
orgApacheMyfacesPopup('formPlan:tablePanel:0:popup',-5,-5);
//
//
debug[13:34:53,580]: Evaluate script replaced area in document:
//
var formPlan_3AtablePanel_3A1_3ApopupPopup=new
orgApacheMyfacesPopup('formPlan:tablePanel:1:popup',-5,-5);
//
//
debug[13:34:53,580]: Evaluate script replaced area in document:
//
var formPlan_3AtablePanel_3A2_3ApopupPopup=new
orgApacheMyfacesPopup('formPlan:tablePanel:2:popup',-5,-5);
//
//
debug[13:34:53,580]: Evaluate script replaced area in document:
//
var formPlan_3AtablePanel_3A3_3ApopupPopup=new
orgApacheMyfacesPopup('formPlan:tablePanel:3:popup',-5,-5);
//
//
That is, for all I know, there should be no difference between
formPlan_3AtablePanel_3A0_3ApopupPopup,
formPlan_3AtablePanel_3A1_3ApopupPopup,
formPlan_3AtablePanel_3A2_3ApopupPopup and
formPlan_3AtablePanel_3A3_3ApopupPopup handling.
I hope someone can help me solve that cause I am generally happy with
everything else I have tried with ajax4jsf and MyFaces and I would really
would like to use the combination in the future.
Any help would be appreciated.
Thanks!
Jana Parvanova
