Xpages Get ID of a Panel inside a repeat control

Question

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>

Knut Herrmann · Accepted Answer · 2020-08-27T06:31:14.163

4

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

Id will be rendered in your example as

"view:_id1:repeat1:0:pnlReport"
"view:_id1:repeat1:1:pnlReport"
...

'#{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>

edited Aug 27 '20 at 06:31

answered Aug 26 '20 at 13:55

Knut Herrmann

30,880
4
31
67

So is there no way to do it outside of the repeat because in my project it is not feasible to repeat this button. – Muhammed Ismail Carrim Aug 26 '20 at 15:30
You could manipulate the id and add ":0", ":1", ... but the question is what do you want to achieve and better look for a more appropriate solution. So, what is the goal of your button? – Knut Herrmann Aug 26 '20 at 18:36
I'm building a dynamic table with questionnaire results pulled from Sql. The results are categorized by year. When a print button is clicked. It should pull the html of the pnl rendered in the repeat and save that html to a session scope. That html is then saved to an excel file for the person who clicked the button to review and edit. – Muhammed Ismail Carrim Aug 26 '20 at 22:47
But as Knut is poiting out, you are repeating the panel multiple times. So what panel should the button target? If you want all the panels, then you could target the repeat - or wrap the repeat in a div with a fixed id that you then target – Per Henrik Lausten Aug 27 '20 at 06:00
I added a solution for getting table's whole rendered HTML. This is probably the data you need for your print button. – Knut Herrmann Aug 27 '20 at 06:24
@PerHenrikLausten I have tried that and it works, but since I have images in the repeat as well, I'm trying to avoid wrapping the whole repeat as those images are then parsed through to excel as well and the data just becomes cluttered and confusing. Thats why I wrapped the data I need in a panel in a repeat. Also, Only one panel is rendered depending on which category was selected in the repeat so I'm always just printing one repeat at a time. – Muhammed Ismail Carrim Aug 27 '20 at 06:34
@KnutHerrmann I have tried that solution before but it does really work for me with my content. I am updating my question to include what my project looks like instead of an example of what I need. – Muhammed Ismail Carrim Aug 27 '20 at 06:36
Create a hidden second table repeat with exactly the data you want to have for your print and use this data when user clicks the button. – Knut Herrmann Aug 27 '20 at 06:38
@KnutHerrmann Won't the print button try and find rendered HTML, will it work if the repeat is hidden and not rendered. – Muhammed Ismail Carrim Aug 27 '20 at 06:54
The hidden repeat must be rendered - just add style "display:none". – Knut Herrmann Aug 27 '20 at 06:59

Xpages Get ID of a Panel inside a repeat control

1 Answers1