XPages Bootstrap tabs eventhandler

0
votes

I am using Bootstrap tabs in my XPage application as follows:

<div class="bs-component">
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab1" data-toggle="tab">
PENDING REQUESTS
</a>
</li>
<li>
<a href="#tab2" data-toggle="tab">
ARCHIVES
</a>
</li>
</ul>
</div>

Upon clicking a given tab, I'd like to set a sessionScope variable. I tried substituting the li with an xp:panel (tagName="li") and an eventHandler attached but could not get it to write to sessionScope. I'm using Mark Leusink's debugger to check scope variables.

enter image description here

Would appreciate suggestions.

Thanks,

Dan

2
twitter-bootstrap-3tabsxpageseventhandler

2 Answers

0
votes

I think the best way it to add some JQuery code to add an onClick event, which triggers SSJS code. How to do this, see http://www.xpagetips.com/2011/11/running-ssjs-from-csjs-sometimes-its.html

0
votes

This code should work. You must set id attribute for panel

<xp:panel tagName="li" id="XXX">
    <xp:eventHandler event="onclick" submit="true" refreshMode="complete">
        <xp:this.action><![CDATA[#{javascript:sessionScope.XXX = "";}]]></xp:this.action>
    </xp:eventHandler>
</xp:panel>

For attach to ssjs event XSP use this code(example):

XSP.attachEvent("view:_id1:_id3:_id12", "view:_id1:_id3:image2", "onclick", null, true, 2);

Where second parameter is target id attribute