6 Replies Latest reply: Mar 11, 2013 4:08 PM by kp2000 RSS

    hide region based on condition

    kp2000
      Hello
      I have region 1,region 2, region 3.

      If only region 1 and 2 are populated then show region 3.

      region 1 is full of text fileds.
      region2 is having check boxes. All 3 of these should be checked as 'YES'. If anyone of this is cleared OR checked as 'NO', then
      region 3 should be hidden.

      If region 1 is filled and region2's 3 check boxes checked as 'YES' then region 3 can be visible


      please advise

      thanks
      kp
        • 1. Re: hide region based on condition
          Denes Kubicek
          Use Dynamic Actions for that.

          Denes Kubicek
          -------------------------------------------------------------------
          http://deneskubicek.blogspot.com/
          http://www.apress.com/9781430235125
          http://apex.oracle.com/pls/apex/f?p=31517:1
          http://www.amazon.de/Oracle-APEX-XE-Praxis/dp/3826655494
          -------------------------------------------------------------------
          • 2. Re: hide region based on condition
            kp2000
            Hi Denes
            Thanks for the tip, But in Dynamic actions i found the following .

            I created a dynamic action.I covered all fields from region 1 and 2 and create condition like
            items not null.
            But for my specific situation, how will i be able to say region 1 items are not null and region 2's items=YES

            please advise

            thanks
            kp
            • 3. Re: hide region based on condition
              Ramesh P, Oracle APEX Developer
              Hi,
              Lets say in region1, region2, region3 are having static ids as reg1, reg2, reg3

              Region1 Items, reg_item11, reg_item12
              Region2 Items reg_item21m reg_item22
              <script type="text/javascript">
              function hideRegion3(){
                   var regItem11 = $("#REG_ITEM11").val();
                   var regItem12 = $("#REG_ITEM12").val();
                   var regItem21 = $v2('REG_ITEM21');  //As these are checkboxes which returns YES or NO OR NULL
                   var regItem22 = $v2('REG_ITEM22');  //As these are checkboxes which returns YES or NO OR NULL
                   if(regItem11 != '' && regItem12 != '' && regItem21 == 'YES' && regItem22 == 'YES'){
                        $("#reg3").show();
                   }else{
                        $("#reg3").hide();
                   }
              }
              $(document).ready(function(){
                   hideRegion3();
              });
              </script>
              • 4. Re: hide region based on condition
                kp2000
                Ramesh
                Great..Thanks for the tip..
                please let me know where exactly i need to follow this logic

                Is it on the region html header level? or Page Header?
                Or like a dynamic function?

                thanks
                kp
                • 5. Re: hide region based on condition
                  Denes Kubicek
                  You should create dynamic actions triggered by changing the corresponding check boxes. The action is execute javascript.

                  Denes Kubicek
                  -------------------------------------------------------------------
                  http://deneskubicek.blogspot.com/
                  http://www.apress.com/9781430235125
                  http://apex.oracle.com/pls/apex/f?p=31517:1
                  http://www.amazon.de/Oracle-APEX-XE-Praxis/dp/3826655494
                  -------------------------------------------------------------------
                  • 6. Re: hide region based on condition
                    kp2000
                    denise/Ramesh,
                    First, Thanks a lot to help me in moving forward.
                    My code is as below..But i think may need some tweak..this is not working yet..please help

                    my regions static ids
                    region1=>reg1
                    region1=>reg2
                    region1=>reg3

                    I created a dynamic action (advanced)=>Event='Change'
                    =>Selection type=item(s)
                    =>item(s)=p1_location_name,p1_city,P23,P24
                    =>condition=No condition
                    =>Action='Execute Java Script' [Code is attached as below]
                    =>Fire On page load='YES'
                    =>EvenstScope='Bind'


                    <script type="text/javascript">
                    function hideOrderInformation(){
                         var regItem11 = $("#P1_LOCATION_NUM").val();
                         var regItem12 = $("#P1_LOCATION_NAME").val();
                         var regItem13 = $("#P1_CITY").val();
                         var regItem14 = $("#P1_STATE").val();
                         var regItem15 = $("#P1_PHONE").val();
                         var regItem16 = $("#P1_NAME").val();
                         var regItem17 = $("#P1_EMAIL_ADDRESS").val();
                         var regItem18 = $("#P1_VMAIL").val();
                         var regItem21 = $v2('P1_21');
                         var regItem22 = $v2('P22');
                         var regItem23 = $v2('P23');
                         var regItem24 = $v2('P24');
                         var regItem25 = $v2('P25');
                         var regItem26 = $v2('P1_X26');
                                   
                         if(regItem11 != '' && regItem12 != ''
                         && regItem13 != ''&& regItem14 != ''
                         && regItem15 != ''&& regItem16 != ''
                         && regItem17 != ''&& regItem18 != ''
                         && regItem21 == 'YES' && regItem22 == 'YES'
                         && regItem23 == 'YES' && regItem24 == 'YES'
                         && regItem25 == 'YES' && regItem26 == 'YES')
                         {
                              $("#reg3").show();
                         }else{
                              $("#reg3").hide();
                         }
                    }
                    $(document).ready(function(){
                         hideOrderInformation();
                    });
                    </script>



                    appreciate your help

                    kp

                    Edited by: user8612301 on Mar 11, 2013 2:08 PM