Bootstrap4XPages 插件：如何使用 Select2 Picker 捕捉更改事件？

Question

我正在为列表框使用 BS4XSP 插件和 Select2 Picker/Combo。不幸的是，在使用它时，我无法捕捉到该列表框的更改/单击/keyup 事件来执行代码。这是我的代码摘录：

<xp:div rendererType="bootstrap.Panel" title="Facets" id="facets">
    <p>
        <xp:listBox id="searchFacets" multiple="true" value="#{sessionScope.searchFacets}">
            <xp:selectItems>
                <xp:this.value>
                    <![CDATA[#{javascript:search.getFacets()}]]>
                </xp:this.value>
            </xp:selectItems>
        </xp:listBox>
        <bx:select2PickerCombo id="select2PickerCombo1" for="searchFacets" formatSelection="#{javascript:search.init()}">
        </bx:select2PickerCombo>
    </p>
    <xp:button value="Update" id="button2" styleClass="btn-sm btn-primary">
        <xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="result">
            <xp:this.action>
                <![CDATA[#{javascript:search.init();}]]>
            </xp:this.action>
            <xp:this.onComplete>
                <![CDATA[XSP.partialRefreshGet("#{id:facets}");]]>
            </xp:this.onComplete>
        </xp:eventHandler>
    </xp:button>
</xp:div>

任何想法如何直接通过 Listbox / Select2 选择器触发我当前位于列表框下方按钮中的代码？

Answer 1

我认为使用bx:select2PickerCombo 控件时无法做到这一点。我能想到的唯一方法是手动调用 select2 插件。

请注意，我仍在从 Bootstrap4XPages 插件加载 select2 库，但在这种情况下，您也可以直接将其添加到您的应用程序中，无需为此仅使用 Bootstrap4XPages 插件。

<xp:this.resources>
    <xp:script
        src="/.ibmxspres/.extlib/bootstrap/select2/select2.min.js"
        clientSide="true">
    </xp:script>
    <xp:styleSheet
        href="/.ibmxspres/.extlib/bootstrap/select2/select2.css"></xp:styleSheet>
    <xp:styleSheet
        href="/.ibmxspres/.extlib/bootstrap/select2/select2-bootstrap.css"></xp:styleSheet>
</xp:this.resources>

<xp:div
    title="Facets"
    id="facets">

    <xp:text
        escape="true"
        id="computedField2"
        value="#{javascript:(new Date()).getTime()}">
    </xp:text>

    <p>
        <xp:listBox
            id="searchFacets"
            multiple="true"
            value="#{sessionScope.searchFacets}">
            <xp:selectItems>
                <xp:this.value>
                    <![CDATA[#{javascript:['option 1', 'option 2']}]]>
                </xp:this.value>
            </xp:selectItems>
        </xp:listBox>
    </p>

    <xp:scriptBlock
        id="scriptBlock1">
        <xp:this.value><![CDATA[
    x$("#{id:searchFacets}").select2().on('change', function() {

        console.log('value of select2 has changed...');

        //call the event handler on the server, refresh a different target when it's done
        $('[name="$$xspsubmitid"]').val('#{id:myEventHandler}');
        XSP._partialRefresh("post", $("form")[0], '#{id:result}', {
            onComplete : function() {
                console.log('calling function in onComplete event');
                XSP.partialRefreshGet("#{id:facets}");
            }
        });        
    });
]]></xp:this.value>
    </xp:scriptBlock>

</xp:div>

<!--this is the event handler that gets called when the value changes -->
<xp:eventHandler
    event="onclick"
    id="myEventHandler"
    submit="true"
    refreshMode="none">
    <xp:this.action>
            <![CDATA[#{javascript:print('call init function here' + getComponent('searchFacets').getValue() );}]]>
    </xp:this.action>
    <xp:this.onComplete>
            <![CDATA[XSP.partialRefreshGet("#{id:facets}");]]>
    </xp:this.onComplete>
</xp:eventHandler>

<xp:div
    id="result">
    <xp:text
        escape="true"
        id="computedField1"
        value="#{javascript:(new Date()).getTime()}">
    </xp:text>
</xp:div>