jQuery cascading Values in ApEx Tabular Form

1. Create a Dynamic Action to Cascade first column value

2. Type: jQuery Selector

3. True Action, Execute Javascript

Screen Shot 2013-06-27 at 21.40.45

 

4. Insert the following  Code

—–

row_id = $(this.triggeringElement).attr(‘id’).substr(4);
var v_code = $(this.triggeringElement).val();

$(“#f03_” + row_id).val(v_code);

—–

fo3 is the sequence of the tabular form column which will be set.

 

Screen Shot 2013-06-27 at 21.40.57

5. Add the jQuery Selector class to the column.

Screen Shot 2013-06-27 at 21.41.27

6. At this point you can say I’m done, but the values will not be populated to all rows. Therefore we add the following:

7. Create a Dynamic Action on Page Load

 

Screen Shot 2013-06-27 at 21.41.57

 

8.  add  the following to the Java Script Code.

$(“td[headers=’EMD_MASTER_ID’] select”).change();

NOTE: Here I’m using select, because I have a select list which I want to copy. If you have text values you can use input instead of select.

 

Screen Shot 2013-06-27 at 21.42.07

 

 

The result looks like this:

Screen Shot 2013-06-27 at 21.54.16

 

You can use the same construction to create a cascading LOV in tabular form.

Any questions? drop me an email.

download the application from here