"'null' is null or not an object" error in IE8 but works in FF & Chrome

[Will]

I'm getting this error in IE8 only on my RadAjaxManager.  Works great in Chrome & FF4.  

Webpage error details

 

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; GTB6.6; SLCC2;
.NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E;
BRI/2)

Timestamp: Tue, 29 Mar 2011 22:25:34 UTC

 

Message: 'null' is null or not an object

Line: 162

Char: 13

Code: 0

Here's the RadAjaxManager:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="PageLoaded">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Label1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

Here's the OnAjaxRequest & OnLoad methods:

protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);
            RadAjaxManager ajaxManager = RadAjaxManager.GetCurrent(this.Page);
            if (ajaxManager == null)
            {
                ajaxManager = new RadAjaxManager();
                ajaxManager.ID = "RadAjaxManager1";
                Controls.Add(ajaxManager);
                this.Page.Items.Add(typeof(RadAjaxManager), ajaxManager);
            }
        }

protected void PageLoaded(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
        {
            if(e.Argument=="DocumentReady")
                DisplayDates(new DateTime(radCal.FocusedDate.Year, radCal.FocusedDate.Month, 1), new DateTime(radCal.FocusedDate.Year, radCal.FocusedDate.Month, DateTime.DaysInMonth(radCal.FocusedDate.Year, radCal.FocusedDate.Month)));
        }

Here's the javascript:

$(document).ready(function () {

            var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
            ajaxManager.ajaxRequest("DocumentReady");//THIS IS WHERE THE ERROR OCCURS

}

I have a feeling that I'm missing something important, but I'm still pretty new to telerik.  Any help would be appreciated, thanks.

[Iana Tsolova]

Hello Will,

Try modifying the client-side code as below:

function pageLoad(sender, eventArgs) {
    var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
    ajaxManager.ajaxRequest("DocumentReady");
}

Greetings,
Iana
the Telerik team

[Will]

Hi Lana, thanks for your response. This works for the initial load, but is causing a weird issue later.

So basically what I'm doing is using a RadCalendar, allowing it to render to the page, and then using an ajax call to populate the special dates on it, since the db call takes a while and I don't want it to prevent the rest of the page from loading while it populates.  I am also using a RadAjaxLoadingPanel which shows during the ajax calls so the user knows it's loading.  

This solution works well on the initial load, allowing the page to render and showing my loading panel.  However, it causes strange behavior when I change the month of the calendar, causing it to do it's ajax call.  It basically fires the initializeRequest function and immediately fires the endRequest function, causing the loading panel to show and then disappear immediately.  The ajax call still goes properly, but the loading panel isn't shown for the duration.  If I remove the pageLoad function, the calendar appears without doing an initial load, and changing the month shows the loading panel for the duration of the calendar's ajax call as expected.  This is the same regardless of browser.

Here's the Javascript:

<script type="text/javascript">
        var loadingPanel = "";
        var pageRequestManager = Sys.WebForms.PageRequestManager.getInstance();
        var postBackElement = "";
        pageRequestManager.add_initializeRequest(initializeRequest);
        pageRequestManager.add_endRequest(endRequest);

        function initializeRequest(sender, eventArgs) {
            postBackElement = eventArgs.get_postBackElement().id;
            $find("<% = RadAjaxLoadingPanel1.ClientID %>").show(postBackElement);
        }

        function endRequest(sender, eventArgs) {
            $find("<% = RadAjaxLoadingPanel1.ClientID %>").hide(postBackElement);
        }

       function pageLoad(sender, eventArgs) {
            var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
            ajaxManager.ajaxRequest("DocumentReady");
        }
</script>

Here's the full code behind:

public partial class CriticalDatesCalendar : System.Web.UI.UserControl
    {
        private void DisplayDates(DateTime StartDate, DateTime EndDate)
        {
            DataSet ds = WidgetService.GetProvider(Session[SessionConstants.ClientIdSessionKey]).GetCriticalDates(Convert.ToInt32(Session[SessionConstants.ClientIdSessionKey]), Convert.ToInt32(Session[SessionConstants.UserIdSessionKey]), StartDate, EndDate);

            foreach (DataRow dr in ds.Tables[0].Rows)
            {
                RadCalendarDay rcd = new RadCalendarDay();
                String tt = dr["LeaseCode"].ToString().Length > 8 ? dr["LeaseCode"].ToString().Substring(0, 8) + "..." : dr["LeaseCode"].ToString();
                tt += " - " + dr["DateType"].ToString().Replace("Date", "");
                if (tt.Trim() != "")
                    rcd.ToolTip = tt;

                rcd.ItemStyle.CssClass = dr["DateType"].ToString();

                foreach (RadCalendarDay rc in radCal.SpecialDays.ToArray())
                {
                    if (rc.Date == (DateTime)dr["Date"])
                    {
                        rcd = rc;
                        if (rcd.ToolTip.IndexOf(tt) == -1 && tt.Trim() != "")
                            rcd.ToolTip += '\n'.ToString() + tt;
                    }
                }

                rcd.Date = (DateTime)dr["Date"];
                rcd.Repeatable = Telerik.Web.UI.Calendar.RecurringEvents.None;
                rcd.ItemStyle.CssClass = rcd.ItemStyle.CssClass==dr["DateType"].ToString()? dr["DateType"].ToString(): "MultiDate";
                rcd.IsSelectable = true;
                radCal.SpecialDays.Add(rcd);
            }

            lstCommencementDates.DataSource = ds.Tables[0].Select("DateType = 'CommencementDate'");
            lstCommencementDates.DataBind();
            lstExpirationDates.DataSource = ds.Tables[0].Select("DateType = 'ExpirationDate'");
            lstExpirationDates.DataBind();
            lstRenewalDates.DataSource = ds.Tables[0].Select("DateType = 'RenewalDate'");
            lstRenewalDates.DataBind();
            lstFeeDates.DataSource = ds.Tables[0].Select("DateType = 'FeeDate'");
            lstFeeDates.DataBind();
            lstOptionDates.DataSource = ds.Tables[0].Select("DateType = 'OptionDate'");
            lstOptionDates.DataBind();

        }
        protected void NavigationChanged(object sender, DefaultViewChangedEventArgs e)
        {
            DisplayDates(new DateTime(radCal.FocusedDate.Year, radCal.FocusedDate.Month, 1), new DateTime(radCal.FocusedDate.Year, radCal.FocusedDate.Month, DateTime.DaysInMonth(radCal.FocusedDate.Year, radCal.FocusedDate.Month)));
        }

        protected void PageLoaded(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
        {
            if(e.Argument=="DocumentReady")
                DisplayDates(new DateTime(radCal.FocusedDate.Year, radCal.FocusedDate.Month, 1), new DateTime(radCal.FocusedDate.Year, radCal.FocusedDate.Month, DateTime.DaysInMonth(radCal.FocusedDate.Year, radCal.FocusedDate.Month)));
        }
    }

The RadAjaxLoadingPanel:

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" CssClass='loading' IsSticky="true">
    <asp:Image ID="Image1" runat="server" ImageUrl="~/images/loading_transparent_4.gif" CssClass="loadingimg"></asp:Image>
</telerik:RadAjaxLoadingPanel>

and the RadCalendar:

<telerik:RadCalendar runat="server" ID="radCal" Width="100%" AutoPostBack="true" OnDefaultViewChanged="NavigationChanged" PresentationType="Preview" EnableMonthYearFastNavigation="true" EnableNavigation="true"></telerik:RadCalendar>

Any help would be appreciated.  Thanks!

[Will]

I am also getting this javascript error, but I think only when I click to change the month while the ajax request is still going, which wouldn't be possible if my loading panel was being shown:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; GTB6.6; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; BRI/2)
Timestamp: Fri, 1 Apr 2011 18:08:43 UTC


Message: Sys.WebForms.PageRequestManagerServerErrorException: An unknown error occurred while processing the request on the server. The status code returned from the server was: 500
Line: 6
Char: 84093
Code: 0
URI: http://localhost/LeaseNet/Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_scriptManager_HiddenField&compress=1&_TSM_CombinedScripts_=%3b%3bSystem.Web.Extensions%2c+Version%3d4.0.0.0%2c+Culture%3dneutral%2c+PublicKeyToken%3d31bf3856ad364e35%3aen-US%3a1f68db6e-ab92-4c56-8744-13e09bf43565%3aea597d4b%3ab25378d2%3bTelerik.Web.UI%2c+Version%3d2009.3.1103.35%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen-US%3a4552b812-caf7-4129-9b53-8f199b5bce6c%3a16e4e7cd%3aed16cbdc%3af7645509%3a854aa0a7%3a874f8ea2%3a5a6d9d23%3aa51ee93e%3a59462f1


Message: Sys.WebForms.PageRequestManagerServerErrorException: An unknown error occurred while processing the request on the server. The status code returned from the server was: 500
Line: 6
Char: 84093
Code: 0
URI: http://localhost/LeaseNet/Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_scriptManager_HiddenField&compress=1&_TSM_CombinedScripts_=%3b%3bSystem.Web.Extensions%2c+Version%3d4.0.0.0%2c+Culture%3dneutral%2c+PublicKeyToken%3d31bf3856ad364e35%3aen-US%3a1f68db6e-ab92-4c56-8744-13e09bf43565%3aea597d4b%3ab25378d2%3bTelerik.Web.UI%2c+Version%3d2009.3.1103.35%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen-US%3a4552b812-caf7-4129-9b53-8f199b5bce6c%3a16e4e7cd%3aed16cbdc%3af7645509%3a854aa0a7%3a874f8ea2%3a5a6d9d23%3aa51ee93e%3a59462f1

[Will]

So what it looks like is happening when I run this with FireBug is as soon as the pageLoad request is finished, it fires the request again, because I guess the page has loaded again.  So what I did was added a boolean flag hasLoaded, initialized it to false, and when the pageLoad method runs the first time it sets it to true and doesn't do the ajax request again.  This is now working how I am wanting it.

<script type="text/javascript">
        var loadingPanel = "";
        var pageRequestManager = Sys.WebForms.PageRequestManager.getInstance();
        var postBackElement = "";
        var hasLoaded = false;
        pageRequestManager.add_initializeRequest(initializeRequest);
        pageRequestManager.add_endRequest(endRequest);

        function initializeRequest(sender, eventArgs) {
            postBackElement = eventArgs.get_postBackElement().id;
            $find("<% = RadAjaxLoadingPanel1.ClientID %>").show(postBackElement);
        }

        function endRequest(sender, eventArgs) {
            $find("<% = RadAjaxLoadingPanel1.ClientID %>").hide(postBackElement);
        }

        function pageLoad(sender, eventArgs) {
            if (!hasLoaded) {
                hasLoaded = true;
                var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
                ajaxManager.ajaxRequest("DocumentReady");
            }
        }
    </script>

[Iana Tsolova]

Hi Will,

Indeed, as you already found you should call the procedure in the pageLoad event only on initial load. This could be done the way you make it, or you can change the pageLoad event as below:

function pageLoad(sender, eventArgs) {
    if (!eventArgs.get_isPartialLoad()) {
        var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
        ajaxManager.ajaxRequest("DocumentReady");
    }
}

All the best,
Iana
the Telerik team