当 basicLeafNode 包含 onClick 事件时，无法让 XPage 工具栏 onItemClick 事件执行 [英] Cannot get XPages toolbar onItemClick event to execute when basicLeafNode contains onClick event

问题描述

我有一个带有两个 basicLeafNode 的工具栏，单击它们时我需要在其中调用一些 CSJS.为此，我将 CSJS 放在 basicLeafNode 的 onClick 事件中，但是当我这样做时，无论我返回 true、false 还是根本不返回， event="onItemClick" 的 eventHandler 都不会执行.如果我在 onClick 事件中删除 CSJS，则 onItemClick 执行.关于我在这里做错了什么的任何想法?

I have a toolbar with two basicLeafNodes in which I need to call some CSJS when they are clicked. To do this I put the CSJS in the onClick event of the basicLeafNode but when I do this, regardless of whether I return true, false or no return at all, the eventHandler for event="onItemClick" does not execute. If I remove the CSJS in the onClick event then onItemClick executes. Any ideas on what I am doing wrong here?

<xe:toolbar>
    <xe:this.treeNodes>
        <xe:basicLeafNode label="Back" submitValue="Back"></xe:basicLeafNode>
        <xe:basicLeafNode label="Save &amp; Back" submitValue="SaveAndBack" loaded="${javascript:document1.isEditable()}" onClick="console.log('save and back clicked');"></xe:basicLeafNode>
        <xe:basicLeafNode label="Edit" submitValue="Edit" loaded="${javascript:!(document1.isEditable())}"></xe:basicLeafNode>
        <xe:basicLeafNode label="Save" submitValue="Save" loaded="${javascript:document1.isEditable()}" onClick="console.log('save clicked'); return true;"></xe:basicLeafNode>
        <xe:basicLeafNode label="Delete"></xe:basicLeafNode>
    </xe:this.treeNodes>
    <xp:eventHandler event="onItemClick" submit="true" refreshMode="partial" refreshId="dc" disableValidators="#{javascript:context.getSubmittedValue() == 'Back'}">
        <xe:this.action>
            <![CDATA[#{javascript:
            vendor.runAction(context.getSubmittedValue(), document1);
        }]]></xe:this.action>
    </xp:eventHandler>
</xe:toolbar>

推荐答案

basicLeafNode 的 onClick 事件 overwrites toolbar 的 onItemClick 事件.

basicLeafNode's onClick event overwrites toolbar's onItemClick event.

这在呈现的页面源中可见.

This is visible in rendered page source.

只需将其扭转:将您的客户端操作添加到 toolbar 的 onItemClick 事件中.

Just turn it around: add your client side actions into toolbar's onItemClick event.

您可以获得点击标签

        var node = thisEvent.target.parentNode;
        var label = node.getElementsByClassName('dijitButtonText')[0].innerHTML;

并根据点击的标签添加您的代码.

and add your code depending on clicked label.

这是一个可用的 XPage 示例:

Here is a working XPage example:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xe="http://www.ibm.com/xsp/coreex">
    <xe:toolbar>
        <xe:this.treeNodes>
            <xe:basicLeafNode
                label="first"
                submitValue="first">
            </xe:basicLeafNode>
            <xe:basicLeafNode
                label="second"
                submitValue="second">
            </xe:basicLeafNode>
        </xe:this.treeNodes>
        <xp:eventHandler
            event="onItemClick"
            submit="true"
            refreshMode="complete">
            <xe:this.script><![CDATA[
                var node = thisEvent.target.parentNode;
                var label = node.getElementsByClassName('dijitButtonText')[0].innerHTML;
                alert('action for: ' + label);
                return true;
            ]]></xe:this.script>
            <xe:this.action><![CDATA[#{javascript:
                    print(context.getSubmittedValue());
            }]]></xe:this.action>
        </xp:eventHandler>
    </xe:toolbar>
</xp:view>

这篇关于当 basicLeafNode 包含 onClick 事件时，无法让 XPage 工具栏 onItemClick 事件执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！