Bootstrap4XPages插件:如何使用Select2 Picker捕获更改事件? [英] Bootstrap4XPages plugin: how to catch a change event with Select2 Picker?

问题描述

我正在使用BS4XSP插件和List2的Select2 Picker/Combo.不幸的是，使用它时，我无法捕获该列表框的change/click/keyup事件来执行代码.这是我的代码摘录:

I am using the BS4XSP plugin and the Select2 Picker/Combo for a Listbox. Unfortunately when using it I am not able to catch the change/click/keyup event of that Listbox to execute code. This is my code extract:

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

有什么想法可以直接通过列表框/Select2选择器触发当前位于列表框下方按钮中的代码吗?

Any ideas how to trigger my code that is currently in the button below the listbox directly through the Listbox / Select2 picker?

推荐答案

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

I don't think it can be done when using the bx:select2PickerCombo control. The only way I can think of to do this would be to manually invoke the select2 plugin.

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

Note that I'm still loading the select2 library from the Bootstrap4XPages plugin, but in this scenario you can also just add it directly to your application, no need to only use the Bootstrap4XPages plugin for that.

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

这篇关于Bootstrap4XPages插件:如何使用Select2 Picker捕获更改事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！