Xpages在重复控件中获取面板的ID

问题描述

我在重复控件中有一个Panel，该控件试图单击按钮时从中提取内部HTML？我尝试了下面的代码，但是由于在浏览器中启动页面时html呈现的ID不同，因此无法正常工作。

<?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:repeat id="repeat1" rows="30" value="#{javascript:getNames();}" var="rowData" style="width:100%">
        <xp:panel id="pnlReport">
        <xp:table style="width:100.0%">
                <xp:tr>
                    <xp:td>
                        <xp:label value="#{javascript:rowData.Name}" id="label3"></xp:label>
                    </xp:td>
                </xp:tr>
            </xp:table>
            </xp:panel>
        </xp:repeat>

    <xp:button value="GET INNER HTML" id="button1">
        <xp:eventHandler event="onclick" submit="false">
            <xp:this.script><![CDATA[var el = XSP.getElementById('#{id:pnlReport}'); alert(el.innerHTML);]]>
            </xp:this.script>
        </xp:eventHandler>
    </xp:button>
</xp:view>

解决方法

<xp:panel id="pnlReport">在重复块内。

Id在您的示例中将显示为

“视图：_id1：重复1： 0 ：pnl报告”
“视图：_id1：重复1： 1 ：pnl报告”
...

'#{id:pnlReport}'必须在相同的重复块内内使用，以获取正确的ID。

否则，您只会得到“ view：_id1：repeat1：pnlReport”，没有任何索引-这样的ID不存在。

<?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:repeat id="repeat1" rows="30" value="#{javascript:['aaa','bbb'];}"
        var="rowData" style="width:100%">
        <xp:panel id="pnlReport">
            <xp:table style="width:100.0%">
                <xp:tr>
                    <xp:td>
                        <xp:label value="#{javascript:rowData}" id="label3"></xp:label>
                    </xp:td>
                </xp:tr>
            </xp:table>
        </xp:panel>
        <xp:button value="GET INNER HTML" id="button1">
            <xp:eventHandler event="onclick" submit="false">
                <xp:this.script><![CDATA[
                    var el = XSP.getElementById('#{id:pnlReport}');
                    alert(el.innerHTML);]]>
                </xp:this.script>
            </xp:eventHandler>
        </xp:button>
    </xp:repeat>
</xp:view>

作为替代方案，您可以将面板和按钮放在重复控件的外部。这样，您将获得表格的整个呈现的HTML：

<?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:panel id="pnlReport">
        <xp:table style="width:100.0%">
            <xp:repeat rows="30" value="#{javascript:['aaa','bbb'];}"
                var="rowData" style="width:100%" removeRepeat="true">
                <xp:tr>
                    <xp:td>
                        <xp:label value="#{javascript:rowData}" id="label3"></xp:label>
                    </xp:td>
                </xp:tr>
            </xp:repeat>
        </xp:table>
    </xp:panel>
    <xp:button value="GET INNER HTML" id="button1">
        <xp:eventHandler event="onclick" submit="false">
            <xp:this.script><![CDATA[
                var el = XSP.getElementById('#{id:pnlReport}');
                alert(el.innerHTML);]]>
            </xp:this.script>
        </xp:eventHandler>
    </xp:button>
</xp:view>

hcl-notes javascript repeat xpages