Log in

View Full Version : Internet Explorer: Object doesn't support this property or method


Beacon11
04-24-2008, 11:17 PM
Hello all. I'm having an Internet Explorer (both 6 and 7) issue. It's a javascript problem, and as I'm not much of a javascript developer, it's going over my head. Please note that this works perfectly on Firefox and Safari... just not the IE's.
I am a Ruby on Rails developer, and I am using the Prototype Window Class. The basic idea of what I'm doing is this: I have a summary page of an item that a user created. This item can have pictures, files, etc. This summary page lists all of these attachments. Next to the name of the attachments is a 'delete' button. When you click the delete button, a modal is supposed to pop and ask if you're sure you want to delete- it covers the everything but the popup in a faint blue haze, and makes you click yes or no before you do anything else. Fairly simple. Now.. I could figure out a simple IE workaround, by doing something different for IE browsers... but I don't want to. This effect is so pretty, I'd like it to work on everything.
Here's my problem: I'm including all these external javascript files, so the header of my page looks like the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<script src="/javascripts/prototype.js" type="text/javascript"></script>
<script src="/javascripts/effects.js" type="text/javascript"></script>

<script src="/javascripts/dragdrop.js" type="text/javascript"></script>
<script src="/javascripts/controls.js" type="text/javascript"></script>
<script src="/javascripts/application.js" type="text/javascript"></script>
<script src="/javascripts/fckeditor/fckeditor.js" type="text/javascript"></script>
<script src="/javascripts/hnav.js" type="text/javascript"></script>
<script src="/javascripts/window.js" type="text/javascript"></script>
<script src="/javascripts/window_effects.js" type="text/javascript"></script>

<script src="/javascripts/debug.js" type="text/javascript"></script>

<link href="/stylesheets/main.css" media="all" rel="stylesheet" type="text/css" />
<link href="/stylesheets/pages.css" media="all" rel="stylesheet" type="text/css" />
<link href="/stylesheets/themes/default.css4" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/themes/alphacube.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/themes/alert.css" media="screen" rel="stylesheet" type="text/css" />

<link href="/stylesheets/hnav.css" media="all" rel="stylesheet" type="text/css" />
....


The error I get in IE is this:

Line: 116
Character: 5
Code: 0
Error Message: Object doesn't support this property or method

Oh... so descriptive. First of all... what line is it talking about, when I have all those included javascript files? Line 116 of prototype.js? Or maybe... 116 - 9 = line 107 of prototype.js? I'm a little lost as to where to start with this error message. Any suggestions?

If needed... the entire function in prototype.js of line 107/116 is this (with line numbers):

