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

Have you tried replacing the HTML anchor tag with the _xp:link_ tag? Set the value (destination/href) to # and give it an onClick event with your SSJS _eventHandler_. Just keep it inside the _li_ and you should be good to go. — Eric McCormick, Jul 21 '15 at 02:52

Knut Herrmann · Accepted Answer · 2015-07-21T19:09:27.423

7

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>

edited Jul 21 '15 at 19:09

answered Jul 21 '15 at 05:50

Knut Herrmann

30,880
4
31
67

Knut - As usual clear , straight forward and bang on! I knew there had to be a way but just could not find a reference to the method. – Bill F Jul 21 '15 at 14:05
Your answer works great. I have a follow up. in the – Bill F Jul 21 '15 at 15:25
1

Bill, I extended my answer by added `data-toggle="tab"` in rendered `` tag. – Knut Herrmann Jul 21 '15 at 19:11
Knut - I created a panel and set the display:none and put all the links in the panel then added the – Bill F Jul 22 '15 at 15:13
Profiles
<![CDATA[#{javascript:"code"}]]>
– Bill F Jul 22 '15 at 15:16
Don't add `` tag to XPage code, use ` ` instead. My last line in answer shows only how it will be rendered and sent to browser. That isn't code you'd put into your XPage. – Knut Herrmann Jul 22 '15 at 15:41
OK now I get it. Thanks – Bill F Jul 22 '15 at 21:55

add SSJS action to a bootstrap pill

1 Answers1