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

RadAjaxPanel blocks execution of jQuery

9 Answers 412 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
David Robbins
Top achievements
Rank 1
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

Sort by
0
Kevin Babcock
Top achievements
Rank 1
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
0
David Robbins
Top achievements
Rank 1
answered on 30 Dec 2008, 12:17 PM
Thanks - your level of detail is really awesome.  I'll try this today.  Thanks again!
0
Henrik
Top achievements
Rank 1
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 

0
Sebastian
Telerik team
answered on 28 Jan 2009, 09:45 AM
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.
0
Henrik
Top achievements
Rank 1
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
0
Henrik
Top achievements
Rank 1
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?

0
Sebastian
Telerik team
answered on 03 Feb 2009, 09:27 AM
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.
0
Henrik
Top achievements
Rank 1
answered on 04 Feb 2009, 08:50 AM
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?
0
Sebastian
Telerik team
answered on 04 Feb 2009, 09:14 AM
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.
Tags
Ajax
Asked by
David Robbins
Top achievements
Rank 1
Answers by
Kevin Babcock
Top achievements
Rank 1
David Robbins
Top achievements
Rank 1
Henrik
Top achievements
Rank 1
Sebastian
Telerik team
Share this question
or