RadAjaxPanel blocks execution of jQuery

10 posts, 0 answers
  1. David Robbins
    David Robbins avatar
    11 posts
    Member since:
    Mar 2003

    Posted 29 Dec 2008 Link to this post

    I hope some one can help me.  I have the following jQuery I need to execute when my aspx page loads:

    1 <head runat="server"
    2     <title>Center Categories Maintenance</title> 
    3     <link rel="stylesheet" href="Style/sunsetroundcorner.css" /> 
    4     <script type="text/javascript" src="./js/jquery-1.2.6.js"></script> 
    5     <script type="text/javascript" src="./js/jquery.corner.js"></script> 
    6     <script type="text/javascript"
    7         $(function(){ 
    8             $("div.centercategorybox").corner();              
    9             $("div.hashidbox").corner();  
    10             $("div.buttonBox").corner(); 
    11         }); 
    12     </script>  
    13 </head> 

    But when I place my controls inside the RadAjaxPanel, the script does not fire.  Should I wrap my javascript inside a RadScriptBlock?
  2. Kevin Babcock
    Kevin Babcock avatar
    189 posts
    Member since:
    Mar 2007

    Posted 29 Dec 2008 Link to this post

    Hello David,

    It makes sense that your code would not work inside a RadAjaxPanel (or with an UpdatePanel or RadAjaxManager) because that script only runs when the page loads. When you use the Ajax controls, the page is not being loaded; instead, only part of the page is being updated with the new content. The result is that your JQuery function is only being called during the initial load.

    To fix this problem, you have two options. You can call your JQuery functions during the ASP.NET AJAX client-side library's endRequest event, which occurs when an asynchronous call has finished. Alternatively, you can use the RadAjaxPanel's ClientEvents-OnResponseEnd property to set a function that is called when the asynchronous call has finished. Here is a quick example which demonstrates both:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Telerik.Examples._Default" %> 
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server"
        <title>Example</title> 
        <script src="JavaScript/jquery-1.2.6.js" type="text/javascript"></script> 
        <script src="JavaScript/jquery.corner.js" type="text/javascript"></script> 
        <script type="text/javascript"
            $(function() { 
                $("div.test").corner(); 
            }); 
     
            function pageLoad() { 
                Sys.WebForms.PageRequestManager.getInstance().add_endRequest(AjaxResponseEnd); 
            } 
             
            function AjaxResponseEnd(sender, args) { 
                $("div.test").corner(); 
            } 
        </script> 
    </head> 
    <body> 
        <form id="form1" runat="server"
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />   
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" 
                ClientEvents-OnResponseEnd="AjaxResponseEnd"
                <div class="test" style="background-color: Blue; height: 200px; width: 300px;"
                    <asp:Literal ID="Literal1" runat="server" /> 
                </div>   
                <asp:Button ID="Button1" runat="server"  
                    OnClick="Button1_Click" 
                    Text="Click Me!" /> 
            </telerik:RadAjaxPanel> 
        </form> 
    </body> 
    </html> 
     

    using System; 
     
    namespace Telerik.Examples 
        public partial class _Default : System.Web.UI.Page 
        { 
            protected void Page_Load(object sender, EventArgs e) 
            { 
                if (!IsPostBack) 
                    Literal1.Text = DateTime.Now.ToString(); 
            } 
     
            protected void Button1_Click(object sender, EventArgs e) 
            { 
                Literal1.Text = DateTime.Now.ToString(); 
            } 
        } 
     

    If you go with the first option, you can remove the RadAjaxPanel's ClientEvents-OnResponseEnd property in the example above. If you choose the second option, you can remove the pageLoad() function.

    I hope this helps. If you need any additional assistance please let me know.

    Regards,
    Kevin Babcock
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. David Robbins
    David Robbins avatar
    11 posts
    Member since:
    Mar 2003

    Posted 30 Dec 2008 Link to this post

    Thanks - your level of detail is really awesome.  I'll try this today.  Thanks again!
  5. Henrik
    Henrik avatar
    40 posts
    Member since:
    Jan 2009

    Posted 27 Jan 2009 Link to this post

    Hi,

    I am having the same sort of problem, but the above does not seem to fix it.
    I have a AjaxManager declared like this:

    <tel:RadAjaxManager ID="AjaxManager" UpdatePanelsRenderMode="Inline" runat="server">  
            <AjaxSettings> 
                    ...  
            </AjaxSettings> 
            <ClientEvents OnResponseEnd="onRequestEnd" /> 
        </tel:RadAjaxManager> 

    The onRequestEnd method looks like this:

    function onRequestEnd( sender, args ) {  
                var selectedYear = parseInt(ddYears.val());  
                indexSection = $J("#indexSection");  
                indexSectionPrevYear = $J("#indexSectionPrevYear");  
                indexSectionCalcYear = $J("#indexSectionCalcYear");  
                  
                  
                if( selectedYear > -1 ) {  
                    indexSection.show(500);  
                    indexSectionPrevYear.show();  
                    if( ddYears[0].selectedIndex == 1 ) {  
                        indexSectionCalcYear.show();  
                    }  
                    else {  
                        indexSectionCalcYear.hide();  
                    }  
                }  
                else {  
                    indexSection.hide(500);  
                }  
            } 

    The "index...." elements are plain div tags with some asp:Label controls that are updated through AJAX requests.
    But when the onRequestEnd method is called, I get the error "Object doesn't support this property or method" when trying to get the elements by $J("...")

    This happens with IE7 - it works fine with Firefox. Can anyone tell me why I get this strange error? If I execute the JavaScript before any AJAX requests - everything is fine.

    Best regards

    Henrik 

  6. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 28 Jan 2009 Link to this post

    Hello Henrik,

    Can you please specify why you use $J instead of $ or $telerik.$ in this case? I suppose that you defined your own custom alias which may not work properly in this particular situation. I suggest you review the blog post linked below which explains how to use JQuery with our ASP.NET AJAX controls and expose Intellisense and revise your code to see whether this helps:

    RadControls for ASP.NET AJAX and JQuery

    Best regards,
    Sebastian
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  7. Henrik
    Henrik avatar
    40 posts
    Member since:
    Jan 2009

    Posted 28 Jan 2009 Link to this post

    Hi Sebastian,

    Thanks a lot for your reply.
    I have been using jQuery for some time before starting to use the Telerik control library. From the very beginning, I've been used to "declare" jQuery like this to avoid conflicts with other JavaScript libraries:
    <script type="text/javascript">  
    <!--  
        var $J = jQuery.noConflict();  
    //-->  
    </script> 

    I did not know that jQuery was included with your AJAX controls, so this is fantastic news for me :)
    I will try to follow the instructions from your link - I think they will solve my problem.

    Best regards

    Henrik
  8. Henrik
    Henrik avatar
    40 posts
    Member since:
    Jan 2009

    Posted 28 Jan 2009 Link to this post

    Hi Sebastian,

    Unfortunately, the changes did not fix the error. I now have the following code in the MasterPage:
    <asp:ScriptManager id="ScriptManager" runat="server">  
            <Scripts> 
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />   
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />   
                <asp:ScriptReference Path="~/Script/jquery-telerik.js" /> 
                <asp:ScriptReference Path="~/Script/ui.core.js" /> 
                <asp:ScriptReference Path="~/Script/ui.notificationmsg.js" /> 
            </Scripts> 
        </asp:ScriptManager> 

    And in my .aspx I have the following markup:

    <div id="indexSection">  
                <div id="indexSectionPrevYear">  
                    <asp:Label ID="lblPrevYear" runat="server" />:&nbsp;<span style="padding-left:7px;"><asp:Label ID="lblPrevYearIndex" CssClass="numeric" EnableViewState="true" runat="server" /></span>  
                </div> 
                <div id="indexSectionCalcYear">  
                    <asp:Label ID="lblCalcYear" EnableViewState="true" runat="server" />:&nbsp;  
                    <tel:RadNumericTextBox ID="txtCalcYearIndex" TabIndex="2" NumberFormat-DecimalSeparator="," MinValue="1" CssClass="textbox" Width="50px" runat="server">  
                        <EnabledStyle CssClass="textbox" /> 
                    </tel:RadNumericTextBox> 
                    <asp:RequiredFieldValidator ID="rfvCalcYearIndex" ControlToValidate="txtCalcYearIndex" ErrorMessage="Indtast venligst fællesindekstal" Display="Dynamic" CssClass="validationmarker" runat="server">*</asp:RequiredFieldValidator> 
                </div> 
            </div> 
    <div class="column">  
            <tel:RadGrid ID="gridData" AutoGenerateColumns="false" AllowPaging="false" AllowSorting="true" GridLines="None" Skin="Office2007"   
                         OnSortCommand="Grid_SortCommand" Width="300px" runat="server">  
                    <MasterTableView DataKeyNames="Id" CommandItemDisplay="None">  
                        <Columns> 
                            <tel:GridBoundColumn ItemStyle-Width="50%" ReadOnly="true" HeaderText="År" DataField="Aar" /> 
                            <tel:GridBoundColumn ItemStyle-Width="50%" ReadOnly="true" HeaderText="Indeks" DataType="System.Decimal" DataField="Indeks" /> 
                        </Columns> 
                    </MasterTableView> 
            </tel:RadGrid> 
        </div> 
     
    <tel:RadAjaxManager ID="AjaxManager" UpdatePanelsRenderMode="Inline" runat="server">  
            <AjaxSettings> 
                <tel:AjaxSetting AjaxControlID="ddYears">  
                    <UpdatedControls> 
                        <tel:AjaxUpdatedControl ControlID="lblPrevYear" /> 
                        <tel:AjaxUpdatedControl ControlID="lblPrevYearIndex" /> 
                        <tel:AjaxUpdatedControl ControlID="lblCalcYear" /> 
                        <tel:AjaxUpdatedControl ControlID="txtCalcYearIndex" /> 
                        <tel:AjaxUpdatedControl ControlID="gridData" /> 
                        <tel:AjaxUpdatedControl ControlID="tbButtons" /> 
                        <tel:AjaxUpdatedControl ControlID="indexSection" /> 
                        <tel:AjaxUpdatedControl ControlID="indexSectionCalcYear" /> 
                        <tel:AjaxUpdatedControl ControlID="indexSectionPrevYear" /> 
                    </UpdatedControls> 
                </tel:AjaxSetting> 
                <tel:AjaxSetting AjaxControlID="tbButtons">  
                    <UpdatedControls> 
                        <tel:AjaxUpdatedControl ControlID="gridData" /> 
                    </UpdatedControls> 
                </tel:AjaxSetting> 
                <tel:AjaxSetting AjaxControlID="tbButtons">  
                    <UpdatedControls> 
                        <tel:AjaxUpdatedControl ControlID="gridData" /> 
                    </UpdatedControls> 
                </tel:AjaxSetting> 
            </AjaxSettings> 
            <ClientEvents OnResponseEnd="onRequestEnd" /> 
        </tel:RadAjaxManager> 
    And the following JavaScript:
    1 <script type="text/javascript">  
    2         var ddYears, lblPrevYear, lblPrevYearIndex, lblCalcYear, txtCalcYearIndex, indexSection;  
    3         var calcYear, selectedIndex;  
    4         $(document).ready(function() {  
    5             ddYears = $("#<%#ddYears.ClientID%>");  
    6             lblPrevYear = $("#<%#lblPrevYear.ClientID%>");  
    7             lblPrevYearIndex = $("#<%#lblPrevYearIndex.ClientID%>");  
    8             lblCalcYear = $("#<%#lblCalcYear.ClientID%>");  
    9  
    10         });  
    11           
    12         function onRequestEnd( sender, args ) {  
    13             var selectedYear = parseInt(ddYears.val());  
    14             indexSection = $("#indexSection");  
    15             indexSectionPrevYear = $("#indexSectionPrevYear");  
    16             indexSectionCalcYear = $("#indexSectionCalcYear");  
    17               
    18               
    19             if( selectedYear > -1 ) {  
    20                 indexSection.show(500);  
    21                 indexSectionPrevYear.show();  
    22                 if( ddYears[0].selectedIndex == 1 ) {  
    23                     indexSectionCalcYear.show();  
    24                 }  
    25                 else {  
    26                     indexSectionCalcYear.hide();  
    27                 }  
    28             }  
    29             else {  
    30                 indexSection.hide(500);  
    31             }  
    32         }  
    33     </script>  
    34  

    - but IE7 still fails in line 14 of the JavaScript: "Object doesn't support this property or method"
    As before - it works in Firefox3

     

    Can you please explain to me why?

  9. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 03 Feb 2009 Link to this post

    Hello Henrik,

    Does removing the script execution from the OnResponseEnd handler of the manager and performing these actions through the ResponseScripts collection of the control eliminates the error you receive? I suspect that the document.ready state and the JQuery initialization have a bit different lifecycle under IE and FireFox and this causes the exception you get.

    Let me know whether these directions are helpful.

    Kind regards,
    Sebastian
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  10. Henrik
    Henrik avatar
    40 posts
    Member since:
    Jan 2009

    Posted 04 Feb 2009 Link to this post

    Hi Sebastian,

    Moving the script did not make a difference.
    But after I added an  <asp:Panel /> around the controls on the page, everything seems to work as it should. Could you explain why?
  11. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 04 Feb 2009 Link to this post

    Hello Henrik,

    Unfortunately I am not able to provide a reasonable explanation of this oddity under IE browser. You may consider the approach which the asp Panel (if applicable) or isolate a subset of your project, illustrating the abnormality, and send it enclosed to a regular support ticket. Thus I will examine your entire code logic in detail and will do my best to provide more to-the-point answer/solution.

    Kind regards,
    Sebastian
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017