Xpages和Select2

Question

我已经安装了插件Bootstrap4XPages，然后它的工作，我希望它是。但有一个巨大的问题。OnChange事件不触发任何功能。我尝试了一些建议，但我不能成功。所以有什么建议吗？如何触发它。

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

Answer 1

这是一个蹩脚的工作方法，但我解决这个问题的方法是通过创建一个标准的XPages combobox和一个按钮来处理onchange。下面是一个例子。

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

Answer 2

对于Bootstrap的支持，我建议卸载Domino和Designer上的老式Bootstrap4Xpages插件，然后在Xsp属性中为你的应用程序切换到Bootstrap3主题。 这样就可以启用V10原生的Bootstrap3支持了。

对于过滤选择功能，添加Dojo组合框功能，从Dojo窗体部分的Controls pallete。注意，你不需要任何一个Bootstrap实现来使用这个控件。

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