Bootstrap4XPages plugin: how to catch a change eve

问题:

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>

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

回答1:

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.

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>