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 组合框和一个处理 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 支持所需的全部内容。

对于过滤 select 功能，从控件面板的 Dojo 表单部分添加 Dojo 组合框功能。请注意，您不需要 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>

Xpages 和 Select2

Xpages And Select2

xpages

jquery-select2