rich:tree onselected issue

[amudumbi]

Hello,


I have a tree component which is used as left navigation bar for an application. Each of the tree nodes are h:commandLink. I want to show a confirmation box when a user clicks on command link if something changed in right side form which user did not save. But I can't get it to work. I have put the code below.

On cancel of confirm box, it seems OK. It toggles the selection on the navigation and stays on same page. But if I press OK on cofirm box, it still stays on same page. If I use ajaxSubmitSelection, behaviour is more vague. If I am trying to use firebug to go through flow of javascript, situation gets worse. It stops working altogether, no form submit happens. May be some timing issue?

May be I am missing something fundamental here. Any help is greatly appreciated.

Thanks
-Aparna

<ui:composition>
<script type="text/javascript">
 <!--
 Edit screen sets this variable when there are
 user changes on the screen
 -->
 var somethingChanged = false;
 function confirmChanges(){
 if(somethingChanged){
 if(!confirm("#{msgs['changes.confirm']}"))
 return false;
 }
 return true;
 }
</script>

 <rich:panel id="nav" header="#{msgs['nav.header.title']}" styleClass="nav" headerClass="navHeader">

 <h:form style="height:100%">
 <rich:tree style="width:200px"
 switchType="client" value="#{navBean.root}"
 var="item" nodeFace="#{item.type}"
 nodeSelectListener="#{navBean.processSelection}"
 stateAdvisor="#{navBean}" onselected="if(!confirmChanges()) return false; ">

 <rich:treeNode type="ROOT" >
 <h:commandLink action="dslList" value="#{item.name}"/>
 </rich:treeNode>

 <rich:treeNode type="DSL" >
 <h:commandLink action="edit" value="#{item.name}" />
 </rich:treeNode>

 </rich:tree>
 </h:form>
 </rich:panel>

</ui:composition>

[nbelaevski]

Hi,

Why do not put confirmation on h:commandLink itself?

[amudumbi]

"nbelaevski" wrote:
Hi,

Why do not put confirmation on h:commandLink itself?

Problem with that is, if user clicks cancel, it still is showing the newly selected node as selected, by drawing a box around it. If I put it on select, at least it toggles. Ideally I don't event want toggle. It shouldn't change the selected node on UI till user decides one way or the other.

I don't know, whatever I try seems to break something else. That is why I feel I may be missing something fundamental to begin with.

Thanks

[amudumbi]

Not sure exactly why it has to be this way, but I took clues from the following blog entry http://mkblog.exadel.com/?p=161 and the following code seems to work so far.

-Thanks

<ui:composition>
<script type="text/javascript">
 <!--
 Edit screen sets this variable when there are
 user changes on the screen
 -->
 var somethingChanged = false;
 function confirmChanges(){
 if(somethingChanged){
 if(!confirm("#{msgs['changes.confirm']}"))
 return false;
 }
 return true;
 }

 function dslList(){
 if(!confirmChanges())
 return false;
 goToList();
 return false;
 }

 function dslEdit() {
 if(!confirmChanges())
 return false;
 goToEdit();
 return false;

 }
</script>

 <rich:panel id="nav" header="#{msgs['nav.header.title']}" styleClass="nav" headerClass="navHeader">

 <h:form style="height:100%">
 <rich:tree style="width:200px"
 switchType="client" value="#{navBean.root}"
 var="item" nodeFace="#{item.type}"
 nodeSelectListener="#{navBean.processSelection}"
 stateAdvisor="#{navBean}" >

 <rich:treeNode type="ROOT" onselected="return dslList()">
 <h:commandLink value="#{item.name}" />
 </rich:treeNode>

 <rich:treeNode type="DSL" onselected="return dslEdit()">
 <h:commandLink value="#{item.name}" />
 </rich:treeNode>

 </rich:tree>
 <a4j:jsFunction name="goToEdit" action="edit"/>
 <a4j:jsFunction name="goToList" action="dslList"/>

 </h:form>
 </rich:panel>

</ui:composition>