Xpages获取重复控件内面板的ID

Question

我在一个重复控件中有一个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>

Answer 1

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

Id将在您的示例中呈现为

• "视图：_id1:repeat1:0：pnlReport">
• "视图：_id1:repeat1:1：pnlReport">

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

否则你只会得到"；视图：_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>