Not able to get Unique Image id while using Telerik Rad Rotator
I am using a custom control and created a Telerik RadRotator in it. I have binded images in the RadRotator. I want to call a javascript function based on which image is clicked in the slider. I get the source of the image in the function. Currently when the function is called its only able to get it for the first item. Nothing happens for the rest of them.
Can someone help me on this.
Below is the code :
<telerik:RadRotator ID="VideosCarousel" runat="server" Width="94%" Height="180" RotatorType="Buttons"
WrapFrames="true" CssClass="videoscarousel">
<ItemTemplate>
<a href="#section3" id="videolink">
<img src="<%# Eval("VideoUrl") %>" alt="videoImage" id="videoimage" />
</a>
</ItemTemplate>
</telerik:RadRotator>
<script type="text/javascript">
$(document).ready(function ()
$("#videolink").click(function ()
alert("Handler for .click() called.");
);
);
</script>
Hello Prateek,
The problem is coming from the fact that you are setting an Id on the <a> tag instead of class for example. Therefore in the output of the browser all <a> tags in the Rotator control will be with the same ID and as you might know the ID should be unique identifier. This is why only one of the items works with the JS function.
Try changing the following lines:
<
ItemTemplate
>
<
a
href
=
"#section3"
id
=
"videolink"
>
<
img
src
=
"<%# Eval("
VideoUrl") %>" alt="videoImage" id="videoimage" />
</
a
>
</
ItemTemplate
>
<
ItemTemplate
>
<
a
href
=
"#section3"
class
=
"videolink"
>
<
img
src
=
"<%# Eval("
VideoUrl") %>" alt="videoImage" class="videoimage" />
</
a
>
</
ItemTemplate
>
Thanks a lot for the reply!