Question

我的XPage中有2个组合框。组合A和组合B.组合A有一个事件处理程序onChange。当我改变组合B值时，我想调用Combo A onChange事件，以便执行那里存在的代码并避免将其复制到组合B事件中。

所以在组合B的onChange事件中我想调用组合A的onChange事件。

我不介意我是否必须更改组合A值。事实上，我试图用CSJS和SSJS这样做但是A的onChange事件虽然价值发生了变化但却没有触发。

Answer 1

您可以在客户端执行此操作。我正在使用this answer中的以下JS函数。

// itemId : ID of an element
// eventName: The name of the event (change, click, etc.)
function fireEvent(itemId, eventName) {
    var item=dojo.byId(itemId);

    if(item) {
        if (dojo.isIE) {
            // IE does things differently
            item.fireEvent("on"+eventName);
        }
        else { 
            // Not IE
            var event = document.createEvent("HTMLEvents");
            event.initEvent(eventName, false, true); // Last two arguments: bubbles, cancelable
            item.dispatchEvent(event);
        }
    } else {
        console.log("'"+itemId+"' does not exist!");    
        // Item does not exist! 
    }
}

然而，XPage有一个棘手的部分。如果您的组合框正在触发服务器端事件，则应在onComplete上调用此函数。否则，您可以放置客户端脚本。例如：

<xp:comboBox
    id="targetComboBox"
    value="#{viewScope.TargetCombo}">
<!-- Some select items here -->
</xp:comboBox>

<xp:comboBox
    id="comboBox1"
    value="#{viewScope.Combo1}">
    <xp:selectItem
        itemLabel="Value1.1"
        itemValue="1.1">
    </xp:selectItem>
    <xp:selectItem
        itemLabel="Value1.2"
        itemValue="1.2">
    </xp:selectItem>
    <xp:selectItem
        itemLabel="Value1.3"
        itemValue="1.3">
    </xp:selectItem>
    <xp:eventHandler
        event="onchange"
        submit="false">
        <xp:this.script>
            <xp:scriptGroup>
                <xp:executeClientScript script="console.log('combo1 changed');"></xp:executeClientScript>
                <xp:executeClientScript script="fireEvent('#{id:targetComboBox}', 'change')"></xp:executeClientScript>
            </xp:scriptGroup>
        </xp:this.script>
    </xp:eventHandler>
</xp:comboBox>

<xp:comboBox
    id="comboBox2"
    value="#{viewScope.Combo1}">
    <xp:selectItem
        itemLabel="Value2.1"
        itemValue="2.1">
    </xp:selectItem>
    <xp:selectItem
        itemLabel="Value2.2"
        itemValue="2.2">
    </xp:selectItem>
    <xp:selectItem
        itemLabel="Value2.3"
        itemValue="2.3">
    </xp:selectItem>
    <xp:eventHandler
        event="onchange"
        submit="true"
        refreshMode="norefresh"
        onComplete="fireEvent('#{id:targetComboBox}', 'change')">
        <xp:this.action><![CDATA[#{javascript:print("combo2 changed")}]]></xp:this.action>
        <xp:this.script>
            <xp:scriptGroup>
                <xp:executeClientScript script="console.log('combo2 changed');"></xp:executeClientScript>
            </xp:scriptGroup>
        </xp:this.script></xp:eventHandler>
</xp:comboBox>

在此示例中，combo1有自己的CSJS事件，combo2有一个SSJS和一个CSJS事件。两者都在触发targetComboBox ...

Answer 2

看起来像是这个问题的副本。你也可以在服务器端做，看看我的回答。现在再次测试它，getComponent需要获取EventHandler组件，而不是Button组件，所以你需要为你想要调用的eventHandler添加一个ID并在那个上调用getComponent

如何从控件B调用控件A的事件处理程序？

2 个答案: