1

It is possible to add an onClientLoad eventHandler to a viewPanel:

https://xcellerant.net/2013/01/14/viewpanel_onclientload

Clicking a Pager results in the onClientLoad being fired.

Question: is it possible to catch the Page Number of the Pager being clicked?

Rolf Walter
  • 85
  • 8
  • 1
    Why would you want/need the specific "page number" of the Pager? – Eric McCormick Jun 15 '16 at 17:08
  • In order to synchronize what is displayed in an iframe in a navigation solution. We have 10 articles per Page, when clicking e.g. Page 3, the top article (number 21) should then be activated and displayed. – Rolf Walter Jun 15 '16 at 18:35

1 Answers1

1

Add an on click event to every page number within pager in XPage's onClientLoad CSJS code.
Use dojo.query to get all a-tags within pager: 

    dojo.query('[id$=pagerWithClickEvents] a').forEach(function(entry) {
        entry.addEventListener("click", function() {
            alert(this.innerHTML);
        });
    });

enter image description here

This XPage is a working example:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:viewPanel
        rows="3"
        value="#{view1}"
        id="viewPanel1">
        <xp:this.facets>
            <xp:pager
                partialRefresh="true"
                layout="Previous Group Next"
                xp:key="headerPager"
                id="pagerWithClickEvents">
            </xp:pager>
        </xp:this.facets>
        <xp:this.data>
            <xp:dominoView
                var="view1"
                databaseName="names.nsf"
                viewName="People">
            </xp:dominoView>
        </xp:this.data>
        <xp:viewColumn
            columnName="$17"
            id="viewColumn1">
            <xp:viewColumnHeader
                value="Name"
                id="viewColumnHeader1">
            </xp:viewColumnHeader>
        </xp:viewColumn>
        <xp:viewColumn
            columnName="$16"
            id="viewColumn4">
            <xp:viewColumnHeader
                value="E-Mail"
                id="viewColumnHeader4">
            </xp:viewColumnHeader>
        </xp:viewColumn>
        <xp:eventHandler
            event="onClientLoad"
            submit="false">
            <xp:this.script><![CDATA[
            dojo.query('[id$=pagerWithClickEvents] a').forEach(function(entry) {
                entry.addEventListener("click", function() {
                    alert(this.innerHTML);
                });
            });
        ]]></xp:this.script>
        </xp:eventHandler>
    </xp:viewPanel>
</xp:view>
Knut Herrmann
  • 30,880
  • 4
  • 31
  • 67
  • 1
    Thank you! It works fine. However, I had to add the dojo.query inside viewPanel as an onClientLoad eventHandler, otherwise it only fired at the first click, not on subsequent clicks. My next step is now to trigger SSJS from this CSJS. – Rolf Walter Jun 16 '16 at 09:25
  • Oh thank you, this was the part I missed :) - I updated my example XPage. It works for pager inside view panel now too. – Knut Herrmann Jun 16 '16 at 11:08