Autocompleter Error In IE7: 'style' is null or not an object

124 views
Skip to first unread message

Camandco

unread,
Feb 2, 2009, 8:49:08 AM2/2/09
to Prototype & script.aculo.us
Hi,

My script, using autocompleter seems to work perfectly using Google
Chrome, but when I test in IE7 i get an error as i begin to input data
into one of the fields associated with it:

Line: 2272
Char: 5
Error: 'style' is null or not an object
Code: 0
URL: ...

I'm not entirely sure where line 2272 is as many of my pages are
included, etc etc...

Can anyone help?

Code is as follows:

<html>
<head><script src="jscript/prototype.js" type="text/javascript"></
script>
<script src="jscript/scriptaculous.js" type="text/javascript"></
script>
<title>Team Editing</title>
<? include_once('dbconnect.php'); ?>
<style type="text/css">
div.autocomplete {
margin:0px;
padding:0px;
width:250px;
background:#fff;
border:1px solid #888;
position:absolute;
}

div.autocomplete ul {
margin:0px;
padding:0px;
list-style-type:none;
}

div.autocomplete ul li.selected {
background-color: #006600;
}

div.autocomplete ul li {
margin:0;
padding:2px;
height:32px;
display:block;
list-style-type:none;
cursor:pointer;
}
</style>

<script>
function oc(a)
{
var o = {};
for(var i=0;i<a.length;i++)
{
o[a[i]]='';
}
return o;
}

// tempobj.value in oc(peopleList)
Array.prototype.inArray = function (value)
{
// Returns true if the passed value is found in the
// array. Returns false if it is not.
var i;
for (i=0; i < this.length; i++)
{
if (this[i] == value)
{
return true;
}
}
return false;
};
function checkrequired(which){
var peopleList = [''
<? $output = mysql_query( "SELECT * FROM usrdat ORDER BY id DESC" );
while ($a_row = mysql_fetch_array( $output ) )
{
echo ",'".$a_row['name']."'";
} ?>
];
var pass=true
if (document.images){
for (i=0;i<which.length;i++){
var tempobj=which.elements[i]
if (tempobj.name.substring(0,6)=="player"){
if (!peopleList.inArray(tempobj.value)){
pass=false
break
}
}
}
}
if (!pass){
alert("Team members selected must be in the database! (Blank boxes
must contain no spaces!)")
return false
}
else
return true
}
</script>
</head>
<body>
<form action="index.php" method="get">
<input type="hidden" value="autocomplete" id="pg" name="pg" />
<input type="hidden" value="t" id="edit" name="edit" />
<select name="eteamno" id="eteamno" name="eteamno">
<?
if($teamno == '0') {}
else {
if ($_GET['edit'] == 't') {
$eteamno = $_GET['eteamno'];
$sql = "SELECT * FROM teamdat WHERE teamno = $eteamno";
$rs = mysql_query($sql);
$rd = mysql_fetch_assoc($rs);
$eteam = $rd['team'];
echo '<option value="'.$eteamno.'">'.$eteam.'</option>';
}
else {
echo '<option value="'.$teamno.'">'.$team.'</option>'; }
}
$output = mysql_query( "SELECT * FROM teamdat" );
while ($a_row = mysql_fetch_array( $output ) ) {
echo '<option value="'.$a_row['teamno'].'">'.$a_row['team'].'</
option>';
}
?>
</select><br /><br /><input name="" type="submit" value="Choose team
to edit" /></form>
<form action="index.php?pg=addtoteam" method="post" onSubmit="return
checkrequired(this)">
<input type="hidden" value="<? if($_GET['edit'] == 't') {echo $_GET
['eteamno'];} else {echo $teamno;}?>" id="eteamno" name="eteamno" />
<?
$ed = $_GET['edit'];
if ($ed == 't') {
$eteamno = $_GET['eteamno'];
$sql2 = "SELECT * FROM teamdat WHERE teamno = '$eteamno'";
$gn = mysql_query( $sql2 );
$gn2 = mysql_fetch_assoc( $gn );
$playerno1 = $gn2['player1'];
$rs = mysql_query( "SELECT * FROM usrdat WHERE id = $playerno1" );
$rd = mysql_fetch_assoc($rs);
$player1 = $rd['name'];
}
else {}
if ($_GET['edit'] == 't') {
echo'
<input id="player1" name="player1" autocomplete="off" size="40"
type="text" value="'.$player1.'" /><br />
<br />';
}

?>
<div class="autocomplete" id="list" style="display: none"></div>
<script type="text/javascript">
var peopleList = [''
<? $output = mysql_query( "SELECT * FROM usrdat ORDER BY id DESC" );
while ($a_row = mysql_fetch_array( $output ) )
{
echo ",'".$a_row['name']."'";
} ?>
];

new Autocompleter.Local('player1', 'list', peopleList,
{ fullSearch:true,partialChars:"1" });

</script>
<? if( $_GET['edit'] == 't' ) { echo'<input name="" type="submit"
value="Add" />'; } ?>
</form>
</body>
</html>

Thanks very much,
Camandco

Sam

unread,
Feb 2, 2009, 3:37:41 PM2/2/09
to Prototype & script.aculo.us
I've tracked this one down before.

IE hates it if you try and access the style of an element before it's
been inserted into the DOM.
So, somewhere ( on line 2272 ....), an element has been created in
JavaScript and the style is being altered before it as been inserted
into the DOM.

Hope that helps
Cheers!

Camandco

unread,
Feb 3, 2009, 7:52:15 AM2/3/09
to Prototype & script.aculo.us
thanks very much

problem solved!
Reply all
Reply to author
Forward
0 new messages