This is a migrated thread and some comments may be shown as answers.

RadAjaxPanel blocks execution of jQuery

9 Answers 615 Views

Ajax

This is a migrated thread and some comments may be shown as answers.

David Robbins asked on 29 Dec 2008, 10:38 PM

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

                                <head runat="server">         
                            <title>Center Categories Maintenance</title>         
                            <link rel="stylesheet" href="Style/sunsetroundcorner.css" />         
                            <script type="text/javascript" src="./js/jquery-1.2.6.js"></script>         
                            <script type="text/javascript" src="./js/jquery.corner.js"></script>         
                            <script type="text/javascript">         
                                $(function(){         
                                    $("div.centercategorybox").corner();                      
                                    $("div.hashidbox").corner();          
                                    $("div.buttonBox").corner();         
                                });         
                            </script>          
                        </head>         

But when I place my controls inside the RadAjaxPanel, the script does not fire. Should I wrap my javascript inside a RadScriptBlock?

9 Answers, 1 is accepted

answered on 30 Dec 2008, 05:58 AM

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

answered on 27 Jan 2009, 09:04 PM

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

answered on 28 Jan 2009, 10:02 AM

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

answered on 28 Jan 2009, 12:32 PM

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:

    
            <script type="text/javascript">  
        
                    var ddYears, lblPrevYear, lblPrevYearIndex, lblCalcYear, txtCalcYearIndex, indexSection;  
        
                    var calcYear, selectedIndex;  
        
                    $(document).ready(function() {  
        
                        ddYears = $("#<%#ddYears.ClientID%>");  
        
                        lblPrevYear = $("#<%#lblPrevYear.ClientID%>");  
        
                        lblPrevYearIndex = $("#<%#lblPrevYearIndex.ClientID%>");  
        
                        lblCalcYear = $("#<%#lblCalcYear.ClientID%>");  
        
                    });  
        
                    function onRequestEnd( sender, args ) {  
        
                        var selectedYear = parseInt(ddYears.val());  
        
                        indexSection = $("#indexSection");  
        
                        indexSectionPrevYear = $("#indexSectionPrevYear");  
        
                        indexSectionCalcYear = $("#indexSectionCalcYear");  
        
                        if( selectedYear > -1 ) {  
        
                            indexSection.show(500);  
        
                            indexSectionPrevYear.show();  
        
                            if( ddYears[0].selectedIndex == 1 ) {  
        
                                indexSectionCalcYear.show();  
        
                            }  
        
                            else {  
        
                                indexSectionCalcYear.hide();  
        
                            }  
        
                        }  
        
                        else {  
        
                            indexSection.hide(500);  
        
                        }  
        
                    }  
        
                </script>

- 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?