How to Simulate the 'click' Event for a Control
Description
Event handlers can be added for control events -- click, double tap, on key press, etc. In some cases, it may be necessary to trigger a control's event, such as the click event. This can be done by getting a pointer to the control and calling a function to simulate the click.
Discussion
There may be times when you want to programmatically trigger the click event for a control in a component. This can be done by getting a pointer to the control's HTML DOM element and simulating the event using the $e.execute() function.
Example: UX Component Control
The {dialog.object}.getPointer() method can be used to get a pointer to the DOM element for a control. Using this pointer, you can then trigger an event for the control using the $e.execute() function. For example:
// get a pointer to the Text control
var ele = {dialog.object}.getPointer('TEXTCONTROL_1');
// trigger the click event:
$e.execute(ele, 'click');Example: Grid Component Control
Events for controls in a Grid component can also be triggered programmatically using the $e.execute() function. For example:
// construct the grid ID for the FIRSTNAME field in the current row
var row = {grid.object}.getSelectedRow();
var id = '{grid.componentName}.V.R' + row + '.FIRSTNAME';
// trigger the click event:
$e.execute(id, 'click');Example: HTML Element
The $e.execute() function can also be used to trigger events for any HTML element in a component. For example, suppose an event handler has been added to <div> control with the id 'myDiv1'. The click event can be triggered for 'myDiv1' using $e.execute() as follows:
// the id for the div to execute the event var id = 'myDiv1'; // trigger the click event for 'myDiv1' $e.execute(id, 'click');
For more information, including how to trigger abstract events, see $e.execute().
See Also