PDA

View Full Version : 'Undefined' is null or not an object'



yoda69
07-18-2007, 09:14 AM
Its lame I know, but i'm green as an avocado so please help me understand this:

Its an AJAX script which create mulitple choice dropdown boxes connected to a database. the Javascript works great on both FF and IE. However, in IE i get the irritating error code:

line: 106
char: 9
error: 'Undefined' is null or not an object


here's the code to the page:


<!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>
<script type="text/javascript" language="JavaScript1.2" src="/script/stmenu.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Browse Teachings</title>
<link rel="stylesheet" href="/mainstyle.css" type="text/css" />
<style type="text/css">
<!--
.style3 {font-size: 24px}
#h2 {
background-color:#99CC33;
border-bottom:dashed;
border-bottom-width:thin;
}
#h3 {
background-color:#99CC33;
border-bottom:dashed;
border-bottom-width:thin;
}
.style8 {font-size: 18px}
.style9 {
font-size: 16px
}
-->
</style>

<!-- American format mm/dd/yyyy -->
<script language="JavaScript" src="calendar2.js"></script><!-- Date only with year scrolling -->
<script src="request.js"></script>
<script type="text/javascript">

function getfirst(dd1)
{
var idx = dd1.selectedIndex;
var first = dd1[idx].text;
var par = document.forms["form4"];
var parelmts = par.elements;
var prezsel = parelmts["country"];
if (first != "Please select a continent")
{
Http.get({
url: "./alpha.php?continent=" + first,
callback: fillPrez,
cache: Http.Cache.Get
}, [prezsel]);
}
}

function getsecond(dd1)
{
var idx = dd1.selectedIndex;
var second = dd1[idx].text;
var par = document.forms["form4"];
var parelmts = par.elements;
var prezsel = parelmts["thirdbox"];
if (second != "Please select a continent")
{
Http.get({
url: "./beta.php?state=" + second,
callback: fillPrez,
cache: Http.Cache.Get
}, [prezsel]);
}
}

function getfirst2(dd1)
{
var idx = dd1.selectedIndex;
var first = dd1[idx].text;
var par = document.forms["form4"];
var parelmts = par.elements;
var prezsel = parelmts["countryRange"];
if (first != "Please select a continent")
{
Http.get({
url: "./alpha.php?continent=" + first,
callback: fillPrez,
cache: Http.Cache.Get
}, [prezsel]);
}
}

function getsecond2(dd1)
{
var idx = dd1.selectedIndex;
var second = dd1[idx].text;
var par = document.forms["form4"];
var parelmts = par.elements;
var prezsel = parelmts["thirdbox"];
if (second != "Please select a continent")
{
Http.get({
url: "./beta.php?state=" + second,
callback: fillPrez,
cache: Http.Cache.Get
}, [prezsel]);
}
}

function fillPrez(xmlreply, prezelmt)
{
if (xmlreply.status == Http.Status.OK)
{
var prezresponse = xmlreply.responseText;
var prezar = prezresponse.split("|");
prezelmt.length = 1;
prezelmt.length = prezar.length;
for (o=1; o < prezar.length; o++)
{
prezelmt[o].text = prezar[o];
prezelmt[o].value = prezar[o];
}
}
else
{
alert("Cannot handle the AJAX call.");
}
}

</script>
</head>

<body>
<div id="header">
<div align="left"><span class="style1">Educator</span></div>
</div>

<div id="navigation">
<script type="text/javascript" language="JavaScript1.2" src="/script/menu.js"></script>
</div>

<div id="body">

<h1 id="h1"><span class="style8">Use the form to search by location and date or,</span> <a href="/categories/5/country.php" class="style5 style8">Search by location only:</a> </h1>

<h2 class="style9" id="h2">Please select a starting date and country:</h2>
<div>
<form name="form4" method="get" action="/categories/5/process.php">


<p>
<label for="assearch">Enter a specific Date:</label>
<label>
<input type="text" name="input1" id="title4" />
</label>
<a href="javascript:cal1.popup();"><img src="img/cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the date" /></a>
</p>
(Or choose from the calander) </p>

<p>

<select name="firstbox" onchange="getfirst(this);">
<option value="default">Please select a continent</option>
<option>North America</option>
<option>South America</option>
<option>Europe</option>
<option>Asia</option>
<option>Australia</option>
<option>Africa</option>
</select>
<select name="country" onchange="getsecond(this);">
<option>Please select a country</option>
</select>
<input type="submit" name="searchDate1" id="searchTitle4" value="Search" />
</p>
<p>&nbsp;</p>
<p>Or search by a range of dates:</p>
<p>
<label for="assearch2">Enter a starting Date:</label>
<label>
<input type="text" name="input2" id="title5" />
</label>
<a href="javascript:cal2.popup();"><img src="img/cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the date" /></a>
<label for="assearch3">Enter an ending Date:</label>
<label>
<input type="text" name="input3" id="title6" />
</label>
<a href="javascript:cal3.popup();"><img src="img/cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the date" /></a> (Or choose from the calander) <br />
<br />

<select name="firstbox2" onchange="getfirst2(this);">
<option value="default">Please select a continent</option>
<option>North America</option>
<option>South America</option>
<option>Europe</option>
<option>Asia</option>
<option>Australia</option>
<option>Africa</option>
</select>
<select name="countryRange" onchange="getsecond2(this);">
<option>Please select a country</option>
</select>
<input type="submit" name="searchDate2" id="searchTitle6" value="Search" />
<br />
<br />
</p>
<p>(Dates should be entered in the following format: Month-Day-Year (e.g. 08-27-2007)</p>
</form>
</div>

<script language="JavaScript">

<!-- // create calendar object(s) just after form tag closed
// specify form element as the only parameter (document.forms['formname'].elements['inputname']);
// note: you can have as many calendar objects as you need for your application
var cal1 = new calendar2(document.forms['form4'].elements['input1']);
cal1.year_scroll = true;
cal1.time_comp = false;
var cal2 = new calendar2(document.forms['form4'].elements['input2']);
cal2.year_scroll = true;
cal2.time_comp = false;
var cal3 = new calendar2(document.forms['form4'].elements['input3']);
cal3.year_scroll = true;
cal3.time_comp = false;
//-->
</script>

</div>
<div id="footer">
<div align="center">
<p class="style1 style3">&nbsp;</p>
<p class="style1 style3">&nbsp;</p>
<p class="style1 style5">&nbsp;</p>
<p class="style1 style5">Copyright 2007 GlobalYogi. All rights resereved</p>
</div>
</div>
</body>
</html>



Although i pasted the entire code of the page, the relevant javascript is in the beginning functions at the beginning of the page in the head segment.

mcjwb
07-18-2007, 08:11 PM
Difficult to tell what's causing the error without all the external js files or at least request.js.
Have you tried using the microsoft script debugger (http://www.microsoft.com/downloads/details.aspx?FamilyID=2f465be0-94fd-4569-b3c4-dffdf19ccd99&displaylang=en)? It should be able to display the line that throws the error. You'll need to turn on script debugging in IE after installing.