How to pass Item id in repeater to javascript

Question

I need to pass client id id to JavaScript repeater

I have 3 divs inside the repeater. I have an onmouseover event. I want to grab client id from div element. Is there any way I can pass the exact client of the div element.

Can the guys help me? Thank.

Answer 1

Something like this (if I understood correctly):

Markup:

<asp:Repeater id="myRepeater" OnItemDataBound="myRepeater_ItemDataBound" runat="server">
    <ItemTemplate>
        <div id="myDiv" runat="server">......</div>
    </ItemTemplate>
</asp:Repeater>

Code for:

protected void myRepeater_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if(e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        HtmlGenericControl myDiv = e.Item.FindControl("myDiv") as HtmlGenericControl;
        // you can just pass "this" instead of "myDiv.ClientID" and get the ID from the DOM element
        myDiv.Attributes.Add("onmouseover", "doStuff('" + myDiv.ClientID + "');");
    }
}

Answer 2

If you want to do this in the markup, you can use to get the ClientId:

<%# Container.FindControl("_RepeaterEL").ClientID %>

Answer 3

<asp:Panel CssClass="modal hide fade" ID="myModal" runat="server">
                            <div class="modal-header">
                                <a class="close" data-dismiss="modal">×</a>
                                <h3>Add to cart</h3>
                            </div>
                            <div class="modal-body">
                                <nav>
                                    <iframe seamless src="/ToCart/<%# DataBinder.Eval(Container.DataItem, "code")%>"
                                        style="border-style: none;"> </iframe>
                                </nav>
                            </div>
</asp:Panel>

<a data-toggle="modal" href="#<%#Container.FindControl("myModal").ClientID%>">
    <div class="add-to-cart-one">+</div>
</a>

Answer 4

If the relay displays the browser, you can get the relay element with:

var rep = $get("<%= rpt.ClientID %>");

Otherwise wrap

<DIV id="RepeaterEL"></div> 

around the repeater and access its children either through pure JavaScript (and the childNodes collection) or using jQuery, for example

$("#RepeaterEL").children("DIV").each(function(i) {    
   var id = $(this).attr("id"); //<- pointer to DIV });