• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3351
  • Last Modified:

Runtime Error: 'length is null or not an object'

I need help with this stupid error message.

I have an aspx WebForm where user fills out lengthy application.
To help users i created several things to help them with input -
including Custom built JavaScript calendar control : basically how that works is user clicks on an image (button) - calendar is displayed, user picks a date --> date is put to dateBox by JScript calendar.
 It has worked for me great in the past - no ASP 3.0 page had a problem with that.

However - when I put it in my .aspx page - i get the "Runtime Error: 'length is null or not an object'".
I mean - it still works as .net is still able to retrieve values from the DateBox and submit the Form - but it's just too ANNOYING.

Please HELP!
0
MargusLehiste
Asked:
MargusLehiste
1 Solution
 
s_sansanwalCommented:
Could you provide me details. Alternatively, try appending form name to the control in the function
like
javascript:ShowCalendar('Form1.txtClosedDate');

Cheers,
S Sansanwal
0
 
surajgupthaCommented:
I think that it might be a javascript mistake.
So if you are using .net 2003 you can find out which part of the javascript went wrong
Goto

IE ->Tools -> Internet Options -> Advanced -> Browsing

Uncheck "Disable Script Debugging"

So next time the error pops up you can debug it and find out which part went wrong.

regards,
Suraj
0
 
AerosSagaCommented:
post the code
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
MargusLehisteAuthor Commented:
Code:
-------------
-------------
.aspx page:
-------------
<tr>
<td class="StandardFormType" vAlign="top" width="180">Date Posted(mm/dd/yyyy):</td>
<td class="StandardBodyType14" vAlign="top" width="420" colSpan="3">
      <!-- For calendar Javascript control -->
      <script src="/newmpow/build/jscalendar/calendar.js" type="text/javascript"></script>
      <script src="/newmpow/build/jscalendar/lang/calendar-en.js" type="text/javascript"></script>
      <script src="/newmpow/build/jscalendar/calendar-setup.js" type="text/javascript"></script>
      <asp:textbox id="txtDatePosted" tabIndex="19" runat="server" CssClass="StandardBodyType14"></asp:textbox><IMG id="s_from" onmouseover="this.style.background='red';" title="Date selector" style="BORDER-RIGHT: red 1px solid; BORDER-TOP: red 1px solid; BORDER-LEFT: red 1px solid; CURSOR: pointer; BORDER-BOTTOM: red 1px solid"
            onmouseout="this.style.background=''" src="/newmpow/build/jscalendar/img.gif">
      <script type="text/javascript">
            Calendar.setup({
                  inputField     :    "txtDatePosted",     // id of the input field
                  ifFormat       :    "%m/%d/%Y",      // format of the input field
                  button         :    "s_from",  // trigger for the calendar (button ID)
                  align          :    "b",           // alignment (defaults to "Bl")
                  step           :    1 ,
                  singleClick    :    true
            });
      </script>
      &nbsp;<asp:requiredfieldvalidator id="vldDatePostedRequired" runat="server" CssClass="standardFormType" Font-Size="16pt"
            Display="Dynamic" ErrorMessage="Date Posted Required" ControlToValidate="txtDatePosted" Width="11px"> *</asp:requiredfieldvalidator>
      <asp:comparevalidator id="vldDatePostedinvDate" runat="server" CssClass="standardFormType" Display="Dynamic"
            ErrorMessage="Date Posted  is not a valid date." ControlToValidate="txtDatePosted" Type="Date" ValueToCompare="01/20/2000"
            Operator="GreaterThan">Date Posted shoud be in a <br>Format: 01/20/2004</asp:comparevalidator></td>
