Запретить компоненту javascript обновлять всю мою страницу

Question

Я добавляю pivottable.js (после прочтения его здесь http://www.wissel.net/stw/wisselblog.nsf) в приложение xPages. Компонент загружается, но у меня есть проблема, когда компонент, который позволяет фильтровать данные, выполняется на моей xPage, он обновляет всю страницу, а не только диаграмму.

Вот демонстрация приложения. Вы можете видеть, что когда вы нажимаете на раскрывающуюся категорию, вы можете отфильтровать ее, и после этого она выполняет частичное обновление для фильтрации данных. http://nicolas.kruchten.com/pivottable/examples/mps.html

На моем xPage, когда я фильтрую данные, обновляется вся страница. Есть ли способ предотвратить такое поведение?

Ниже приведен соответствующий код. Не включенный код просто извлекается из проекта без изменений, но я могу включить его при необходимости.

Я использую пользовательский элемент управления на странице

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

Внутри пользовательского контроля не так много. Я попытался вызвать сценарий внизу страницы, но это не изменило.

  <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>

Вот скрипт callPivotTable

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

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

                );
            });
         });

Вы заметите, что я не называю jQuery ресурсом здесь. Это потому, что я использую библиотеку расширения bootstrap4xpages, которая загружает jQuery. Не уверен, если это имеет значение или нет.

Вот ссылка на работающий нсф. Он использует библиотеку расширений bootstrap и bootstrapv2.3.2, но прекрасно загрузится в bootstrap3 с теми же проблемами. Ссылка на НСФ

Answer 1

Не нужно менять код pivot.js. Он просто не работает, когда сводная таблица отображается внутри формы. Любое обновление виджета заставляет пост всей формы. Не удалось заставить его работать путем изменения кода, поэтому я выключил генерацию форм, и теперь он работает, как и ожидалось.

Перейдите в свойства XPage (вкладка "Все свойства") и установите свойство createForm в false, Или в источнике это должно выглядеть так:

<?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>