Can I trigger xe:namepicker via csjs?

Question

On an xpage I have an editbox control and xe:namepicker nicely grouped beside each other with a Bootstrap add-on component.

However I would like to trigger the xe:namepicker when the cursor enters the editbox.

In the DOM I see that for the namepicker an anchor link is generated such as:

a class="glyphicon glyphicon-user xspPickerLink" href="javascript:;" 

And I could trigger the click event via csjs

$("a.xspPickerLink").trigger('click');

But I happen to have multiple xe:namepicker-s on my xpage.

Does anyone have a clue how I can trigger a SPECIFIC xe:namepicker ?

Answer 1

You can work with wrapper elements:

<div id="namePicker1Wrapper">
    <xe:namePicker id="namePicker1" pickerText="Select..."></xe:namePicker>
</div>

<div id="namePicker2Wrapper">
    <xe:namePicker id="namePicker2" pickerText="Select..."></xe:namePicker>
</div>

Now you have the opportunity to select a SPECIFIC xe:namepicker:

$("#namePicker1Wrapper a.xspPickerLink").trigger('click');