Rotator bug with fb/gp1/twitter!?

[Alin]

Hello Telerik Team

I have a rotator which shows photos, and below each photo I have like buttons for facebook, gplus and twitter. When the first photo shows up, the links are there and seem to be ok, but when I click(or mouseover) the rotators buttons, the links just disappear. Can you spot the error or give me an idea please? Thx a lot! The code I use is this:

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="LoadingPanel1"
            EnableAJAX="false">
            <telerik:RadRotator runat="server" ID="RadRotator1" Skin="Black" RotatorType="Buttons"
                DataSourceID="ObjectDataSource2" Width="850px" Height="520px" ScrollDirection="Right,Left "
                SlideShowAnimation-Type="Fade" EnableAjaxSkinRendering="true" WrapFrames="true"
                OnClientItemShown="ItemShown_handler" OnItemClick="RadRotator1_ItemClick" OnItemDataBound="RadRotator1_ItemDataBound">
                <ItemTemplate>
                    <div>
                        <%#SetInitialIndex(Container) %>
                        <telerik:RadBinaryImage runat="server" ID="RadBinaryImage1" ResizeMode="Fit" DataValue='<%#Eval("Data") %>'
                             Style="padding-left: 5px;
                            padding-right: 5px;" />
                        <asp:Label runat="server" ID="lblTinyURL" Visible="true" ToolTip='<%#Eval("TinyURL") %>'
                            ForeColor="Black" Font-Size="XX-Small"></asp:Label>
                    </div>
                </ItemTemplate>
            </telerik:RadRotator>
        </telerik:RadAjaxPanel>

        <telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server" LoadingPanelID="LoadingPanel1"
            EnableAJAX="false">
        <div>
        <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
        <table>
            <tr>
                <td>
                    <div id="fbDiv">

                    </div>
                </td>
                <td>
                    <div id="gp1Div">

                    </div>
                </td>
                <td>
                    <div id="twitterDiv">

                    </div>
                </td>
            </tr>
        </table>
        </div>
        </telerik:RadAjaxPanel>

        <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
            <script type="text/javascript">
                function ItemShown_handler(sender, args) {
                    var ItemIndex = sender.get_currentItem().get_index();

                    // Get the wraper element ;
                    var wrapper = getWrapperElement(args.get_item());

                    // Find an asp control
                    var aspLabelLink_InsideTemplate = findAspControl("lblLink", wrapper);
                    var aspLabelTinyUrl_InsideTemplate = findAspControl("lblTinyURL", wrapper);

                    var fb = aspLabelTinyUrl_InsideTemplate.outerHTML;
                    var gp1 = aspLabelTinyUrl_InsideTemplate.outerHTML;
                    var twitter = aspLabelTinyUrl_InsideTemplate.outerHTML;

                    if (fb.length > 0 && fb.indexOf("title=") > -1)
                        fb = fb.substring(fb.indexOf("title=") + 6, fb.indexOf("></SPAN>"));
                    if (gp1.length > 0 && gp1.indexOf("title=") > -1)
                        gp1 = gp1.substring(gp1.indexOf("title=") + 6, gp1.indexOf("></SPAN>"));
                    if (twitter.length > 0 && twitter.indexOf("title=") > -1)
                        twitter = twitter.substring(twitter.indexOf("title=") + 6, twitter.indexOf("></SPAN>"));

                    //var fbDiv = findHtmlElement("fbDiv", wrapper);
                    fbDiv.innerHTML = "<div class=\"fb-like\" data-href=\"" + fb + "\" data-send=\"true\" data-width=\"450\" data-show-faces=\"true\" data-colorscheme=\"dark\"></div>";

                    //var gp1Div = findHtmlElement("gp1Div", wrapper);
                    gp1Div.innerHTML = "<div class=\"g-plusone\" data-href=\"" + gp1 + "\"></div><span itemprop=\"description\"></span>";

                    //var twitterDiv = findHtmlElement("twitterDiv", wrapper);
                    var firstPartUrl = "<a href=\"https://twitter.com/share\" class=\"twitter-share-button\" data-url=\"" + twitter;
                    var restOfUrl1 = "\" data-text=\"Nice!!!\" data-count=\"horizontal\">Tweet</a>";

                    twitterDiv.innerHTML = firstPartUrl + restOfUrl1;

                    //$find("<%= RadAjaxManager1.ClientID %>").ajaxRequest(ItemIndex);
                }

                function findHtmlElement(id, wrapperElement) {
                    // Get the image ;
                    var image = $get(id, wrapperElement);
                    return image;
                }

                function findAspControl(id, wrapperElement) {
                    // Get the control ;
                    var control = $get(wrapperElement.id + "_" + id, wrapperElement);
                    return control;
                }

                function getWrapperElement(rotatorItem) {
                    var itemElem = rotatorItem.get_element();
                    var wrapper = itemElem.firstChild;
                    return wrapper;
                }

            </script>

        </telerik:RadCodeBlock>

[Alin]

Never mind, I solved it :)

The fb and gplus buttons are asynch, so generating them with javascript each time the rotator item changes is not a good idea.
I just put the like buttons(with all the necessary code) in the respective divs when the page loads, and then, using javascript, change the link they point to, every time the rotator item changes, and it works.
Hope this helps.