This discussion is archived
7 Replies Latest reply: Jun 12, 2012 5:15 AM by VC RSS

Dynamic action on radio group in tabular form

942492 Newbie
Currently Being Moderated
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 Guru
    Currently Being Moderated
    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 Newbie
    Currently Being Moderated
    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 Guru
    Currently Being Moderated
    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 Newbie
    Currently Being Moderated
    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 Guru
    Currently Being Moderated
    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 Newbie
    Currently Being Moderated
    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 Guru
    Currently Being Moderated
    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?

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points