CODEWITHSUNDEEP
c#jqueryasp.netrepeatercustom-data-attribute
floormind
floormind

Reputation: 2028

jQuery is not finding Asp.net repeater alternating item

I have a repeater on my webforms page, with a list bounded to it. while binding the list, I also attach a data-id attribute to the tr. The problem is I need to use that id in a web service call from jQuery, I am testing whether I can get the id by logging the data-id attribute value when I click on a button from the repeater item, but from the looks of things, it only logs the Item and not the Alternating item.

Button one, three and five gets log every time I click them but when I click on button two and button four, nothing gets logged in the console. See code below.

Repeater Template

    <asp:Repeater runat="server" ID="rptList" OnItemDataBound="rptList_OnItemDataBound">
        <HeaderTemplate>
            <table>
        </HeaderTemplate>
        <ItemTemplate>
            <tr runat="server" id="trList">
                <td runat="server" id="tdList"></td>
                <td runat="server" id="tdBtnRemove">
                    <asp:Button runat="server" ID="btnRemove" CssClass="btnRemove" Text="Remove" OnClientClick="return false;"/></td>
            </tr>
        </ItemTemplate>
        <AlternatingItemTemplate>
            <tr runat="server" id="trList">
                <td runat="server" id="tdList"></td>
                <td runat="server" id="tdBtnRemove">
                    <asp:Button runat="server" ID="btnRemove" Text="Remove" OnClientClick="return false;"/></td>
            </tr>
        </AlternatingItemTemplate>
        <FooterTemplate>
            </table>
        </FooterTemplate>
    </asp:Repeater>

List item

List<string> listObj = new List<string>(){"one", "two", "three", "four", "five"}; 


    protected void rptList_OnItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        string listItem = (string) e.Item.DataItem;
        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
        {
            HtmlTableRow trList = (HtmlTableRow)e.Item.FindControl("trList");
            trList.Attributes.Add("data-id", listItem);

            HtmlTableCell tdList = (HtmlTableCell)e.Item.FindControl("tdList");
            tdList.InnerHtml = listItem;
        }
    }

jQuery button click method:

$(".btnRemove").click(function () {
    var dataAttributVal = $(this).closest("tr");
    var datA = dataAttributVal.data('id');
    console.log(datA);
});

Console result:

I click on all 5 buttons but i only get 1, 3, and 5 logged in the console

Upvotes: 2

Views: 473

Answers (1)

jbl
jbl

Reputation: 15413

As stated in the comments, your AlternatingItemTemplate misses the CssClass="btnRemove" attribute.

For this reason your $(".btnRemove").click(... binding does not target the buttons in your AlternatingItemTemplate

Upvotes: 0

Related Questions