Prevent javascript component from refreshing my entire page

Question

I am adding pivottable.js (after reading of it here http://www.wissel.net/stw/wisselblog.nsf) into an xPages application. The component loads but I have a problem when the component which allows for filtering of the data, is done on my xPage it refreshes the entire page instead of just the chart.

Here is a demo of the app, You can see that when you hit the drop down on a category you can filter and once that is done it does a partial refresh to filter the data. http://nicolas.kruchten.com/pivottable/examples/mps.html

On my xPage when I filter the data it refreshes the entire page. Is there a way to prevent this behavior?

Below is the relevant code. The code not included is just grabbed from the project unmodified but I can include if needed.

I am using using a custom control on the xpage

<xc:ccPivot disableTheme="true"></xc:ccPivot></xp:view>

Inside the custom control there isn't much. I have tried calling the script at the bottom of the page but that made no change.

  <script type="text/javascript" src="callPivotTable"></script>

 <xp:this.resources>
    <xp:script src="/pivot.js" clientSide="true"></xp:script>
    <xp:styleSheet href="/pivot.css"></xp:styleSheet>

    <xp:script src="/jquery-ui-1.9.2.custom.min.js"
        clientSide="true">
        </xp:script>
        <xp:script src="/d3_renderers.js" clientSide="true"></xp:script>
     </xp:this.resources>

 <div id="output" style="margin: 10px;"></div>

Here is the callPivotTable script

$(function(){
            var derivers = $.pivotUtilities.derivers;

            $.getJSON("./xRest.xsp/restService2", function(mps) {
                $("#output").pivotUI(mps                 

                );
            });
         });

You will notice that I am not calling jQuery as a resource here. That is because I am using the bootstrap4xpages extension library which loads jQuery. Not sure if that makes a difference or not.

Here is a link to a working nsf. It is using the bootstrap extension library, and bootstrapv2.3.2 but will load fine in bootstrap3 with the same problems. Link to nsf

Answer 1

No need to change the pivot.js code. It simply does not work when pivot table is rendered inside form. Any widget refresh forces post of the entire form. Couldn't make it work by code change, so I have turned off the form generation and now it works as expected.

Go to XPage properties (All properties tab) and set property createForm to false. Or in source it should like like this:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xc="http://www.ibm.com/xsp/custom"
    createForm="false">
    <xp:this.resources>
        <xp:script
            src="/pivot.js"
            clientSide="true">
        </xp:script>
        <xp:styleSheet
            href="/pivot.css"></xp:styleSheet>
        <xp:script
            src="/jquery-ui-1.9.2.custom.min.js"
            clientSide="true">
        </xp:script>
        <xp:script
            src="/jquery.ui.touch-punch.min.js"
            clientSide="true">
        </xp:script>
    </xp:this.resources>
    <xp:scriptBlock>
        <xp:this.value><![CDATA[$( function() {
    $("#output").pivotUI( [ {
        color : "blue",
        shape : "circle"
    }, {
        color : "red",
        shape : "triangle"
    } ], {
        rows : [ "color" ],
        cols : [ "shape" ]
    });
});]]></xp:this.value>
    </xp:scriptBlock>
    <div
        id="output"
        style="margin: 10px;">
    </div>
</xp:view>