I know this topic has been discussed before, but I can''t seem to solve
my problem.
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, still new to prototype, just
read a book 2 weeks ago.
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>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
mz91184
2008-May-22 21:29 UTC
Re: IE Error: Object doesn''t support this property or method
Never mind, I just noticed I was using an old version of prototype by accident, so I upgraded to 1.6.0.2 and the problem is fixed. On May 22, 3:21 pm, mz91184 <michael.z...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> I know this topic has been discussed before, but I can''t seem to solve > my problem. > > 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, still new to prototype, just > read a book 2 weeks ago. > > 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>--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---