</tr>
<tr>
<td class="StandardFormType" vAlign="top" width="180">Closing Date(mm/dd/yyyy):</td>
<td class="StandardBodyType14" vAlign="top" width="420" colSpan="3"><asp:textbox id="txtClosingDate" tabIndex="20" runat="server" CssClass="StandardBodyType14"></asp:textbox><IMG id="s_to" onmouseover="this.style.background='red';" title="Date selector" style="BORDER-RIGHT: red 1px solid; BORDER-TOP: red 1px solid; BORDER-LEFT: red 1px solid; CURSOR: pointer; BORDER-BOTTOM: red 1px solid"
            onmouseout="this.style.background=''" src="/newmpow/build/jscalendar/img.gif">
      <script type="text/javascript">
            Calendar.setup({
                  inputField     :    "txtClosingDate",     // id of the input field
                  ifFormat       :    "%m/%d/%Y",       // format of the input field
                  button         :    "s_to",  // trigger for the calendar (button ID)
                  align          :    "b",           // alignment (defaults to "Bl")
                  step           :    1 ,
                  singleClick    :    true
            });
      </script>
      &nbsp;&nbsp;<asp:requiredfieldvalidator id="vldClosingDateRequired" runat="server" CssClass="standardFormType" Font-Size="16pt"
            Display="Dynamic" ErrorMessage="Closing Date Required" ControlToValidate="txtClosingDate" Width="11px"> *</asp:requiredfieldvalidator><asp:comparevalidator id="vldClosingDateInvDate" runat="server" CssClass="standardFormType" Display="Dynamic"
            ErrorMessage="Closing Date is not a valid date." ControlToValidate="txtClosingDate" Type="Date" ValueToCompare="01/20/2000" Operator="GreaterThan">Closing Date shoud be in a <br>Format: 01/20/2004</asp:comparevalidator></td>
</tr>
0
 
MargusLehisteAuthor Commented:
Calendar-setup.js:
---------------------
/*  Copyright Mihai Bazon, 2002, 2003  |  http://dynarch.com/mishoo/
 * ---------------------------------------------------------------------------
 * The DHTML Calendar
 * Details and latest version at:
 * http://dynarch.com/mishoo/calendar.epl
 * This script is distributed under the GNU Lesser General Public License. */

