asked on

JQuery - Call for each Item in a Repeater

I have a webpart that contains blogs. Each blog has a comments link and a like link (See Attached)

.

Each time a user clicks like I want to do something. Currently the jquery runs only on the first item and on no others.

Here is the jquery

$(document).ready(function () {
$('#newlikes').click(function () {
$(this).hide();
});
});

This is the markup

<div id="ZoneLeft">

<span id="newlikes"><a href="#likes">likes</a></span>
</div>

Can someone help me on how to get the jquery to fire for each item in my repeater.

Thanks

Tom Beck

Repeater

As in asp.net Repeater control?

If so, asp.net should be an included zone for the question.

If so, then the rendered id for each "like" link would need to be unique. What does the rendered source look like? Can you give each "like" link a class and access it through jQuery using that?

sherbug1015

ASKER

I posted the rendered source code in the original post. I don't think its possible to give each like link a unique class. How would I know how many classes to create. This will be a repeater that will grow each day.

Is there anything else I can do.

Tom Beck

Ids must be unique. If that is the rendered source code for each "like" link then you must correct that. It's been a while since I used asp.net, but I believe the <asp:Label> control renders as a span tag. So if you were to have this in your aspx markup:

<asp:Label ID="newlikes"><a href="#likes">likes</a></asp:Label>

It would render something like:

<span id="Repeater1_ctrl0_newlikes"><a href="#likes">likes</a></span>

The ctrl number would be unique for each "like" link.

What I am suggesting is to add a common class to the span tags like:

<asp:Label ID="newlikes" CssClass="newlikes"><a href="#likes">likes</a></asp:Label>

Then you can do this in jQuery:

$(document).ready(function () {
         $('.newlikes').click(function () {
           $(this).hide();
         });
     });

Open in new window

Rainer Jeschor

Hi,
you should also be able to use the selector where the id ends with newlikes:

$(document).ready(function () {
  $("span[id$='newlikes']").click(function () {
	$(this).hide();
  });
});

Open in new window

HTH
Rainer

sherbug1015

ASKER

I can't get either solution to work. Rainer your solution still only affects one item in the repeater. Tom your solution is throwing an error "newlikes_1 not found"

Rainer Jeschor

Hi,
OK, could you please post the generated HTML?
At least two or three entries?
Without getting the real DOM structure, classes and elements (names/ids) it is really difficult.

Thanks.
Rainer

sherbug1015

ASKER

I copied out three entries.

<div id="Likes">
<span id="newlikes" class="newlikes"><a href="#likes">likes</a></span>
</div>
<div id="Likes">
<span id="newlikes" class="newlikes"><a href="#likes">likes</a></span>
</div>
<div id="Likes">
<span id="newlikes" class="newlikes"><a href="#likes">likes</a></span>
</div>

ASKER CERTIFIED SOLUTION

Tom Beck

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial