Thursday, 6 September 2012

Using jQuery selector in APEX

The more I extend my development repertoire in APEX, the more I feel like I'm becoming a web developer as well as an Oracle technologist.

I'm still expanding my understanding on the use of jQuery, but every day I feel happier about it and see what such an amazing tool it is to extend APEX applications.

I little example today was to create a dynamic action that fires every time a checkbox on my page is changed. I wanted to do this to show a warning if no checkboxes were ticked, and I didn't want to hardcode checkbox names - so the ideal solution is to use the jQuery Selector selection type.

By using the syntax
'input:checkbox'
this dynamic action will fire as required. Further information this selector (and others) can be found in the jQuery documentation. They main thing to note for APEX is that surrounding $() is not required in this context - otherwise you receive the error
Uncaught Syntax error, unrecognized expression: $('input:checkbox')

And as a starting point if you're unfamiliar with jQuery, check out the FAQ.

I also picked up this handy e-book for $5 during an O'Reilly promotion: jQuery Pocket Reference

Edit - May 2018:

This post was very early in my understanding of dynamic actions (hence my poorly cased label), and how they relate to elements on a page. If you want an introduction to utilising this amazing feature of Oracle APEX, start here:
http://www.grassroots-oracle.com/2015/12/tutorial-include-action-button-in-report.html

4 comments:

Roel said...

and you can even (or better) do without the quotes...

Scott Wesley said...

True indeed. Not sure why I left them in...

Sri said...

Hi Scott
Unsure if this 'input:checkbox' be still used as it is old blog

My requirement is in interactive report which is second region in my page and I am having a check box in it and upon ticking it
I need to make a display item on first region change balance (for cases where second region of interactive report where I have checked)


In dynamic action I give

Event : Change, Selection type: Jquery Selector

Jquery Selector : input:checkbox

True actions : Execute Javascript code

code as below (Static id are given for the column of interactive report)

affected element : Page item in first region

var amtlist='';
alert("amtlist outside is "+ amtlist);

$('input:checked').each( function()
{
amtlist=$(this).closest("tr").find("td[headers=AMT]").text();
concat_val =amtlist+':'+concat_val ;
}


Upon ticking it alert message not displayed, nor it shows error when traced

Thanks

Scott Wesley said...

Hi Sri,

Sorry for the delay, but the best place for these type of questions is the Oracle community forums.
https://community.oracle.com/community/database/developer-tools/application_express

In this case you probably need to set your Event Scope to 'Dynamic'. See
http://www.grassroots-oracle.com/2015/12/tutorial-include-action-button-in-report.html