This discussion is archived
3 Replies Latest reply: Oct 24, 2012 12:52 AM by Tom Petrus RSS

Dynamic action on checkbox using jQuery selectors

scott.wesley Guru
Currently Being Moderated
Aim: Have a classic report with a checkbox for each record that fires a dynamic action. I'd like to source the relevant ID/value within Javascript (ultimately PL/SQL)

Consider a classic report using the following query
SELECT label
,apex_item.checkbox
  (p_idx   => 15 -- f42
  ,p_value => id
  ,p_attributes => 'id="f15_'||id||'" class="xyz"'
  ) chk
FROM   my_table
Define a dynamic action with
Event: Click
Selection type: jQuery selector
jQuery selector: .xyz
No condition
Scope:Bind

I have an action executing javascript
var me = this.triggeringElement;
console.log('me:'||me);
console.log('name:'||me.attr('name') );
console.log('id:'||me.attr('id') );
console.log('value:'||me.prop('val'));
Affected elements Selection type: Triggering element

When I run the page and check a box, the DA fires, but all output shown in the console log is blank.
I've tried copious variations to get this right, such as using $(this.triggeringElement)

These pages make me feel confident I have the syntax right
http://stackoverflow.com/questions/12038392/oracle-apex-checkbox-to-manipulate-other-values-when-checked-unchecked
http://iadviseblog.wordpress.com/2011/08/24/get-triggering-element-in-da/

But my values are still null?! Anyone know what I've missed?

Apex 4.1.1

Scott
  • 1. Re: Dynamic action on checkbox using jQuery selectors
    Tom Petrus Expert
    Currently Being Moderated
    var me = this.triggeringElement;
    console.log('me:'||me);
    console.log('name:'||me.attr('name') );
    console.log('id:'||me.attr('id') );
    console.log('value:'||me.prop('val'));
    <ul>
    <li>Concatenation in javascript is with +* and not *||* (which means OR)</li>
    <li>Also, this.triggeringElement is a reference to the DOM element, it is not a jQuery object. So wrapping it in $() is required when you wish to access properties through jQuery.</li>
    <li>.prop('val') won't work. You need to check for the existence of a property-line attribute, which in case of a checkbox could be "checked".</li>
    <li>dynamic action on a report: use scope Live to prevent functionality from working when the report is refreshed/paginated</li>
    </ul>
    var me = $(this.triggeringElement);
    console.log('me:'+me);
    console.log('name:'+me.attr('name') );
    console.log('id:'+me.attr('id') );
    console.log('value:'+me.prop('checked'));
  • 2. Re: Dynamic action on checkbox using jQuery selectors
    scott.wesley Guru
    Currently Being Moderated
    Did you hear that sound? It was the sound of me kicking myself really really hard.

    It seems old habits die hard, regards || vs +
    I've been trapped with that before.

    I was fairly happy with my understanding of wrapping with $(), it just wasn't responding how I expected because of the concatenation issue.

    I was using multiple forms of output for the sheer bruteness - trying to see if anything would pipe up!

    I thought I'd need to use live- there won't be any pagination, but ultimately I will be refreshing the region.

    Thanks for stating the obvious :-)
  • 3. Re: Dynamic action on checkbox using jQuery selectors
    Tom Petrus Expert
    Currently Being Moderated
    No problem, we all go there from time to time :-)

Legend

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