5 Replies Latest reply on Jul 7, 2010 11:22 AM by Ivan Latysh

    Dynamically hide/unhide elements?

    Vibhor Seth Level 1

      Hello

       

      I have generated dynamic controls on form through XML, now I want to hide/unhide the elements based on click of particular item.

       

      Also i have added the click event on the desired elements and trying the following in function

       

      this["sampleElementID"].visible = false;( in sampleElementid i am passing the id of the element which needs to be hidden)

       

      Is there is any method like document.getElementbyId in action script???

       

      ( also tried get getChildByName("sampleElementID").visible = false; but it does not work)

       

      Help needed....

       

      Thank in advance!

        • 1. Re: Dynamically hide/unhide elements?
          BhaskerChari Level 4

          Hi Vibhor Seth,

           

          You need to use this.getChildByName("sampleElementID").visible = false;  if you are adding the elements directly to the component page.

           

          If you are adding elements say to a container (ex: canvas of id="myCanvas") then you need to use the following way:

           

          myCanvas.getChildByName("sampleElementID").visible = false;

           

          Also try to set the id and name for your elements when you add it to the stage..

           

          element.id = "myElement";

          element.name = "myElement";

          and try to use any of the relevant line of code:

          this.getChildByName("myElement").visible = false;

          myCanvas.getChildByName("myElement").visible = false; (This you need to use if you are adding your elements to any container of id myCanvas)

           

          If it doesn't solve your problem then please post sample code reproducing your problem..

           

          If this post answers your question or helps, please kindly mark it as such.


          Thanks,

          Bhasker Chari

          • 2. Re: Dynamically hide/unhide elements?
            Vibhor Seth Level 1

            Hello

             

            Here is my code

             

            var sampleFormItem:FormItem = new FormItem();

             

            var sampleTextInput:TextInput=new TextInput();
            sampleTextInput.id="smpleTxtIpt ";
            sampleTextInput.text="sample Text Input ";
            sampleTextInput.name = "smpleTxtIntName";

             

            sampleFormItem.addElement(sampleTextInput);

            //adding in form
            sampleForm.addElement(sampleFormItem);


            in function i am trying

            sampleForm.getChildByName("smpleTxtIntName").visible = false;

             

            but this is not giving success......

             

             

            Thanks for your time.

            • 3. Re: Dynamically hide/unhide elements?
              BhaskerChari Level 4

              Hi Vibhor Seth,

               

              please find the working code below:

               

                  var sampleForm:Form = new Form();
                  var sampleFormItem:FormItem = new FormItem();
                  var sampleTextInput:TextInput = new TextInput();
                 
                  sampleTextInput.id="smpleTxtIpt";
                  sampleTextInput.name="smpleTxtIpt";
                 
                  sampleTextInput.text = "sample Text Input";
                 
                  sampleFormItem.addElement(sampleTextInput);
                  //adding in form
                  sampleForm.addElement(sampleFormItem);
                  addElement(sampleForm);
                 
                  sampleFormItem.getChildByName("smpleTxtIpt").visible = false;

               

               

              In the code you have posted you have used different names for id and name....Try to use the same names for both id and name ...however it is not compulsory...but its good practice...

               

              Also you have used sampleForm.getChildByName("smpleTxtIntName").visible = false; But you should be using the below line of code:

               

              sampleFormItem.getChildByName("smpleTxtIpt").visible = false;

               

              In your code you are trying to use the getChildByName() method on the Form tag but you should be using on the FormItem container.

               

              Note: Remember you can access the child elements by using the getChildByName() only for the elements which are direct childs of a container but not the from the parent of parent container.

               

               

              So by the AS code you created the following structure is created:

               

              <mx:Form id="sampleForm">

                   <mx:FormItem id="sampleFormItem">

                        <mx:TextInput id="smpleTxtIpt" name="smpleTxtIpt" />

                   </mx:FormItem>

              </mx:Form>

               

              So if you want to make TextInput visible false..then you need to use ..... sampleFormItem.getChildByName("smpleTxtIpt").visible = false;

               

              but not  sampleForm.getChildByName("smpleTxtIpt").visible = false; since smpleTxtIpt is direct child of sampleFormItem.

               

              Hope now things are clear for you...

               

               

              If this post answers your question or helps, please kindly mark it as such.


              Thanks,

              Bhasker Chari

              1 person found this helpful
              • 4. Re: Dynamically hide/unhide elements?
                Vibhor Seth Level 1

                Thank you for sharing information.

                 

                I got the concept but as I have mentioned earlier I am generating the form elements dynamically. I have used "sampleFormItem" everywhere to insert the label and textInputs, so not able to gain success from sampleFormItem.getChildByName("smpleTxtIpt").visible = false;

                 

                Is there any other way to search a element or to make it "visible = false" depending upon id/name of element??

                 

                or should i have to make sampleFormItem unique for every node displayed on form?

                 

                Please suggest.

                 

                 

                Thanks for your time.

                • 5. Re: Dynamically hide/unhide elements?
                  Ivan Latysh Level 1

                  Since you are generating the form, keep a list (ArrayCollection) of all generated elements, it is very cheap. That's what I do, this way it is much easier to find element that you need.

                  Than you can use the filter function to pick elements of certain type, for instance all checkboxes, or all combo boxes.

                   

                  The other option is to cycle through all containers under your main container to look for the element you need to disable, but I have found it very cumbersome and unreliable.

                   

                  Hope that helps.

                  1 person found this helpful