如何在重复控制中获取元素ID [英] How to get the element id in repeat control

问题描述

这是我的问题，我想在网页加载时动态设置元素的CSS，所以我使用了

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

是的，我使用了函数x $(idTag，param)...我尝试使用$("[id $ ='#{id:normalline}']")).css，当元素不在重复控件中..但是...一旦元素被包含在重复中，它将不再起作用.代码在这里:

updated

我想你们注意到重复中有一个按钮，还有另一个获取元素id的功能，奇怪的是它确实有效！那么为什么在尝试初始化时它不起作用?我检查了源代码，该元素变为

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

但真正的元素ID是

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

或者在页面加载时是否还有其他设置CSS的方法?

更新:这是我正在做的项目，希望你们在这里不要介意汉字

我想以ios-delete-style的形式实现此效果，当您单击减号按钮时，滚动线的div可以向左移动68px，我知道有很多jquery可以做到这一点，但是现在我要集中精力，如何设置法线的css以这种方式实现...

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

这是CSS样式文件

.line-wrapper {width:100％;溢出:隐藏； border-bottom:1px实心#E8E8E9}

.line-scroll-wrapper {空格:nowrap;清除:两个}

.line-normal-wrapper {display:inline-block;行高:100px;向左飘浮; padding-bottom:1px; margin-top:5px}

.line-btn-delete {宽度:68像素；高度:120像素}

到目前为止，我必须在.line-normal-wrapper中设置宽度值，以使删除按钮不出现在页面中，一旦将其删除，它将像这样:

但是我无法固定法线div的宽度，因为我无法控制所有设备的屏幕尺寸，即使在同一台设备上，旋转法线也很麻烦，因为法线的宽度是固定的.

我试图添加此项以设置宽度

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

但是，它仅在页面打开时起作用，一旦我添加新行或删除其中一行，它将变成图2的外观

那我现在应该怎么做... = =

再次更新.... ewhh .....我发现是否删除了ready函数...它起作用了...> ___<

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

解决方案

从jQuery的角度来看，塔普拉(Taplar)的回答是正确的，存在一个语法上的问题，该问题阻止了使用XPages ID(必须包含一个分层元素，使用XPages ID来实现).冒号，以确保在客户端具有唯一的ID(如您所见).

但是，这里有一个特定的XPages原因会影响您，这不是ID，而是重复的原因.这样可以防止您通过SSJS和jQuery CSJS从外部访问重复行.

XPages #{id:...}语法用于访问服务器端组件.但是在重复控件中，每行没有一组组件，只有一组没有绑定到任何行的组件.我在今年的几届会议中对此进行了介绍，并将在下周的TLCC网络研讨会上再次进行讨论.您可以通过使用XPages调试工具栏的检查器"选项卡查看XPage的组件树(XPage使用的页面的服务器端映射)来验证这一点.您将仅看到一组组件.如果设置重复的indexVar属性并在ID中使用该属性，则会看到ID不包含该属性，因为它没有为特定行加载一组组件，所以它是一组抽象的组件独立于重复.因此，#{id:...}语法映射到抽象模板组件，而不是特定行中的特定实例.

在组件上使用CSS样式是推荐的方法.

或者，如果在重复控件上设置了repeatControls="true"，则会为重复的 x 行创建一组组件，并且可以设置ID，包括以下内容的indexVar属性:重复控件，使您可以从外部访问它们.但是，这不是推荐的方法，因为您需要知道创建了多少行，并且您将无法使用分页器动态更改每组组件绑定到的行-仅在页面加载时设置. /p>

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>

解决方案

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.

这篇关于如何在重复控制中获取元素ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！