IE Error: Object doesn't support this property or method
My script works in FF but not in IE. In IE, the error message says
Line: 1837
Char: 7
Error: Object doesn't support this property or method
Code: 0
URL: http://stepup.dbs.umt.edu/testMenu-Final-With-Ajax1.php
In IE 7 I am unable to move applications from on category to another
without an error occurring.
I have read, How Prototype extends the DOM ( http://prototypejs.org/learn/extensions
), but don't see anywhere in my code where this is relevant; unless I
am just not understanding the example.
Does anyone have any suggestions, I have included the code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
.menuOptions li{
background-color: #999999;
padding:5px;
}
.menuOptions
{
display:none;
position:absolute;
}
img
{
border:none;
}
.rowHolder
{
width:49%;
}
.rowLeft
{
}
.rowRight
{
}
.menuLink
{
background:url(update/img/arrowDown.png) no-repeat right;
padding:0px 15px 0 0;
}
ul
{
padding:0;
margin:0;
list-style:none;
}
ul li
{
padding:0;
margin:0;
}
.saving img
{
vertical-align:text-bottom;
}
</style>
<script type="text/javascript" src="/js/lib/prototype.js" ></script>
<script type="text/javascript" src="/js/src/scriptaculous.js?
load=effects,builder"></script>
<script type="text/javascript">
//******* Summary *******//
/*
This function is used to open and close sub menus. The fucntion is
called whenever the document is clicked.
*/
//**********************//
var checkMenus = Class.create();
checkMenus.prototype = {
// sets css classes and ids on window load
initialize: function( menuLinkName, menuDivName, rowClassName,
errorDiv ) {
this.menuLinkName = menuLinkName;
this.menuDivName = menuDivName;
this.rowClassName = rowClassName;
this.mainErrorDiv = errorDiv;
},
// gets and sets ids in arrarys to be used in showMenuOptions
findMenus: function(e) {
var rowHolder = $A($$(this.rowClassName));
this.menuLinkArrary = $A($$( "a."+this.menuLinkName ));
for( var i = 0; i<this.menuLinkArrary.length; i++ )
{
this.menuLinkNameSplit = this.menuLinkArrary[i].id.split( "-" );
this.newMenuDivNameID = this.menuLinkNameSplit.first()
+"-"+this.menuDivName;
this.newMenuLinkNameID = this.menuLinkNameSplit.first()
+"-"+this.menuLinkName;
this.showMenuOptions( e );
}
},
// checks if menu target or id matches clicked area
showMenuOptions: function( e ) {
var target = (e && e.target) || (event && event.srcElement);
if( target != $(this.newMenuDivNameID) && target != $
(this.newMenuLinkNameID) )
{
$(this.newMenuDivNameID).setStyle({ display: 'none' });
}
else if ( target==$(this.newMenuLinkNameID) )
{
$(this.newMenuDivNameID).setStyle({ display: 'block' });
}
},
// tries to move div into a different category
addRemoveDiv: function( applicantID, divHolder ) {
this.applicantID = applicantID;
this.divContent = $( this.applicantID ).innerHTML;
this.divHolder = divHolder;
this.divMenuName = this.applicantID+"-"+this.menuDivName;
new Ajax.Request( 'http://stepup.dbs.umt.edu/testEcho.php', {
method: 'post',
parameters: "applicantID="+this.applicantID,
onLoading: this.addRemoveDivLoading(this),
onSuccess: this.addRemoveDivSuccess.bindAsEventListener(this)
});
},
// ajax.request loading function
addRemoveDivLoading: function()
{
$( this.applicantID ).update( "<span class='saving'>Saving...<img
src='/update/img/saving.gif' /></span>" );
},
// ajax.request success function
// copies html of current div and tries to a new category
addRemoveDivSuccess: function()
{
var saveContent = "<div id='"+this.applicantID+"'>";
saveContent = saveContent + this.divContent;
saveContent = saveContent + "</div>";
$( this.applicantID ).remove();
new Insertion.After( this.divHolder, saveContent );
$( this.divMenuName ).setStyle( { display: 'none' } );
}
};
var newMenuLinks = new checkMenus( 'menuLink', 'menuOptions',
'.rowHolder', 'mainError' );
Event.observe(document, 'click', function(event) {
newMenuLinks.findMenus(event);
});
</script>
</head>
<body>
<div id='accept'>
Accept
<div id='1'>Name 1
<ul>
<li id='1-rowHolder' class='rowHolder rowRight'>
<a href="#2" id="1-menuLink" class='menuLink'>manage1</
a> <!--[if IE ]><br /><![endif]-->
<ul id='1-menuOptions' class='menuOptions'>
<li><a href='#' id='1-a'
onClick="newMenuLinks.addRemoveDiv( '1', 'accept' );">accept</a></li>
<li><a href='#' id='1-b' onClick="newMenuLinks.addRemoveDiv( '1',
'remove' );">remove</a></li>
<li><a href='#' id='1-c'
onClick="newMenuLinks.addRemoveDiv( '1', 'delete' );">delete</a></li>
</ul>
</li>
</ul>
</div>
</div>
<br /><br />
<div id='remove'>
Decline
<div id='2'>Name 3
<ul>
<li id='2-rowHolder' class='rowHolder rowRight'>
<a href="#2" id="2-menuLink" class='menuLink'>manage</
a> <!--[if IE ]><br /><![endif]-->
<ul id='2-menuOptions' class='menuOptions'>
<li><a href='#' id='2-a'
onClick="newMenuLinks.addRemoveDiv( '2', 'accept' );">accept</a></li>
<li><a href='#' id='2-b' onClick="newMenuLinks.addRemoveDiv( '2',
'remove' );">remove</a></li>
<li><a href='#' id='2-c'
onClick="newMenuLinks.addRemoveDiv( '2', 'delete' );">delete</a></li>
</ul>
</li>
</ul>
</div>
</div>
<br /><br />
<div id='delete'>
Delete
<div id='3'>Name 2
<ul>
<li id='3-rowHolder' class='rowHolder rowRight'>
<a href="#2" id="3-menuLink" class='menuLink'>manage</
a> <!--[if IE ]><br /><![endif]-->
<ul id='3-menuOptions' class='menuOptions'>
<li><a href='#' id='3-a'
onClick="newMenuLinks.addRemoveDiv( '3', 'accept' );">accept</a></li>
<li><a href='#' id='3-b' onClick="newMenuLinks.addRemoveDiv( '3',
'remove' );">remove</a></li>
<li><a href='#' id='3-c'
onClick="newMenuLinks.addRemoveDiv( '3', 'delete' );">delete</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id='loading'>
</div>
</body>
</html>
CSS Codes
Reply With Quote
Bookmarks