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');
HTML element IDs are case-sensitive!

For more information, including how to trigger abstract events, see $e.execute().

See Also