RadAjaxManager not reloading javascript in IE7

2 posts, 0 answers
  1. James O'Brien
    James O'Brien avatar
    19 posts
    Member since:
    Oct 2009

    Posted 08 Apr 2011 Link to this post

    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" };
            "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.
  2. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 11 Apr 2011 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top