add SSJS action to a bootstrap pill - twitter-bootstrap-3

Question

I have added a simple pill list as a navigator:
<div class="container-fluid">
<ul class="nav nav-pills">
<li role="presentation" class="active">
Profiles
</li>
<li role="presentation">
Applications
</li>
<li role="presentation">
Automation
</li>
</ul>
</div><!-- COntainer -->
and it workd fine if all I want to do is add an href link, but I need to run some SSJS when the pill is clicked. Just starting the BootStrap hill so perhaps this is not doable. I have searched but have not been able to find how one would do that.
Any help appreciated.
Thanks

Answer 1

Use <xp:link> instead HTML <a>. It allows you to add an on click event with SSJS code:
<div class="container-fluid">
<ul class="nav nav-pills">
<li role="presentation" class="active">
<xp:link
escape="true"
text="Profiles"
id="link1">
<xp:eventHandler
event="onclick"
submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:print("your SSJS code")}]]></xp:this.action>
</xp:eventHandler>
</xp:link>
</li>
<li role="presentation">
<xp:link
...
<xp:link> gets rendered to an <a> tag finally like
<a id="view:_id1:link1" href="#" class="xspLink">Profiles</a>
You asked in your comment how to add data-toggle="tab" to rendered <a ...>. You can accomplish that with <xp:this.attrs> within <xp:link>:
...
<xp:link
escape="true"
text="Profiles"
id="link1">
<xp:this.attrs>
<xp:attr
name="data-toggle"
value="tab">
</xp:attr>
</xp:this.attrs>
<xp:eventHandler
event="onclick"
...
The rendered link looks like this then
<a id="view:_id1:link1" href="#" class="xspLink" data-toggle="tab">Profiles</a>