+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Not able to get Unique Image id while using Telerik Rad Rotator

Not able to get Unique Image id while using Telerik Rad Rotator

3 posts, 1 answered
  1. Prateek
    Prateek avatar
    12 posts
    Registered:
    11 Sep 2012
    12 Apr 2013
    Link to this post
    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>
  2. Pavel Benov
    Pavel Benov avatar
    341 posts
    Registered:
    14 Mar 2016
    16 Apr 2013
    Link to this post
    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>

    like so:
    <ItemTemplate>
                    <a href="#section3" class="videolink">
                        <img src="<%# Eval("VideoUrl") %>" alt="videoImage" class="videoimage" />
                    </a>
                </ItemTemplate>

    In order to not have duplicating IDs on the output.

    Kind regards,
    Pavel Benov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
    Answered
  3. Prateek
    Prateek avatar
    12 posts
    Registered:
    11 Sep 2012
    17 Apr 2013
    Link to this post
    Thanks a lot for the reply!
3 posts, 1 answered