107
108 Object.extend(Object, {
109 inspect: function(object) {
110 try {
111 if (Object.isUndefined(object)) return 'undefined';
112 if (object === null) return 'null';
113 return object.inspect ? object.inspect() : String(object);
114 } catch (e) {
115 if (e instanceof RangeError) return '...';
116 throw e;
117 }
118 },

I apologize, as I can't provide a link to this so you can check it out. However, if you download my attachment, you'll find the sample in there: windows_js/samples/popup_open.html. The one I'm using is the third one, on the button. The text is "Do you like this effect?" and uses the openDialog3(html). Notice that works fine on FF and safari, but not in IE. Any suggestions as to a fix would be MOST appreciated!
jscheuer1
04-25-2008, 07:12 PM
Just looking at your code that you posted, a very good guess would be that the error is actually on (115):


115 if (e instanceof RangeError) return '...';

IE error reporting almost always reports the line following the error, and that the reason this is only a problem in IE is that none of the other browsers ever get to that point in the code.

However, this is what is at line 116 (115 is blank) in the prototype.js file linked to that page:


Object.extend(Number.prototype, {
toColorPart: function() {
return this.toPaddedString(2, 16);
},

succ: function() {
return this + 1;
},

times: function(iterator) {
$R(0, this, true).each(iterator);
return this;
},
Beacon11
04-26-2008, 02:13 AM
Oh... shoot you're right. I was looking at a later version of prototype.js when I copied those lines in. Sorry about that! You know something else I realized though? No matter which version of prototype.js I use, it gives me the same line number as causing the error!

Anyway though... are you implying that if other browsers stepped as far as IE does, I'd get errors on them as well? I'm not sure how much sense that makes to me... could you explain a little?

Discounting my bogus code post.. what do you think is wrong? Yes, you're correct about the code you posted, but what's wrong with it? Anything that you see? Do you think IE has a problem with Object.extend? Searching on Google have me the impression that Object.extend is pretty commonly used... I wish I knew javascript better! :confused:
jscheuer1
04-26-2008, 04:00 AM
Oh... shoot you're right. I was looking at a later version of prototype.js when I copied those lines in. Sorry about that! You know something else I realized though? No matter which version of prototype.js I use, it gives me the same line number as causing the error!

That just means that the error is from another file, not from prototype.js. It could be any of the other external scripts - if they have line counts that go that high. An unfortunate aspect of IE error reporting is that it rarely if ever gives an accurate report of an external filename. To get the accurate (+ or - 1) line number, all scripts must be on the page.


Anyway though... are you implying that if other browsers stepped as far as IE does, I'd get errors on them as well? I'm not sure how much sense that makes to me... could you explain a little?

Well, since it probably isn't that line of code after all, the question is pretty much moot. However, the general idea is that, if it were that line of code, since it is in a try/catch that only gets entered into if previous methods aren't available, these previous methods must presumably be available in other browsers, but not IE. Now there could be other reasons in a case like that, but the possibility shouldn't be dismissed out of hand. And, if that is the case, there is no way of knowing for sure if the other browsers would or wouldn't choke on what is in the try/catch if they got there, unless you force them into it.


Discounting my bogus code post.. what do you think is wrong? Yes, you're correct about the code you posted, but what's wrong with it? Anything that you see? Do you think IE has a problem with Object.extend? Searching on Google have me the impression that Object.extend is pretty commonly used... I wish I knew javascript better! :confused:

I don't think we have the correct line of code that is giving the error. It probably is in another file. Since I didn't really know for sure at the time, I just thought that:


if (e instanceof RangeError)

looked like it should have less spaces in it, perhaps some dots and/or parenthesis.

To get the correct line of code that IE is barfing on, all of the external scripts must be put on the page.
Beacon11
04-26-2008, 05:47 AM
Oh, good call! I didn't even THINK about putting them all inline... that didn't take too long. Okay, so it DOES give me an accurate number, in the message:

Line: 9589
Char: 8
Error: Object doesn't support this property or method
Code: 0

Also, the number it gives me ends up being line 115 in window_effects.js! Right again ;) .

You can look at that file with the attachment of my first post, but I'll give a little bit of the code here (with line numbers):

9587 if (this.options.fromOpacity)
9588 this.div.setStyle({opacity: this.options.fromOpacity})
9589 this.div.show();
9590 var style = "top:" + bounds.top + ";left:" +bounds.left + ";width:" + bounds.width +";height:" + bounds.height;
9591 if (this.options.toOpacity)
9592 style += ";opacity:" + this.options.toOpacity;


Now what do you think? Obviously I still have no idea, but that was a great idea on your part... does something stick out?
jscheuer1
04-26-2008, 06:53 AM
Here is a fix. I can't be certain why it even is a problem, so I've set it up so that IE will at least try it, but not barf if it can't do it. It looks bad to me because it looks like a function recursively calling itself from within itself, but I might be missing the point. Just removing the line (#115 in window_effects.js):


this.div.show()

seems fine cross browser, but just to be safe, I've replaced it with:


/*@cc_on @*/
/*@if(@_jscript_version >= 5)
window.ie53790=1
try { this.div.show();
} catch (e) {}
@end @*/
if(!window.ie53790)
this.div.show()
jscheuer1
04-26-2008, 07:08 AM
After playing with that demo page of yours a bit more, I found that IE benefited from more extensive changes to the show function:


show: function(element, options) {
var position = Position.cumulativeOffset(this.html);
var size = this.html.getDimensions();
var bounds = element.win.getBounds();
this.window = element.win;
// Create a div
if (!this.div) {
this.div = document.createElement("div");
this.div.className = this.options.className;
this.div.style.height = size.height + "px";
this.div.style.width = size.width + "px";
this.div.style.top = position[1] + "px";
this.div.style.left = position[0] + "px";
this.div.style.position = "absolute"
document.body.appendChild(this.div);
}
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
window.ie53790a=1
try { if (this.options.fromOpacity)
this.div.setStyle({opacity: this.options.fromOpacity})
} catch (e) {}
@end @*/
if(!window.ie53790a&&this.options.fromOpacity)
this.div.setStyle({opacity: this.options.fromOpacity})
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
window.ie53790=1
try { this.div.show();
} catch (e) {}
@end @*/
if(!window.ie53790)
this.div.show()
var style = "top:" + bounds.top + ";left:" +bounds.left + ";width:" + bounds.width +";height:" + bounds.height;
if (this.options.toOpacity)
style += ";opacity:" + this.options.toOpacity;

new Effect.Morph(this.div ,{style: style, duration: this.options.duration, afterFinish: this._showWindow.bind(this)});
},


Using this (above) version, all of the examples on that demo page work.
Beacon11
04-26-2008, 11:39 PM
jscheuer, I had given up hope. I didn't think it was possible. I had punted and written a method to say "if the browser is IE, just feed it a regular old confirm dialog." I was disappointed, but it worked.

You have my admiration and respect, not only for your programming skills, but for your patience with me and your willingness to work with the headache-inducing IE– not for something you were working on, something you benefited from, but to help me, someone you don't know, and who's first post was looking for help, not giving it.

I truly appreciate your help. I am a computer engineering major, so I will be programming for the rest of my life. In this future, I will endeavor to be like you: helping people who have no clue, for no reason whatsoever other than just that– to help them.

I know where to come in the future for javascript help :) .