如何在xPage上使用CSJS获得提交值

how to get submitted value with CSJS on xPage?

本文关键字：CSJS 提交 xPage      更新时间：2023-09-26

我可以在onItemClick事件中使用SSJS获得弹出菜单项点击:

context.getSubmittedValue()

但是我如何通过使用CSJS在同一个onItemClick事件获得项目点击?
这似乎没有帮助:

thisEvent.target.id

这个不返回任何东西:

thisEvent.target.innerHTML
下面是我的xPage:
<xe:popupMenu id="popupMenu1">
    <xe:this.treeNodes>
        <xe:basicLeafNode label="menu item 1" submitValue="mi1"></xe:basicLeafNode>
        <xe:basicLeafNode label="menu item 2" submitValue="mi2"></xe:basicLeafNode>
    </xe:this.treeNodes>
    <xp:eventHandler event="onItemClick" submit="true"
        refreshMode="complete">
        <xe:this.action><![CDATA[#{javascript:print(context.getSubmittedValue());}]]></xe:this.action>
        <xe:this.script><![CDATA[alert(thisEvent.target.innerHTML);]]></xe:this.script>
    </xp:eventHandler>
</xe:popupMenu>

我需要得到任何信息，这将有助于我确定哪个项目被点击在CSJS

你可以使用每个basicLeafNode的onClick事件来确定在CSJS中点击了什么。

下面是一个如何使用basicLeafNode的onClick事件的示例。

如果你需要执行SSJS代码，你可以触发一个隐藏按钮的点击事件，该按钮有一个事件处理程序来运行你的SSJS代码。

注意，当你将onClick事件添加到basicLeafNode时，它会覆盖onItemClick事件:当basicLeafNode包含onClick事件时，无法让XPages工具栏onItemClick事件执行

<?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">
    <xp:button value="Label" id="button1">
        <xp:eventHandler event="onclick" submit="false">
            <xp:this.script><![CDATA[
            XSP.openMenu(thisEvent,#{javascript:getComponent('popupMenu1').getMenuCtor()});
            ]]></xp:this.script>
        </xp:eventHandler>
    </xp:button>
    <xe:popupMenu id="popupMenu1">
        <xe:this.treeNodes>
            <xe:basicLeafNode label="menu item 1" submitValue="mi1">
                <xe:this.onClick><![CDATA[document.getElementById("#{id:mi1Event}").click();]]></xe:this.onClick>
            </xe:basicLeafNode>
            <xe:basicLeafNode label="menu item 2" submitValue="mi2">
                <xe:this.onClick><![CDATA[document.getElementById("#{id:mi2Event}").click();]]></xe:this.onClick>
            </xe:basicLeafNode>
        </xe:this.treeNodes>
        <xp:eventHandler event="onItemClick" submit="true" refreshMode="complete">
            <xe:this.action>
                <![CDATA[#{javascript:
                print("onItemClick event running"); // Will not run!
            }]]></xe:this.action>
        </xp:eventHandler>
    </xe:popupMenu>

    <xp:button value="_mi1" id="mi1Event" style="display:none;">
        <xp:eventHandler event="onclick" submit="true" refreshMode="partial" immediate="false" onComplete="console.log('onComplete of mi1 running');" refreshId="popupMenu1">
            <xp:this.action><![CDATA[#{javascript:print("ssjs code for mi1 running");}]]></xp:this.action>
        </xp:eventHandler>
    </xp:button>
    <xp:button value="_mi2" id="mi2Event" style="display:none;">
        <xp:eventHandler event="onclick" submit="true" refreshMode="partial" immediate="false" onComplete="alert('onComplete of mi2 running');" refreshId="popupMenu1">
            <xp:this.action><![CDATA[#{javascript:print("ssjs code for mi2 running");}]]></xp:this.action>
        </xp:eventHandler>
    </xp:button>
</xp:view>

正如您在评论中所写的，您希望首先执行SSJS代码，然后才执行CSJS代码。不幸的是，eventHandler总是先执行CSJS。

在SSJS代码中使用view.postScript()在服务器端运行代码后在客户端执行代码。你的eventandler应该是这样的:

<xp:eventHandler
        event="onItemClick"
        submit="true"
        refreshMode="complete">
        <xe:this.action><![CDATA[#{javascript:
            var value = context.getSubmittedValue();
            print(value);
            view.postScript('alert("' + value + '");');
            }]]></xe:this.action>
    </xp:eventHandler>

你可以这样在客户端调用函数，并使用选择的值作为参数:
view.postScript('yourClientSideFunction("' + value + '");');

相关文章：