How to get the element id in repeat control

Question

Here is my question, I want to set the css of an element dynamically when the webpage load, so I used

$(document).ready(function(){
    x$("#{id:normalline}").css('margin-Left', '-68px');
}); 

yes, I used function x$(idTag, param)...I tried to use $("[id$='#{id:normalline}']").css either, they both works fine when the element wasn't in the repeat control..but...once the element was included in the repeat, it doesn't work anymore. the code is here:

updated

I think you guys notice there has a button in the repeat and another function to get the element id, the strange thing is it really works! so why it didn't work when I try to initialize it? I checked the source code, the element becomes

x$("view:_id1:repeat1:normalline").css('margin-Left', '-68px');

but the truly element id is

<'div' id="view:_id1:repeat1:0:normalline" class="line-normal-wrapper">

or if there have any other way to set the css when the page load?

update: here is the project I'm doing with, hope you guys don't mind chinese character here

I want to achieve this effect as ios-delete-style, which when you click the Minus button, then the div of scrollline can move to the left 68px, I know there have many jquery things can do it, but now I want to focus how can I set the css of normalline to achieve in this way。。。

<xp:repeat id="repeat1" rows="30" var="currentDetail"
        indexVar="detailIndex" value="#{LeaveBean.details}"
        repeatControls="false">

        <xp:div styleClass="line-wrapper">
            <xp:div id="scrollline"
                styleClass="line-scroll-wrapper">
                <xp:div id="normalline"
                    styleClass="line-normal-wrapper">
                    <xp:div
                        style="width:26px;margin-top:50px;margin-left:10px;float:left;">
                        <xp:image url="/remicon.gif" id="image2"
                            style="height:24.0px;width:24.0px">
                            <xp:eventHandler event="onclick"
                                submit="false" id="eventHandler5">
                                <xp:this.script>
                                    <xp:executeClientScript>
                                        <xp:this.script><![CDATA[x$("#{id:scrollline}").css('margin-Left', '-68px');
                                         ]]></xp:this.script>
                                    </xp:executeClientScript>
                                </xp:this.script>
                            </xp:eventHandler>
                        </xp:image>
                    </xp:div>
                </xp:div>
                <xp:div id="deletebtn"
                    styleClass="line-btn-delete">
                    <xp:button value="删除" id="button2"
                        style="font-size:13pt;border: none;color:rgb(255,255,255);width:100%;height:128px;background-color:rgb(255,0,0)">
                        <xp:eventHandler event="onclick"
                            submit="false" refreshMode="partial" refreshId="repeat1">
                            <xp:this.action>
                                <![CDATA[#{javascript:LeaveBean.removeDetail(detailIndex);}]]>
                            </xp:this.action>
                        </xp:eventHandler>
                    </xp:button>
                </xp:div>
            </xp:div>
        </xp:div>
    </xp:repeat>

and here is the css style file

.line-wrapper { width: 100%; overflow: hidden; border-bottom: 1px solid #E8E8E9}

.line-scroll-wrapper { white-space: nowrap; clear: both}

.line-normal-wrapper { display: inline-block; line-height: 100px; float: left; padding-bottom: 1px;margin-top:5px}

.line-btn-delete { width: 68px;height:120px}

so far, I have to set width value in the .line-normal-wrapper to keep the delete button not appeared in the page, once I remove it, it will be like this one:

but I can't fix the width of normal div, cause I can't control all device screen size, even on the same device, it will be awful if you rotate the screen because the width of normalline is fixed...

I tried to add this to set the width

<xp:scriptBlock id="scriptBlock1">
    <xp:this.value><![CDATA[
    $(document).ready(function(){$(".line-normal-wrapper").width($(window).width());});
     ]]></xp:this.value>
</xp:scriptBlock>

but, it only work when the page open, once I add new line or delete one, it will become the pic 2 look

So what I should do now... = =

Update again.... ewhh.....I find if I remove the ready function...it works... >___<

<xp:scriptBlock id="scriptBlock1">
    <xp:this.value><![CDATA[
    $(".line-normal-wrapper").width($(window).width());
     ]]></xp:this.value>
</xp:scriptBlock>

Answer 1

Taplar's answer is correct from a jQuery point of view, there is a syntactical issue that prevents using XPages IDs (which have to include an hierarchical element, implemented using a colon, in order to ensure unique IDs client-side, as you see).

However, there is a specific XPages cause affecting you here, and that is not the ID but the repeat. This will prevent you accessing a row of the repeat from outside it via SSJS as well as jQuery CSJS.

The XPages #{id:...} syntax is used to access the server-side component. But in a repeat control you do not have a set of components for each row, your have a single set of components not bound to any row. I've covered this in a few sessions during this year and will be covering again on the TLCC webinar next week. You can verify this by using the Inspector tab of the XPages Debug Toolbar to view the component tree of the XPage, the server-side map of the page that XPages uses. You'll see just a single set of components. If you set the indexVar property of the repeat and use that in the ID, you'll see that the ID doesn't include that, because it's not loading a set of components for a specific row, it's an abstract set of components independent of the repeat. So #{id:...} syntax maps to the abstract template component, not to a specific instance in a specific row.

Using a CSS style on the component is the recommended approach.

Alternatively, if on your repeat control you set repeatControls="true", a set of components for x rows of the repeat will be created, and you can set the ID including the indexVar property of the repeat control, allowing you to access them from outside. This is not the recommended approach though, because you need to know how many rows get created, and you will not be able to use a pager to dynamically change which rows each set of components gets bound to - that's set only at page load.

Answer 2

The issue here is your id has characters like : in it which have special meaning for css selectors, which jQuery mimics in it's selecting logic. You can target such an element in various ways.

//personally i would avoid this one as it will do a dom scan
console.log( $( '[id="view:_id1:repeat1:0:normalline"]' ).get() );

console.log( $( 'div' ).filter(function(){ return this.id === "view:_id1:repeat1:0:normalline"; }).get() );

//I would probably do this one or the one above if I was forced to.
console.log( $( document.getElementById( 'view:_id1:repeat1:0:normalline' ) ).get() );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="view:_id1:repeat1:0:normalline" class="line-normal-wrapper"></div>