Trying to get the value of a listBox with Select2

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>

Are you trying to get the value from client side or server side? — Per Henrik Lausten
Good question. I want to set a viewscope var that will set a view category filter when the user selects a choice from the list box — Bitwyse1

Per Henrik Lausten Per Henrik Lausten · Accepted Answer · 2015-10-04T05:39:25

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?

Trying to get the value of a listBox with Select2

1 Answers