javascriptxpagesrepeathcl-notes

Xpages Get ID of a Panel inside a repeat control

I have a Panel inside a repeat control that I'm trying to pull the inner HTML from when a button is clicked? I have tried the code below but it is not working because the html rendered ID is different when I launch the page in a browser.

<?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>
Solution

  • <xp:panel id="pnlReport"> is within a repeat block.

    Id will be rendered in your example as

    '#{id:pnlReport}' has to be used within the same repeat block to get the correct ids.

    Otherwise you get just "view:_id1:repeat1:pnlReport" without any index - and such an id doesn't exist.

    <?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>

    As an alternative you can place the panel and the button outside the repeat control. This way you will get table's whole rendered 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>