How do I get the value of nth Edit box in a repeat control?

Question

I have an EditBox control in a repeat control. Its iteration formula is:

return 5;

It is successfully displaying 4 edit boxes (the starting index is set to 1).

In SSJS, how can I get the value of the nth Edit Box?

Answer 1

You could set a sessionScope variable (or any scope variable) on the onchange event of the edit box and then in your SSJS reference the sessionScope variable. Here is some sample code, the bottom bit just shows your sessionScope variables on the page.

<?xml version="1.0" encoding="UTF-8"?>

<xp:repeat id="repeat1" rows="30" value="#{javascript:5}"
    indexVar="rptIndex">

    <xp:inputText id="inputText1">

    <xp:eventHandler event="onchange" submit="true" refreshMode="complete">
        <xp:this.action>
            <xp:executeScript>
                <xp:this.script><![CDATA[#{javascript:sessionScope['text'+rptIndex] = getComponent("inputText1").getValue()}]]></xp:this.script>
            </xp:executeScript>
        </xp:this.action></xp:eventHandler></xp:inputText>

</xp:repeat>



<xp:table styleClass="debug">
<xp:tr>
<th>Variable Name</th>
<th>Variable Content</th>
</xp:tr>
<xp:repeat id="varRepeat" rows="30" value="#{javascript:sessionScope.keySet();}" var="scopeData">
<xp:tr>
<xp:td>
<xp:text escape="true" id="varName" value="#{javascript:scopeData}" />
</xp:td>
<xp:td>
<xp:text escape="true" id="varValue" value="#{javascript:sessionScope.get(scopeData)}" />
</xp:td>
</xp:tr>
</xp:repeat>
</xp:table> 
</xp:view>

Answer 2

When you add a submission to an onChange event you create a rather chatty application - might bite you. The solution for setting the focus is rather different. First: focus is a client side operation, so you need a client script that 'knows what control is the first failure. The good news: XPages adds to all fields that failed a server side validation the attribute aria-invalid=true. So you can use a dojo.onLoad script that queries that and sets the focus to the first member of the result. See also http://dontpanic82.blogspot.com/2011/07/xpages-styling-invalid-field.html And for the query syntax: http://dojotoolkit.org/reference-guide/1.7/dojo/query.html

Answer 3

Repeats are fun to deal with to say the least. If you look at examples in the teamroom template mobileThread custom control you'll see a repeat for displaying a list of replies, you'll also notice a lot of javascript to go along with it as for example running script on one button click would run on all buttons in the repeat.

If you are looking for the validation problem stwissel's solution looks the best. If this is something else and at some point you just need the value of any given edit box, maybe you should think about something like:

var domEl = dojo.byId(' <repeatControlId> ');
var textBoxes = domEl.getElementsByTagName("input");
var certainValue = textBoxes[3].value;

Now certainValue contains the value of a given edit box.

haven't tried this out, might need a little tweaking but the general idea should work I would think.

Answer 4

added another comment so i could add code.

Did a quick test and works fine for me, see my example below. Hope it helps. Try adding some print outs to see is it getting each bit.

<xp:repeat id="TestRepeat" rows="100" var="rowData"
    indexVar="commentIndex" first="0" rendered="true">
    <xp:this.value><![CDATA[#{javascript:
        var dataArray = new Array();
        dataArray.push(" Test");
        dataArray.push(" Test");
        dataArray.push(" Test");
        dataArray.push(" Test");
        dataArray.push(" Test");
        return dataArray;
    }]]></xp:this.value>

    <xp:panel>
        <xp:label value="Test"></xp:label>
        <xp:inputText id="inputText1" value="Test" defaultValue="Test">
        </xp:inputText>
        <xp:br></xp:br>
    </xp:panel>

</xp:repeat>

<xp:button value="Test" id="button1">
    <xp:eventHandler event="onclick" submit="false">
        <xp:this.script>
            <xp:executeClientScript>
                <xp:this.script><![CDATA[
                var domEl = dojo.byId('#{id:TestRepeat}');
                var textBoxes = domEl.getElementsByTagName("input");
                alert( "Value 1: " + textBoxes[0].value);
                ]]></xp:this.script>
            </xp:executeClientScript>
        </xp:this.script>
    </xp:eventHandler>
</xp:button>