• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2318
  • Last Modified:

How to itereate through repeater control itemtemplate data using Javascript?

Using asp.net 2 (VB).  
I have two controls in place.
1.  An ASP.NET repeater conrol with a string (image path) as part of the Item Template (first element of each row).
2.  A client side javascript image carousel control which requires that string for population. The client side caradd function is already written.

This seems like a simple thing but....  I'd like to either:
1.   Call the carradd javascript upon every itemTemplate itemcreated
2.  Iterate through the completed repeater control, extract the needed string and feed it to the client side function.

I understand that this should probably be done with AJAX but I'm not quite ready to tackle that this week so....

Thank you.
2 Solutions
ZvonkoSystems architectCommented:
Show that JavaScript function. It surely needs changes to get the images as parameters from every image in rows. Also state what that function should do on multiple images, change them all at let say one second interval? Chnage randomly one of many images at interval?
I know you didn't want to involve AJAX in your solution. However, and I make no apologies for this, I would really recomend looking at AJAX, specifically the SlideShowExtender Control in the ASP.NET AJAX Control Toolkit (http://asp.net/AJAX/AjaxControlToolkit/Samples/SlideShow/SlideShow.aspx). It really is simple!

-- WebService method to provide the list to loop --
    <script runat="Server" type="text/C#">
        public static AjaxControlToolkit.Slide[] GetSlides()
            return new AjaxControlToolkit.Slide[] {
            new AjaxControlToolkit.Slide("images/Blue hills.jpg", "Blue Hills", "Go Blue"),
            new AjaxControlToolkit.Slide("images/Sunset.jpg", "Sunset", "Setting sun"),
            new AjaxControlToolkit.Slide("images/Winter.jpg", "Winter", "Wintery..."),
            new AjaxControlToolkit.Slide("images/Water lilies.jpg", "Water lillies", "Lillies in the water"),
            new AjaxControlToolkit.Slide("images/VerticalPicture.jpg", "Sedona", "Portrait style picture")};

-- Items to be in body of page --
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div style="text-align:center">
            <asp:Image ID="Image1" runat="server"
                Style="border: 1px solid black;width:auto"
                ImageUrl="~/SlideShow/images/Blue hills.jpg"
                AlternateText="Blue Hills image" />
            <asp:Label runat="Server" ID="imageLabel1"/><br /><br />
            <asp:Button runat="Server" ID="prevButton" Text="Prev" Font-Size="Larger" />
            <asp:Button runat="Server" ID="playButton" Text="Play" Font-Size="Larger" />
            <asp:Button runat="Server" ID="nextButton" Text="Next" Font-Size="Larger" />
            <ajaxToolkit:SlideShowExtender ID="slideshowextend1" runat="server"
                Loop="true" />

Hopefully you can see from the code above that it's really not that complicated. I can assure you it will take less time to understand and impliment this that it will to engineer a solution the hard way.
RichardKlineAuthor Commented:
I give -- AJAX it is.  Perhaps I'll get out that book I purchased.
The extender which McExp references will get me past my immediate hurdle.  
Ultimately, I plan to use Bill Scott's carousel (http://billwscott.com/carousel/ ) which does some really cool things over and beyond the extender.   He also provides an AJAX data source example using PHP (which I want to get involved with right now even less than AJAX).

Thanks to Zvonko for his input.   I'm not sure that his immediate concern is correct (though it certainly may!) but his question made me re-examine my initial beliefs -- kludging an interface might not be as easy as I first thought.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now