3 Replies Latest reply on Nov 14, 2008 2:49 PM by aparna mudumbi

    rich:tree onselected issue

    aparna mudumbi Newbie

      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>
      


        • 1. Re: rich:tree onselected issue
          Nick Belaevski Master

          Hi,

          Why do not put confirmation on h:commandLink itself?

          • 2. Re: rich:tree onselected issue
            aparna mudumbi Newbie

             

            "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

            • 3. Re: rich:tree onselected issue
              aparna mudumbi Newbie

              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>