11 Replies Latest reply: Mar 14, 2014 8:36 AM by Nicolette RSS

    Obtaining / Using radio button value in Apex plugin for dynamic action

    NewApexCoder

      Apex 4.2

       

      I am working on a plugin that needs to perform a dynamic action based on the value of a selected radio button. I'm thinking its more so the syntax that is causing me problems.

       

      I have a page item (P127_DISPOSITION) reprsented as a radio group. There are three cases for the radio group: CREATE, UPDATE, and DISCARD. The LOV source for the page item is:

      STATIC2:Create New Inspection;CREATE,Update Existing Inspection;UPDATE,Discard;DISCARD

       

      I have a plugin that shows a map and some other neat toolbars and tools and other nifty stuff. When a user clicks the radio button under UPDATE, the map should hide some of those tools. That part isn't so bad as I have the code for that. Below is what I have or tried so far:

       

       

      $("#P127_DISPOSITION").change(function() {
      if ( $("#P127_DISPOSITION").val == 'UPDATE' )
      $("#draw_point").hide();
      $("label[for=\draw_point\"]").hide();
      } else if ( $("#P127_DISPOSITION").val == 'CREATE')
      $("#draw_point").show();
      $("label[for=\draw_point\"]").show();
      } else {
      $("#draw_point").show();
      $("label[for=\draw_point\"]").show();
      }
      });
      

       

       

      The statements inside the IF statements are not the problem. I have tested and been using those statements in my plugin for other reasons. Those statements just hide or show the toolbar. But I am trying to make that action happen dynamically upon a radio button being selected. So I know there has to be some issues within how I'm using the onChange function or in the actual IF statement itself.

       

      ANy help on this would be greatly appreciated. Thanks in advance.

        • 1. Re: Obtaining / Using radio button value in Apex plugin for dynamic action
          Nicolette

          NewApexCoder

           

          If you use your browsers web developer tools to inspect the html that displays the radiogroup. You will notice that the radiogroup is actually build up of multiple items one for every option. Where the id's of the options are like ITEM_NAME _0 ITEM_NAME_1 etc.

           

          Use apex.item('pNd').getValue() to get the value in apex 4.2. Else use $v('pNd').

           

          Nicolette

          • 2. Re: Obtaining / Using radio button value in Apex plugin for dynamic action
            NewApexCoder

            As I'm trying different combinations and still no luck, I'm not sure what use would it be or where to put ITEM_NAME_0, ITEM_NAME_1, etc at if I'm using 'pNd'

            • 3. Re: Obtaining / Using radio button value in Apex plugin for dynamic action
              Nicolette

              NewApexCoder

              NewApexCoder wrote:

               

              As I'm trying different combinations and still no luck, I'm not sure what use would it be or where to put ITEM_NAME_0, ITEM_NAME_1, etc at if I'm using 'pNd'

              You put ITEM_NAME_0 nowhere. Apex builder those that and that is the reason $('#ITEM_NAME').val() doesn't work.

              Instead you should use apex.item('ITEM_NAME').getValue(). (or $v('ITEM_NAME') if your not on apex 4.2)

              Where ITEM_NAME is P127_DISPOSITION in your case


              Nicolette

              • 4. Re: Obtaining / Using radio button value in Apex plugin for dynamic action
                NewApexCoder

                Yea....so I've tried a million combinations now and nothing is working. I'll have to keep browsing the web for a clear cut example. Thanks for your help though

                • 5. Re: Obtaining / Using radio button value in Apex plugin for dynamic action
                  Nicolette

                  NewApexCoder

                   

                  Can you set up what you have so far on apex.oracle.com.

                  The radiogroup and dynamic action should be enough.

                   

                  Because apex.item().getValue() should work. Maybe something else is going wrong.

                   

                  Nicolette

                  • 6. Re: Obtaining / Using radio button value in Apex plugin for dynamic action
                    NewApexCoder

                    It may be a little much trying to set it up on apex.oracle.com. I will if I have time. Because of the nature of this project, it is restricted to outside eyes (as far as the plugin code). It's weird because I have tackled this issue of a dynamic change on selecting a particular radio button using apex dynamic actions, but when I try to incorporate a function to do so inside a a pl/sql based plugin, there's problems....sigh...

                    • 7. Re: Obtaining / Using radio button value in Apex plugin for dynamic action
                      Nicolette

                      NewApexCoder

                       

                      I don't think your problem is with the dynamic action but with how the html that is generated bij the plugin looks like.

                      If the html that is generated is not a straight forward input type you need to write your own javascript code that overrights the default apex.item().getValue().

                       

                      To explain what I mean lets take a look a the native radiogroup and popup lov.

                      The html code of a radiogroup of page item  P40_DISPLAY_RETURN looks like

                      <fieldset class="radio_group" id="P40_DISPLAY_RETURN" tabindex="-1">
                          <legend class="hideMeButHearMe">Different display and return value</legend>
                          <input type="radio" value="F" name="p_t02" id="P40_DISPLAY_RETURN_0"><label for="P40_DISPLAY_RETURN_0">Cat</label><br>
                          <input type="radio" checked="checked" value="C" name="p_t02" id="P40_DISPLAY_RETURN_1"><label for="P40_DISPLAY_RETURN_1">Cow</label><br>
                          <input type="radio" value="D" name="p_t02" id="P40_DISPLAY_RETURN_2"><label for="P40_DISPLAY_RETURN_2">Dog</label><br>
                          <input type="radio" value="L" name="p_t02" id="P40_DISPLAY_RETURN_3"><label for="P40_DISPLAY_RETURN_3">Lion</label>
                        </fieldset>
                      

                      As you see the element with the id P40_DISPLAY_RETURN is the fieldset. Because fieldset doesn't have a value attribute neiter $x('P40_DISPLAY_RETURN').value and $('P40_DISPLAY_RETURN').val()

                      will give you the value. apex.item('P40_DISPLAY_RETURN').getValue() will return the C.

                       

                      And for the popup lov of page item P40_POPUP_LOV the html looks like

                      <input type="hidden" value="4" id="P40_POPUP_LOV_HIDDENVALUE" name="p_t03">
                      <fieldset tabindex="-1" class="lov" id="P40_POPUP_LOV_fieldset">
                        <table cellspacing="0" cellpadding="0" border="0" id="P40_POPUP_LOV_holder" class="lov" role="presentation" summary="">
                          <tbody>
                            <tr>
                              <td class="lov">
                                <input type="text" onfocus="this.blur()" disabled="disabled" value="OHare, Edward &quot;Butch&quot;" maxlength="4000" size="30" class="popup_lov" id="P40_POPUP_LOV">
                              </td>
                              <td>
                                <a href="#">
                                  <img class="uPopupLOVIcon" title="Popup List of Values: Popup lov" alt="Popup List of Values: Popup lov" src="/i/f_spacer.gif">
                                </a>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </fieldset>
                      

                      Now the element P40_POPUP_LOV is an input item but the value is the display value. So $x('P40_POPUP_LOV').value and $('P40_POPUP_LOV').val() will you give you the display value 'OHare, Edward "Butch"'. While apex.item('P40_POPUP_LOV').getValue() returns the return value 4.

                       

                      Taking a look at the javascript code for getValue for both you see that the functions are actually different and depend on the widget the item is.

                      getValue : function() {
                        // get checked input value, in the context of the fieldset
                        // note: can't use $lRadios here because this is a reference
                        // to the initial state
                        var lReturn, $lRadio;
                        if ( pType === "checkbox" ) {
                            // checkbox will return an array
                            lReturn = [];
                            $( ":checked", lFieldset).each( function() {
                                lReturn[ lReturn.length ] = this.value;
                            });
                        } else {
                            // radio group should return a single value
                            $lRadio = $( pSelector + " :checked", apex.gPageContext$ );
                            if ($lRadio.length === 0) {
                            // check if the length of the jQuery object is zero (nothing checked)
                            // if so return an empty string.
                                lReturn = "";
                            } else {
                                // otherwise return the value
                                lReturn = $lRadio.val();
                            }
                        }
                        return lReturn;
                      }
                      
                      getValue      : function() {
                        var lReturn;
                        // if input is enterable (popup lov), then get the displayed value
                        if (gEnterable) {
                          lReturn =  $('#' + this.id, apex.gPageContext$).val();
                        } else {
                          // popup key lovs store their value in a hidden field
                          lReturn = $('#' + this.id + '_HIDDENVALUE', apex.gPageContext$).val();
                        }
                        return lReturn;
                      }     
                      

                      The code for the radiogroup you can find in widget.checkboxAndRadio.js. The code for the popup is located in the file widget.popupLov.js

                      The items are initiated with the following code

                      function(){apex.widget.checkboxAndRadio("#P40_DISPLAY_RETURN","radio",{"ajaxIdentifier":"06A5EA1467EF04AA71C990F06E8E015D7E794D0E73FF70890760EF8C179D8966","action":""});}
                      function(){apex.widget.popupLov("#P40_POPUP_LOV",{"ajaxIdentifier":"9643FC0FCD4393877A1D4074E066DD3BFCF1DC0BAA893DF773C30530841610A7","optimizeRefresh":true,"filterWithValue":true,"windowParameters":"Scrollbars=1,resizable=1,width=400,height=450","inputField":"NOT_ENTERABLE"});}
                      

                      This code is also generated by the pl/sql plugin code using apex_javascript API.

                       

                      Depending on how the html of your plugin radiogroup looks like you might be able to use the code of apex.widget.checkboxAndRadio to get your plugin working.

                       

                      For some more background information on how to work with the widget javascript structure How to use the widget factory

                       

                      Now the above is all an explanation what might be going on and the method of correct that. It doesn't tell you the exact code that your plugin will need. I hope that it's a start to get your plugin working.

                      And will working on the getValue also have a look at the setValue, hide, show, enable etc functions.

                       

                      Nicolette

                      • 8. Re: Obtaining / Using radio button value in Apex plugin for dynamic action
                        NewApexCoder

                        Thank you so much. You don't know how much it means to me to have your help. I think it has paid off as well. I have come up with the following and it works and was exaclty what I was looking for:

                         

                         

                        $("#P13_GROUP").on("change", function () {
                        $val = apex.item( "P13_GROUP").getValue();
                        if ($val == "UPDATE") {
                        do this
                        } else if ($val == "DISCARD") {
                        do that
                        } else of ($val == "CREATE") {
                        do those
                        }
                        })
                        

                         

                        Again, the syntax was throwing me off; not knowing when to use the pound sign, or if I need to use a double quote or single quote. It was a battle. But thanks to your input and the website you linked me to in your previous posts regarding Javascript API's, I was able to come up with something. Thanks agian.

                        • 9. Re: Obtaining / Using radio button value in Apex plugin for dynamic action
                          Nicolette

                          NewApexCoder

                           

                          Again, the syntax was throwing me off; not knowing when to use the pound sign,

                          The pound sign £ ? or do you mean the dollar sign $.

                          There is nothing special with the dollar sign. Just a character that you can use in or as your function name.

                          In the code $("#P13_GROUP") the dollar sign is a shortname for jQuery.

                          jQuery("#P13_GROUP") would mean exactly the same.

                          In the context of apex you could also use apex.jQuery("#P13_GROUP")

                          The dollar sign probably comes from the desire to use as few characters as possible to make the js files as small as possible. Be aware that jQuery isn't the only javascript library that uses $ as shortcut name. By using apex.jQuery you are sure that the jQuery that is used is the one shipped with apex. Even when a different version of jQuery is added to the application.

                          or if I need to use a double quote or single quote

                          Single or double quotes in javascript they are replaceable. Meaning that $("#P13_GROUP") equals $('#P13_GROUP').

                          Handy when you have a quote in your string.

                          largeText = "Don't tell me what to do" or

                          largeText = 'Joe said "Welcome home" to Julie'

                           

                          I'm curious though where have you placed this code.

                          Using a dynamic action with

                          Event Change

                          Selection Type Item

                          Item P13_GROUP

                          Action Execute JavaScript Code

                          Code

                          var $val = apex.item( "P13_GROUP").getValue();
                          if ($val == "UPDATE") {
                          do this
                          } else if ($val == "DISCARD") {
                          do that
                          } else of ($val == "CREATE") {
                          do those
                          }  
                          

                          Would do exactly the same as your code.

                          You could also use the selection type jQuery selector with the selector #P13_GROUP

                           

                          Declaring a variable with var in your javascript code helps with debugging as you can watch the variable values. At least firebug with firefox works like that.

                           

                          Nicolette

                          • 10. Re: Obtaining / Using radio button value in Apex plugin for dynamic action
                            NewApexCoder

                            Primarily the syntax using the  pound sign. Whenever referencing/using page items in the Apex environment, more than most times, you have to reference/use it as #PXX_MY_PAGE_ITEM. When testing line by line of my code. I saw that I was getting an error when I included the pound sign in my value assignment statement. But then looking at the link you provided me with, I realized you don't need it (When using apex.item('PAGE_ITEM').

                             

                            Also, I was aware of how javascript treats single quotes and double quotes, but when I applied that same 'sense of logic' to my code, I'd get errors.

                             

                            This code has been placed inside of a pl/sql code block for a plugin inside of the Apex environment. Thats why is was a little tricky for me because I wasn't sure of the correct syntax. I have created a dynamic action on a radio button before using the Apex wizard and it was pretty simple. But again, it was just a little tricky for me, and plus, I really hadn't used " apex.item " before. Never had a real need to.

                            • 11. Re: Obtaining / Using radio button value in Apex plugin for dynamic action
                              Nicolette

                              NewApexCoder

                               

                              #PAGE_ITEM#  Is used in templates. Or as column value substitution in report columns.

                              #PAGE_ITEM    When used as an jQuery selector to get the element with id PAGE_ITEM.

                              &PAGE_ITEM.  When used as a substitution string outside of a template.

                              :PAGE_ITEM     Bind variable used in pl/sql code

                               

                              #Something without a closing # is jQuery selector syntax for "get me the html element with id Something".

                               

                              Nicolette