Trying to get the value of a listBox with Select2 - xpages

Question

I have the latest extension library installed running on the latest version of Domino. I am using a simple listBox with values from a DBColumn ( which works to populate the listBox ).
However, I can't seem to get the selected value of the listBox. I've poked around the net a while and found several different things which I have tried unsuccessfully. Then I started reading about having to install other libraries etc. Now I am confused. Below is my code. All I want to do is get the selected value from the listBox once it changes but I really want to use the select2 features to search the listBox. Can someone point me in the right direction on how to get the selected value when it changes?
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:bx="http://www.openntf.org/xsp/bootstrap">
<xp:scriptBlock id="scriptBlock2">
<xp:this.value>
<![CDATA[
$(document).ready(
function() { x$( "#{id:listBoxProperties}" ).select2()
.on("change", function(e) { XSP.partialRefreshPost(
"#{id:computedField2}" );
}
}
);
]]>
</xp:this.value>
</xp:scriptBlock>
<xp:panel>
<xp:listBox id="listBoxProperties" value="#{viewScope.selectedProperty}"
style="width:250px">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:listOfProperties = #DbColumn( #DbName(), 'vwAuditDocsByPropertyNo', 1 );
if( #IsError( listOfProperties ) )
"Error looking up properties: " + listOfProperties;
listOfProperties;
}]]></xp:this.value>
</xp:selectItems>
<xp:eventHandler event="onchange" submit="true"
refreshMode="complete">
</xp:eventHandler></xp:listBox>
<bx:select2PickerCombo id="select2Property"
for="listBoxProperties" placeHolder="-Select a Property-"
binding="#{javascript:viewScope.selectedProperty}">
</bx:select2PickerCombo>
<xp:br></xp:br>
<xp:text escape="true" id="computedField1"
value="#{javascript:viewScope.selectedProperty;}">
</xp:text>
<xp:text escape="true" id="computedField2">
<xp:this.value><![CDATA[#{javascript:getComponent( "listBoxProperties").getValue()}]]></xp:this.value>
</xp:text>
</xp:panel>
</xp:view>

Answer 1

I have tested your scenario and can verify that the onchange event of the lixtBox does not fire when using bx:select2PickerCombo to style the listBox as a Select2 control. If you remove the use of bx:select2PickerCombo, the onchange event fires as expected. Here's a simple example (without the use of bx:select2PickerCombo):
<xp:listBox id="listBoxProperties" value="#{viewScope.selectedProperty}" style="width:250px">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:["1","2","3"]}]]></xp:this.value>
</xp:selectItems>
<xp:eventHandler event="onchange" submit="true" refreshMode="partial" refreshId="refreshField"></xp:eventHandler>
</xp:listBox>
<!--<bx:select2PickerCombo id="select2Property" for="listBoxProperties" placeHolder="-Select a Property-" binding="#{javascript:viewScope.selectedProperty}"></bx:select2PickerCombo>-->
<xp:text escape="true" id="refreshField" value="#{javascript:viewScope.selectedProperty;}"></xp:text>
You need to manually add Select2 to your listBox to get the onchange event to work. See this answer for more details: Bootstrap4XPages plugin: how to catch a change event with Select2 Picker?