AJAXPanel + MultiPage = JavaScript Error

2 posts, 0 answers
  1. JFoulk
    JFoulk avatar
    14 posts
    Member since:
    Nov 2009

    Posted 06 Jan 2010 Link to this post

    Hello all.  I ran into a little issue and hope that someone out there can help me figure this one out.  It's hard to explain, so let's just dig into it...

    Here's some code, markup first, then code behind (C#)...

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AJAXError._Default" %> 
     
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> 
    <%@ 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 id="Head1" runat="server">  
        <title></title>  
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <div> 
            <telerik:RadScriptManager runat="server">  
            </telerik:RadScriptManager> 
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">  
                <AjaxSettings> 
                    <telerik:AjaxSetting AjaxControlID="RadAjaxPanel1">  
                        <UpdatedControls> 
                            <telerik:AjaxUpdatedControl ControlID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1" /> 
                        </UpdatedControls> 
                    </telerik:AjaxSetting> 
                </AjaxSettings> 
            </telerik:RadAjaxManager> 
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Web20" /> 
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="200px" Width="300px">  
                <telerik:RadMultiPage ID="RadMultiPage1" runat="server">  
                    <telerik:RadPageView ID="RadPageView1" runat="server">  
                        <asp:Button ID="Button1" runat="server" Text="Switch Page" OnClick="Button1_Click" /> 
                    </telerik:RadPageView> 
                    <telerik:RadPageView ID="RadPageView2" runat="server">  
                        <asp:TextBox ID="TextBox1" runat="server" /><br /> 
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1" 
                            ErrorMessage="The field is required." EnableClientScript="true" ValidationGroup="ValidateMe" /> 
                        <asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server" TargetControlID="RequiredFieldValidator1">  
                        </asp:ValidatorCalloutExtender> 
                        <asp:Button ID="Button2" runat="server" Text="Set Text" OnClick="Button2_Click" ValidationGroup="ValidateMe" /> 
                    </telerik:RadPageView> 
                    <telerik:RadPageView ID="RadPageView3" runat="server">  
                        <asp:Label ID="Label1" runat="server" /> 
                    </telerik:RadPageView> 
                </telerik:RadMultiPage> 
            </telerik:RadAjaxPanel> 
        </div> 
        </form> 
    </body> 
    </html> 
     

    Code:

    using System;  
    using System.Threading;  
     
    namespace AJAXError  
    {  
        public partial class _Default : System.Web.UI.Page  
        {  
            protected void Page_Load(object sender, EventArgs e)  
            {  
                if (!IsPostBack)  
                {  
                    RadMultiPage1.SelectedIndex = 0;  
                }  
            }  
     
            protected void Button1_Click(object sender, EventArgs e)  
            {  
                RadMultiPage1.SelectedIndex = 1;  
            }  
     
            protected void Button2_Click(object sender, EventArgs e)  
            {  
                Thread.Sleep(2000); // To see the ajax panel working.  
                Label1.Text = TextBox1.Text;  
                RadMultiPage1.SelectedIndex = 2;  
            }  
        }  
    }  
     

    If you run this markup/code in a new asp.net web application, you will notice two things.  First of all, the validation does not work unless you encapsulate the Button2_Click code in a (Page.IsValid) check and the calloutextender doesn't work regardless.  Second, if you do use the Page.IsValid check and try to click the button twice (against validation) you will get a javascript error:

    Microsoft JScript runtime error: '_events' is null or not an object

    Any thoughts on this?  Is there a better way to use ajaxloadingpanels with a multipage setup?

    Thanks
  2. JFoulk
    JFoulk avatar
    14 posts
    Member since:
    Nov 2009

    Posted 06 Jan 2010 Link to this post

    Okay, I figured it out, but will leave the post up incase anyone else needs it.  I had a hard time finding anything on the net related to this error in this instance...

    The problem was the AJAXPanels all together... the same issue would have been seen with asp.net update panels.

    I simply removed the AJAXPanels and setup the AJAXManager to use the MultiPage directly and it works as expected, validation and all.

    Thanks for looking,

    Joshua Foulk
Back to Top