add SSJS action to a bootstrap pill

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">
                <a href="#">Profiles</a>
            </li>
            <li role="presentation">
                <a href="#">Applications</a>
            </li>
            <li role="presentation">
                <a href="#">Automation</a>
            </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>