APEX 21.1
Problem seems to be that Event Scope Dynamic does not work with Javascript Expression for Selection Type
Create a dynamic action on a page with a Classic(al) Report. In report create column with HTML Expression containing a class name.
When = Click
Selection Type = Javascript Expression
Javascript Expression = document.getElementsByClassName("some-class-that-appears-in-a-report-column")
Event Scope = Dynamic
Static Container = "#your-report-static-id"
(True) Action = Alert
Expectation is that the alert will poop up when you click the cells for that column.
The result is the alert pops up anywhere you click in the report.
If you change the Event Scope to Static it works. If you change out the Javascript Expression for JQuery (".some-class-that-appears-in-a-report-column") it also works, even with Scope as Dynamic.
So I dug in to see what I could see.
From dynamic_actions_core.js
// Construct jQuery selector
lSelector = da.constructSelector( {
elementType : lEvent.triggeringElementType,
element : lEvent.triggeringElement,
regionId : lEvent.triggeringRegionId,
buttonId : lEvent.triggeringButtonId
});
then
lLiveSelector$.on( lEvent.bindEventType, lSelector, function( pBrowserEvent, pData ) {
da.actions( this, lEvent, pBrowserEvent, pData );
});
If I use a Javascript Expression the lSelector variable ends up being an array of nodes or html elements (HTMLCollection or NodeList).
This is then passed into the JQuery function on() which expects a string for the selector expression. (https://api.jquery.com/on/).
*Note this is not referring to selector.on() .. this is $(something).on(events, selector....)
This selector, since it is not a string, gets ignored and the on() function attaches listener to everything in the scope.
Alternatively
If I choose Selection Type = JQuery Expression then lSelector variable ends up as a string and it all works.
The problem(?) appears to be in the function constructSelector
case "JAVASCRIPT_EXPRESSION":
lSelector = lOptions.element();
break;
...
case "JQUERY_SELECTOR":
lSelector = lOptions.element;
break;
Note that the Javascript Expression version executes.
Now when it passes this array like object as selector into JQuery on() we see this
if ( typeof selector === "string" ) {
// ( types, selector, fn )
fn = data;
data = undefined;
} else {
// ( types, data, fn )
fn = data;
data = selector;
selector = undefined;
}
So now the event is attached to the containing scope and not the selector (which is now undefined).
The result is the handler is not attached correctly so in my case it registers every click in the report region rather than the cells I want to listen to.
This is fine for normal (static) binding of events because there on() is scoped to the selected elements returned into variable lSelector.
$( lSelector, apex.gPageContext$ ).on( lEvent.bindEventType, function( pBrowserEvent, pData ) {
da.actions( this, lEvent, pBrowserEvent, pData );
});
Here lSelector is allowed to be an array like object.
$(things).on(events) works .. but $(things).on(events, more-things) does not work.
So the short story is to use Dynamic Scope for a Dynamic Action, the When Selection Type cannot be Javascript Expression.
Is it a bug or a feature? Either way it would be nice to see (documentation) since I appear to be using it wrong.