7 Replies Latest reply: Jun 12, 2012 7:15 AM by VC RSS

    Dynamic action on radio group in tabular form

    942492
      Hi,

      I'm very new to APEX and I've tried searching the web, but I can't seem to find a good answer for my problem. I have a page in APEX with a tabular form with 6 columns. The last column is supposed to show/hide a button for each row based on the value of a radio group (static LOV) with 2 options in column 5. I want to do this with a dynamic action on the radio group, but I'm having trouble figuring out how to do this. Since the radio group is in a tabular form it's not an item and so I can't just select it in the dynamic action wizard. I figure I have to use a JQuery selector here, but my knowledge of this is very limited.

      I've created the button in the select statement for the tabular form like this:
      select 
      "ROWID",
      "DATA_COLLECTION_ID",
      "ID",
      "VARIABLE_NO",
      "VARIABLE_NAME",
      "DATA_TYPE",
      '<a href="javascript:epf.dialog.open(''f?p=&APP_ID.:18:&SESSION.::::P18_ROWID,P18_ID:'||ROWID||','||ID||''',800,700);" id="Category" class="epf-button"><span class="epf-tooltip" data-epf-tooltip="Definer kategorier for denne variabelen"></span>Definer Kategori</a>' category
      from "MATH_USER"."STA_VARIABLES"
      where "DATA_COLLECTION_ID" = :P17_ID
      Any help would be greatly appreciated.

      - Patrik
        • 1. Re: Dynamic action on radio group in tabular form
          VC
          Hi Patrik,

          Yes you cannot do this with built in dynamic action itself, use custom JavaScript code to do that


          Use this working example to start with and change the JavaScript code as per your requirement
          http://apex.oracle.com/pls/apex/f?p=46417:11

          Login test/test

          and see this {message:id=10381537}
          • 2. Re: Dynamic action on radio group in tabular form
            942492
            Hi VC,

            When you say "add it in the page header", where would that be? Is it a process in the before/after header? I don't really know where I can change the page source in Apex.

            I'm using Apex 4.1.1 in Google Chrome if that helps.

            - Patrik
            • 3. Re: Dynamic action on radio group in tabular form
              VC
              Edit your page > HTML Header

              http://docs.oracle.com/cd/E23903_01/doc/doc.41/e21674/bldr_pg_edit_att.htm#HTMDB25150

              See Incorporating JavaScript into an Application
              • 4. Re: Dynamic action on radio group in tabular form
                942492
                I have now put this JavaScript code in the HTML Header section under Edit page like you said:
                function show_hide_button(pThis) {
                 //get the current row index on change
                 var currIndex = $('select[name="'+pThis.name+'"]').index(pThis);
                 // check current items value (return value of radio group)
                 if (pThis.value=='Kat') {
                  // if true change the value of column f06
                  $('input[id="category"]')[currIndex].hide();;
                 }
                 else{
                  $('input[id="category"]')[currIndex].show();;
                 }
                }
                It still doesn't work for me. From what I understood from the "Incorporating JavaScript into an application" page I should put the code in the JavaScript section. I tried that too, but nothing changed. So now I'm thinking there is something wrong with the code itself?

                - Patrik

                Edited by: patrikfridberg on Jun 12, 2012 4:51 AM

                Edited by: patrikfridberg on Jun 12, 2012 4:53 AM
                • 5. Re: Dynamic action on radio group in tabular form
                  VC
                  patrikfridberg wrote:
                  $('input[id="category"]')[currIndex].hide();;
                  where does this category come from? and you are referencing id attribute which can only handle one row.
                  You must make the jquery selector based on column name (inspect your column using firebug/chrome and see the name attribute of the column form element, it will in format f0x).

                  Look at my original code below and i am controlling a column with name f01
                  >
                  It still doesn't work for me. From what I understood from the "Incorporating JavaScript into an application" page I should put the code in the JavaScript section. I tried that too, but nothing changed. So now I'm thinking there is something wrong with the code itself?
                  YES

                  this is my original code
                  function test(pThis) {
                   //get the curren row index on change
                   var currIndex = $('select[name="'+pThis.name+'"]').index(pThis);
                   if (pThis.value=='20') {
                    $('input[name="f01"]')[currIndex].style.display = 'block';
                   }
                   else {
                    $('input[name="f01"]')[currIndex].style.display = 'none';
                   }
                  }
                  • 6. Re: Dynamic action on radio group in tabular form
                    942492
                    Thank you for your help so far.
                    I'm gonna make some changes and see if I can get it to work.

                    Note: "category" refers to the id of the button that I put in my select statement you can see in my first post.

                    - Patrik
                    • 7. Re: Dynamic action on radio group in tabular form
                      VC
                      patrikfridberg wrote:
                      'a href="javascript:epf.dialog.open(''f?p=&APP_ID.:18:&SESSION.::::P18_ROWID,P18_ID:'||ROWID||','||ID||''',800,700);" id="Category" class="epf-button"><span class="epf-tooltip" data-epf-tooltip="Definer kategorier for denne variabelen"></span>Definer Kategori</a>' category
                      this is wrong, why do you want to render same ID for all rows (ID is unique identifier)

                      Reproduce you issue on apex.oracle.com if you find any issues?