Remove From My Forums

Null is null or not an object - AjaxCalendarExtender

Question
0

Sign in to vote

User620289691 posted

Ummmm I get a strange error with this calendar control... here's an explanation of what happens..

The CalendarExtender control is defined like this in my markup...

<asp:TextBox ID="txtStartDate" runat="server" CssClass="txtField" Width="70px" />

<asp:Image ID="imgCalStart" runat="server" CssClass="imgCal" ImageUrl="./images/icon_calendar.gif" />
<ajaxToolkit:CalendarExtender ID="calStartDate" runat="server" TargetControlID="txtStartDate" PopupButtonID="imgCalStart" Format="dd/MM/yyyy">
</ajaxToolkit:CalendarExtender>

Nothing particularly special. So what happens is the calendar control puts a date using the specified format into txtStartDate. This works perfectly, however if you MANUALLY edit txtStartDate's value, then click away onto the page, then edit the date again and again click out of the control onto the page I get a JS error stating that Null is not an object. My JS is not good enough to work out how to overcome this so I thought I would post the element of the code that VS2005 is pointing to.

ScriptResource.axd

LINE 395: this._isAnimating = true;var newElement = this._modes[this._mode];var oldElement = newElement.cloneNode(true);this._body.appendChild(oldElement);if (visibleDate > date) {

newElement is causing the issue. Is there any fix to remedy this situation or do I have to revert to a lesser calendar control (which btw I REALLY DO NOT WANT TO DO as this control rules - apart from this issue)

Thanks in advance!

Thursday, July 12, 2007 9:41 AM

Answers

0

Sign in to vote
User-1087479560 posted

That's because the calender has never shown, so its elements has not being built.

And in the value changed event of the textbox, it uses elements in the calender which has not being built. That's why an exception is thrown.

You may force the calender to show when the page is initially loaded, and hide it immediately.
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Tuesday, July 17, 2007 9:40 PM

All replies

0

Sign in to vote

User620289691 posted

Has no one else found this?? I am using validation controls on the page as well (2x requiredfieldvalidators)

Could they interact with the CalendarExt control?

Monday, July 16, 2007 8:40 AM
0

Sign in to vote

User-1087479560 posted

Hi,

I can't reproduce the issue with your code. Can you post a simple sample here?

Tuesday, July 17, 2007 4:59 AM
0

Sign in to vote

User620289691 posted

This should do it...

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="Test.aspx.vb" Inherits="Test.Test" validateRequest="false"%>
<%@ Register TagPrefix="uc1" TagName="ucMenuNew" src="ucMenuNew.ascx" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<!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="Head2" runat="server">
        <title><%=Session("appTitle")%></title>
        <link href="stylesnew.css" type="text/css" rel="stylesheet" />

    </head>
    <body id="bdy">
        <form id="Form1" method="post" runat="server">

            <a name="top" />

            <asp:ScriptManager ID="ScriptManager1" runat="server" AsyncPostBackTimeout="1200" />

            <ajaxToolkit:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server" TargetControlID="headerDiv" ScrollEffectDuration="0.0001" />

            <asp:validationsummary id="ValidationSummary3" runat="server" CssClass="tekstred" ShowMessageBox="true" ShowSummary="false" />

            <div id="headerDiv" class="rptHeader" runat="server" style="z-index:100;">

                <table id="Table8" class="tblBusRepBrokDet1" cellspacing="0" cellpadding="0" border="0">
                <tr height="80">
                    <td class="tdImgHeaderRepeat" colspan="2">
                        <uc1:ucmenunew id="UcMenuNew3" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td class="content" valign="top">

                        <table id="Table9" cellspacing="0" cellpadding="0" width="96%" align="center" border="0">
                        <tr>
                            <td> </td>
                        </tr>
                        <tr>
                            <td class="pagetitlebig">
                                LargePageTitle
                            </td>
                            <td class="pagetitle" align="right">
                                pagetitle
                            </td>
                        </tr>
                        </table>

                        <table id="Table11" cellspacing="0" cellpadding="0" width="98%" align="center" border="0">
                        <tr>
                            <td>

                                <table id="Table12" cellspacing="0" cellpadding="0" width="100%" border="0">
                                <tr>
                                    <td class="boxtitle" colspan="2">
                                        Search Options
                                    </td>
                                </tr>
                                <tr>
                                    <td>

                                        <table class="headerControls">
                                        <tr>
                                            <td class="rptHeaderText">
                                                Broker: 
                                            </td>
                                            <td>
                                                <asp:dropdownlist id="DropBroker" runat="server" CssClass="field" Width="120px" />
                                            </td>
                                            <td class="rptHeaderText">
                                                Start date: 
                                            </td>

                                            <td>
                                                <asp:TextBox ID="txtStartDate" runat="server" CssClass="txtField" Width="80px" />
                                            </td>
                                            <td style="PADDING-TOP: 3px" align="left">

                                                <asp:Image ID="imgCalStart" runat="server" CssClass="imgCal" ImageUrl="./images/icon_calendar.gif" />
                                                <ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtStartDate" PopupButtonID="imgCalStart" Format="dd/MM/yyyy">
                                                </ajaxToolkit:CalendarExtender>

                                            </td>
                                            <td>
                                                <asp:requiredfieldvalidator id="RequiredFieldValidator4" runat="server" CssClass="tekstred" Display="None"
                                                    ControlToValidate="txtStartDate" ErrorMessage="Start Date is required!">*</asp:requiredfieldvalidator>
                                                <asp:rangevalidator id="Rangevalidator3" runat="server" CssClass="tekstred" Display="None" ControlToValidate="txtStartDate"
                                                    ErrorMessage="Invalid Start Date!" MaximumValue="1/1/2049" MinimumValue="1/1/2000" Type="Date">*</asp:rangevalidator>
                                            </td>
                                            <td class="rptHeaderText">
                                                End date: 
                                            </td>
                                            <td>
                                                <asp:textbox id="txtEndDate" runat="server" CssClass="txtField" Width="80px" />
                                            </td>
                                            <td style="PADDING-TOP: 3px" align="left">

                                                <asp:Image ID="imgCalEnd" runat="server" CssClass="imgCal" ImageUrl="./images/icon_calendar.gif" />
                                                <ajaxToolkit:CalendarExtender ID="CalendarExtender2" runat="server" TargetControlID="txtEndDate" PopupButtonID="imgCalEnd" Format="dd/MM/yyyy">
                                                </ajaxToolkit:CalendarExtender>

                                            </td>

                                            <td>
                                                <asp:rangevalidator id="Rangevalidator4" runat="server" CssClass="tekstred" Display="None" ControlToValidate="txtEndDate"
                                                    ErrorMessage="Invalid End Date!" MaximumValue="1/1/2049" MinimumValue="1/1/2000" Type="Date">*</asp:rangevalidator>
                                                <asp:requiredfieldvalidator id="Requiredfieldvalidator5" runat="server" CssClass="tekstred" Display="None" ControlToValidate="txtEndDate"
                                                    ErrorMessage="End Date is required!">*</asp:requiredfieldvalidator>
                                            </td>
                                            <td class="rptHeaderText">
                                                Type: 
                                            </td>
                                            <td>
                                                <asp:dropdownlist id="DropType" runat="server" CssClass="txtField" Width="94px" />
                                            </td>
                                            <td>
                                                 
                                                <asp:ImageButton ID="ibSubmit" runat="server" ImageUrl="./images/button_search.gif" style="cursor:pointer" />
                                                 
                                            </td>
                                            <td class="headerDLBtnCell">
                                                <asp:ImageButton id="ibDownload" runat="server" ImageUrl="./images/button_download.gif" style="cursor:pointer;display:none;" />
                                            </td>

                                        </tr>
                                        </table>

                                    </td>
                                    <td class="headerProgress">

                                        <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                                        <ProgressTemplate>
                                            
                                        </ProgressTemplate>
                                        </asp:UpdateProgress>

                                    </td>
                                </tr>
                                </table>
                            </td>

                        </tr>
                        </table>
                    </td>
                </tr>
                </table>

            </div>

</form>

</body>

</html>

Please bear in mind this is not the full file however I have included all of the functional elements

UCMENUNEW is a user control that prints to the screen within that TD and shouldn't cause problems..

Thanks

Dave

Tuesday, July 17, 2007 7:03 AM
0

Sign in to vote

User620289691 posted

Date is of format DD/MM/YYYY - try editing the year, then clicking onto the screen, then the month and clicking onto the screen - you should get it then...

Tuesday, July 17, 2007 7:04 AM
0

Sign in to vote
User-1087479560 posted

That's because the calender has never shown, so its elements has not being built.

And in the value changed event of the textbox, it uses elements in the calender which has not being built. That's why an exception is thrown.

You may force the calender to show when the page is initially loaded, and hide it immediately.
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Tuesday, July 17, 2007 9:40 PM
0

Sign in to vote

User620289691 posted

Pls don't call me a noob, but I would do that in code behind or the client side code? If so is it just a case of onload="document.getElementById('CalendarExt1').style.display:block;document.getElementById('CalendarExt1').style.display:none;"??

Also please can you tell me how you came to that conclusion? I'm interested to know how you found that out so that I may understand a bit more

Thanks for the answer, much appreciated!

Wednesday, July 18, 2007 7:29 AM
0

Sign in to vote

User-1087479560 posted

I would do that in code behind or the client side code?

Use javascript to show it, like this:

function fun(){
        var ce = $find("ce1");
        ce.show();
        ce.hide(); // hide it immediately

}

Personally, I'd prefer to setting the textbox to not editable so that the user can't edit the content of it directly to get rid of such a problem.

<ajaxToolkit:CalendarExtender ID="CalendarExtender1" BehaviorID="ce1" runat="server" TargetControlID="TextBox1" OnClientDateSelectionChanged="fun">
        </ajaxToolkit:CalendarExtender>

please can you tell me how you came to that conclusion?

I get this by debugging the script source of the calendar.

Wednesday, July 18, 2007 11:01 PM
0

Sign in to vote

User983634244 posted

monkeh,

Did you find a solution for this ? Could you help?

Thanks,
Sam

Tuesday, November 11, 2008 10:46 AM
0

Sign in to vote

User620289691 posted

Yes the fix of using the .show /.hide worked. Just put that in the onload event on the page

Wednesday, November 12, 2008 10:50 AM

Answered by:

Null is null or not an object - AjaxCalendarExtender

Question

Answers

All replies