RadAjaxManager not reloading javascript in IE7

[James O'Brien]

Hi,

I have an issue javascript not reloading in IE7, in all the other browsers this works good. My application has a Multiview controlled by some LinkButtons. Inside of each view I have a user control and I have some javascript inside of each of them. All this inside of a RadAjaxManager.

The code on the page looks like this:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="LinkScottDecker">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="LinkScottDecker" />
                    <telerik:AjaxUpdatedControl ControlID="MultiView1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="LinkBradBlock">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="LinkBradBlock" />
                    <telerik:AjaxUpdatedControl ControlID="MultiView1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
</telerik:RadAjaxManager>

<asp:LinkButton ID="LinkScottDecker" runat="server" OnClick="LinkScottDecker_Click" ToolTip="Scott Decker">
     <asp:Image ID="scottdeckerImage" runat="server" ImageUrl="~/img/executive-thumb-scott-decker.jpg" CssClass="exec-thumbs-scott" />
</asp:LinkButton>
<asp:LinkButton ID="LinkBradBlock" runat="server" OnClick="LinkBradBlock_Click" ToolTip="Brad Block">
     <asp:Image ID="bradblockImage" runat="server" ImageUrl="~/img/executive-thumb-brad-block.jpg" CssClass="exec-thumbs-first-line" />
</asp:LinkButton>

<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
     <asp:View ID="ViewScottDecker" runat="server">
          <ucBio1:ucScottDecker ID="ucScottDekcer1" runat="server" />
     </asp:View>
     <asp:View ID="ViewBradBlock" runat="server">
          <ucBio2:ucBradBlock ID="ucBradBlock1" runat="server" />
     </asp:View>
</asp:MultiView>

The code inside of the user controls looks like this:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ucScottDecker.ascx.cs" Inherits="uc_bios_ScottDecker" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<img src="../img/executive-photo-scott-decker.jpg" class="exec-photo" alt="Scott Decker" />
<p>Scott Decker</p>
<p>As President, Scott Decker believes the best is yet to come............</p>

<telerik:radscriptblock id="RadScriptBlock2" runat="server">
    <script type="text/javascript">
        var $j = jQuery.noConflict();
        $j(document).ready(function () {
            //When you click on a link with class of poplight and the href starts with a #
            $j('a.poplight[href^=#]').click(function () {
                var popID = $j(this).attr('rel'); //Get Popup Name
                var popURL = $j(this).attr('href'); //Get Popup href to define size
                //Pull Query & Variables from href URL
                var query = popURL.split('?');
                var dim = query[1].split('&');
                var popWidth = dim[0].split('=')[1]; //Gets the first query string value
                //Fade in the Popup and add close button
                $j('#' + popID).fadeIn().css({ 'width': Number(popWidth) }).prepend('<a href="#" class="close" onclick="javascript:ytplayer.stopVideo()"><img src="../img/close_pop.png" class="btn_close" title="Close Window" alt="Close" border="0" /></a>');
                //Define margin for center alignment (vertical   horizontal) - we add 80px to the height/width to accomodate for the padding  and border width defined in the css
                var popMargTop = ($j('#' + popID).height() + 80) / 2;
                var popMargLeft = ($j('#' + popID).width() + 80) / 2;
                //Apply Margin to Popup
                $j('#' + popID).css({
                    'margin-top': -popMargTop,
                    'margin-left': -popMargLeft
                });
                //Fade in Background
                $j('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
                $j('#fade').css({ 'filter': 'alpha(opacity=80)' }).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
                return false;
            });
            //Close Popups and Fade Layer
            $j('a.close, #fade').live('click', function () { //When clicking on the close or fade layer...
                $j('#fade , .popup_block').fadeOut(function () {
                    $j('#fade, a.close').remove();  //fade them both out
                });
                return false;
            });
        });
    </script>
    <script type="text/javascript">
        var params = { allowScriptAccess: "always" };
        var atts = { id: "myytplayer" };
        swfobject.embedSWF("http://www.youtube.com/e/I5QezMuqpJA?enablejsapi=1&playerapiid=ytplayer",
        "ytapiplayer", "560", "349", "8", null, null, params, atts);

        function onYouTubePlayerReady(playerId) {
            ytplayer = document.getElementById("myytplayer");
        }
    </script>
</telerik:radscriptblock>

<div>
        <p>Transforming Healthcare:br />
            <a href="#?w=560" class="poplight" rel="popup_name">How NextGen continues to be an industry
                leader.</a>
        </p>
</div>
<div id="popup_name" class="popup_block">
    <!--<center><iframe title="YouTube video player" width="560" height="349" src="http://www.youtube.com/embed/I5QezMuqpJA" frameborder="0" allowfullscreen></iframe></center>-->
    <div id="ytapiplayer">
        You need Flash player 8+ and JavaScript enabled to view this video.
    </div>
</div>

I just need that javascript to load every time the multiview is updated.

[Iana Tsolova]

Hi James,

In a scenario when you have dynamically loaded user control with ajax and the user control has declarative javascript, one approach to make the script load is to wrap it in RadScriptBlock. However there are cases where this approach doe not work. Then you should register the scripts manually, using the ScriptManager.RegisterStartupScript static method. You can call it on Page_Load or Page_PreRender.

Give it a try and let me know how it goes.


Greetings,

Iana
the Telerik team