Calendar.setup = function (params) {
      function param_default(pname, def) { if (typeof params[pname] == "undefined") { params[pname] = def; } };

      param_default("inputField",     null);
      param_default("displayArea",    null);
      param_default("button",         null);
      param_default("eventName",      "click");
      param_default("ifFormat",       "%Y/%m/%d");
      param_default("daFormat",       "%Y/%m/%d");
      param_default("singleClick",    true);
      param_default("disableFunc",    null);
      param_default("dateStatusFunc", params["disableFunc"]);      // takes precedence if both are defined
      param_default("firstDay",       0); // defaults to "Sunday" first
      param_default("align",          "Br");
      param_default("range",          [1900, 2999]);
      param_default("weekNumbers",    true);
      param_default("flat",           null);
      param_default("flatCallback",   null);
      param_default("onSelect",       null);
      param_default("onClose",        null);
      param_default("onUpdate",       null);
      param_default("date",           null);
      param_default("showsTime",      false);
      param_default("timeFormat",     "24");
      param_default("electric",       true);
      param_default("step",           2);
      param_default("position",       null);
      param_default("cache",          false);
      param_default("showOthers",     false);

      var tmp = ["inputField", "displayArea", "button"];
      for (var i in tmp) {
            if (typeof params[tmp[i]] == "string") {
                  params[tmp[i]] = document.getElementById(params[tmp[i]]);
            }
      }
      if (!(params.flat || params.inputField || params.displayArea || params.button)) {
            alert("Calendar.setup:\n  Nothing to setup (no fields found).  Please check your code");
            return false;
      }

      function onSelect(cal) {
            var p = cal.params;
            var update = (cal.dateClicked || p.electric);
            if (update && p.flat) {
                  if (typeof p.flatCallback == "function")
                        p.flatCallback(cal);
                  else
                        alert("No flatCallback given -- doing nothing.");
                  return false;
            }
            if (update && p.inputField) {
                  p.inputField.value = cal.date.print(p.ifFormat);
                  if (typeof p.inputField.onchange == "function")
                        p.inputField.onchange();
            }
            if (update && p.displayArea)
                  p.displayArea.innerHTML = cal.date.print(p.daFormat);
            if (update && p.singleClick && cal.dateClicked)
                  cal.callCloseHandler();
            if (update && typeof p.onUpdate == "function")
                  p.onUpdate(cal);
      };

      if (params.flat != null) {
            if (typeof params.flat == "string")
                  params.flat = document.getElementById(params.flat);
            if (!params.flat) {
                  alert("Calendar.setup:\n  Flat specified but can't find parent.");
                  return false;
            }
            var cal = new Calendar(params.firstDay, params.date, params.onSelect || onSelect);
            cal.showsTime = params.showsTime;
            cal.time24 = (params.timeFormat == "24");
            cal.params = params;
            cal.weekNumbers = params.weekNumbers;
            cal.setRange(params.range[0], params.range[1]);
            cal.setDateStatusHandler(params.dateStatusFunc);
            cal.create(params.flat);
            cal.show();
            return false;
      }

      var triggerEl = params.button || params.displayArea || params.inputField;
      triggerEl["on" + params.eventName] = function() {
            var dateEl = params.inputField || params.displayArea;
            var dateFmt = params.inputField ? params.ifFormat : params.daFormat;
            var mustCreate = false;
            var cal = window.calendar;
            if (!(cal && params.cache)) {
                  window.calendar = cal = new Calendar(params.firstDay,
                                               params.date,
                                               params.onSelect || onSelect,
                                               params.onClose || function(cal) { cal.hide(); });
                  cal.showsTime = params.showsTime;
                  cal.time24 = (params.timeFormat == "24");
                  cal.weekNumbers = params.weekNumbers;
                  mustCreate = true;
            } else {
                  if (params.date)
                        cal.setDate(params.date);
                  cal.hide();
            }
            cal.showsOtherMonths = params.showOthers;
            cal.yearStep = params.step;
            cal.setRange(params.range[0], params.range[1]);
            cal.params = params;
            cal.setDateStatusHandler(params.dateStatusFunc);
            cal.setDateFormat(dateFmt);
            if (mustCreate)
                  cal.create();
            cal.parseDate(dateEl.value || dateEl.innerHTML);
            cal.refresh();
            if (!params.position)
                  cal.showAtElement(params.button || params.displayArea || params.inputField, params.align);
            else
                  cal.showAt(params.position[0], params.position[1]);
            return false;
      };
};
0
 
MargusLehisteAuthor Commented:
When I debugged the script (as you suggested) - it break in ... UIValidation.js file

unction ValidatorOnChange() {
    var vals = event.srcElement.Validators;
    var i;
    for (i = 0; i < vals.length; i++) {
        ValidatorValidate(vals[i]);
    }
    ValidatorUpdateIsValid();    

it this vals.length place.

Looks like .NET does not like that DHTML modifies values inside the textbox
0
 
MargusLehisteAuthor Commented:
Actually this function was at fault (setup.js):
<this is correct - 2 offending lines commented out>

   function onSelect(cal) {
          var p = cal.params;
          var update = (cal.dateClicked || p.electric);
          if (update && p.flat) {
               if (typeof p.flatCallback == "function")
                    p.flatCallback(cal);
               else
                    alert("No flatCallback given -- doing nothing.");
               return false;
          }
          if (update && p.inputField) {
               p.inputField.value = cal.date.print(p.ifFormat);
//               if (typeof p.inputField.onchange == "function")
//                    p.inputField.onchange();
          }
          if (update && p.displayArea)
               p.displayArea.innerHTML = cal.date.print(p.daFormat);
          if (update && p.singleClick && cal.dateClicked)
               cal.callCloseHandler();
          if (update && typeof p.onUpdate == "function")
               p.onUpdate(cal);
     };
0
 
bumpertCommented:
Thanks a lot MargusLehiste, your last comment was helpfull for me!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now