How to get index of repeat control in CSJS

Question

I have searched on the internet, and found this Xpages get index of repeat in CSJS but...it didn't work for me

here is my code(part of)

<xp:repeat id="repeat1" rows="30" var="currentDetail" indexVar="detailIndex" value="#{LeaveBean.details}">
    <xp:inputText id="leavefrom" value="#{currentDetail.subfromtime}">
           <xp:eventHandler event="onblur" submit="false" refreshMode="partial" refreshId="repeat1">
                     <xp:this.script><![CDATA[........]]></xp:this.script>
          </xp:eventHandler>
    </xp:inputText></xp:repeat>

what I want to do is once user click the input field, then I can get which line he edit, I used the ssjs just like LeaveBean.dosomething(detailIndex) well, but how to get the index of in csjs?

Marky Roden( amazing man to me XD) suggest to use the attr to get it...but...I'm completely new guy to xpages, so have no idea how to add it in my own code, I mean, I tried to add such as

<xp:this.attrs>
     <xp:attr name="seanIndex"
      value="???">
     </xp:attr>
</xp:this.attrs>

but the value can't be like #{detailIndex}, otherwise, the page will crash out...so what can I do now...

Answer 1

Add a hidden text field into your repeat control with the index as value

    <xp:text
        escape="true"
        id="detailIndexText"
        value="#{detailIndex}"
        style="display:none">
    </xp:text>

Then you can get the index on client side with

    var index = document.getElementById("#{id:detailIndexText}").innerHTML

Update

A shorter version without the need of a hidden field is just:

    var index = #{javascript:detailIndex};

Answer 2

You can get the index no. directly in the cjs inside the repeat control in this way:

<xp:repeat id="repeat1" rows="30" var="currentDetail" indexVar="detailIndex" value="#{LeaveBean.details}">
    <xp:inputText id="leavefrom" value="#{currentDetail.subfromtime}">
           <xp:eventHandler event="onblur" submit="false" refreshMode="partial" refreshId="repeat1">
                     <xp:this.script><![CDATA[
var index = "#{javascript: return detailIndex;}";
// do whatever with index...

]]></xp:this.script>
          </xp:eventHandler>
    </xp:inputText></xp:repeat>

The expression "#{javascript: return detailIndex}" is evaluated in the server side and the cjs rendered is the no. of iteration.

In this way you avoid to render a hidden input and a search in the dom tree to get the no.