CODEWITHSUNDEEP
xpagesjquery-select2
Cumhur Ata
Cumhur Ata

Reputation: 809

Xpages And Select2

I have installed plugin Bootstrap4XPages and then It works as i wanted it to be. but There is a huge problem. OnChange event does not trigger any function. I tried some suggestions but I could not be succeded. So is there any suggestion? How to trigger it.

    </xp:eventHandler>
    <xp:scriptBlock id="setLatencyBlock">
        <xp:this.value><![CDATA[XSP.addOnLoad(function() 
{ 
    XSP.attachPartial("view:_id1:FirmaAdi",null,"onclick", function(){}, 200, "view:_id1:divMain");
    x$("#{id:FirmaAdi}").select2().on("change", function(e) 
    {
        XSP.partialRefreshPost("#{id:FirmaAdi}",
        {
            onStart: function () { //alert("Started...")},
            onComplete: function () //{alert("Stopped...")}
        }); 
     }) 
});
]]></xp:this.value>
    </xp:scriptBlock>

Upvotes: 0

Views: 169

Answers (2)

Peter Della-Nebbia
Peter Della-Nebbia

Reputation: 827

For Bootstrap support, I recommend uninstalling very old Bootstrap4Xpages plugin off Domino and Designer and then switching to the Bootstrap3 theme in the Xsp Properties for your application. That is all you need to enable the Bootstrap3 support that is native to V10.

For the filtering select function, add the Dojo Combo Box function from the Dojo Forms section in the Controls pallete. Note that you don't need either Bootstrap implementation to use this control.

<xe:djComboBox id="Company1" value="#{document1.Company}">
    <xp:selectItem itemLabel="" itemValue=""></xp:selectItem>
    <xp:selectItems>
        <xp:this.value><![CDATA[#{javascript:@DbColumn(@DbName(),"CompaniesByName",1)}]]></xp:this.value>
    </xp:selectItems>
</xe:djComboBox>

Upvotes: 0

Tom Van Aken
Tom Van Aken

Reputation: 467

It's a lame workaround, but the way I fix this is by creating a standard XPages combobox and a button that handles the onchange. Here's an example:

        <xp:comboBox id="fldSelection" value="#{viewScope.fldSelect}" styleClass="select2_fldSelect">
            <xp:this.attrs>
                <xp:attr name="name" value="fldSelect">
                </xp:attr>
            </xp:this.attrs>

            <xp:selectItem itemLabel="Item 1"></xp:selectItem>
            <xp:selectItem itemLabel="Item 2"></xp:selectItem>
            <xp:selectItem itemLabel="Item 3"></xp:selectItem>
        </xp:comboBox>

        <xp:button value="RefreshWF" id="btnRefresh_fldSelect" style="display:none;">

            <xp:eventHandler event="onclick" submit="false">
                <xp:this.script><![CDATA[alert("Changed.");]]></xp:this.script>
            </xp:eventHandler>
        </xp:button>
        <xp:scriptBlock id="scriptBlock1">
            <xp:this.value><![CDATA[var fldWorkflowId = $(".select2_fldSelect");
        fldWorkflowId.select2({
                    placeholder: fldWorkflowId.attr("title"),
                    allowClear: true, 
                    dropdownCssClass: "noFilter2"
                }); 

        fldWorkflowId.change(function(e){
        var btnRefresh = document.getElementById("#{id:btnRefresh_fldSelect}");
        if(btnRefresh) btnRefresh.click();
        })

        ]]>    </xp:this.value>
        </xp:scriptBlock>

Upvotes: 1

Related Questions