Bootstrap4XPages plugin: how to catch a change event with Select2 Picker? - twitter-bootstrap-3

Question

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?

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