What do I get an error with highcharts, only in IE8 - javascript

The charts are working ok in most browsers, including firefox and Opera. However in IE I am getting:
Object doesn't support this property or method
report_graph.js
Code: 0
URI: http://10.11.4.92:5000/assets/report_graph.js?body=1

It's possible that you're calling the javascript file along with a query-string attached. Check out: Passing Querystring style parameters into Javascript file and Passing parameters to JavaScript files for possible solutions.

It wa all due to a `.trim() at the end of some of the code !
e.g. I had $('some selectors).text().trim()
Changing it to $('some selectors).text().trim() fixed it.
As it actually has worked ok in some browsers this seems to suggest an actual issue with the javascript engine in IE. Either it doesn't support the method that other browsers do... or it does not handle the error as gracefully, causing a runtime exception for a error that other browser ignore.

Related

jQuery IE9-10: unable to get property replace of undefined or null reference

I'm developing a page with the following libraries;
jQuery (1.7.2) (older version because of a dependency issue, but have tried up to 1.9.1, doesn't fix issue).
Backbone (1.1.0)
lodash (2.4.1)
modernizr (2.7.1)
gsap (1.17.0)
The page use canvas and gsap for animation. Everything works great in IE11, Chrome, Safari, Firefox, and IE8 (animations disabled for IE8), but IE9 and 10 just throw this error in the console over and
unable to get property 'replace' of undefined or null reference
The line referenced is in jquery.js, line 622, which is the return statement in this code:
// Convert dashed to camelCase; used by the css and data modules
// Microsoft forgot to hump their vendor prefix (#9572)
camelCase: function( string ) {
return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );
},
I can't figure out how to determine what part of MY code caused this jQuery code to fire, so I'm unsure as to what may be the issue on my end.
Does anyone know a fix for this? Or alternatively, how I can view what part of my code caused this jquery code to fire (using IE dev tools)?
Turns out the issue wasn't something inherently wrong with IE, but rather I was trying to access an object which didn't entirely exist yet. The other browsers this was not an issue (perhaps their JS engines were just fast enough for it to be a non-issue), but I've now added checks to ensure all the relevant content has loaded before executing the problematic function and the issue seems to be gone. Thanks for the help, all.
What kind of tool are you using for debugging? I have a solution for you for Chrome debug console
1. First go Find the jquery script file in the console, right click and select "Blackbox script" it is going to be ignored while debugging, only your files are going to be considered
2. Activate break on errors and a breakpoint is going to be triggered on the line of code where the exception is occurring
Check JavaScript: Is there a way to get Chrome to break on all errors?
and https://developer.chrome.com/devtools/docs/blackboxing
Maybe I'm wrong here but is it possible that IE8-9 "string" is a reserved word? Maybe not. But the only time .replace would show that message is if you were not feeding it a string.
camelCase: function( string ) {
if(!string){
console.log("string is falsy", string);
return string;
}
return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );
},

IE 8 issues (with js)

Is there a way to tell a page/project this it should ignore some javascript code/file? I am working on a project, that works well on all browsers, eccept IE8. I haven't tested for less than IE8, and I wont bother. Anyway. The error that I am getting is my language, but I'll translate to English.
Exception was thrown at line 4, column 12204 in https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
0x800a01b6 - A javascript runtime error occured: The object doesn't support the property or method 'getElementsByClassName'
If there is a handler for this exception, the program may be safely continued
This is just one of MANY errors like that.
And many more.
This is a huge problem for me. Is there any workaround for this? I am forced to keep this file, since the project is big, and other pages depend on this file
You could try replacing this line...
getElementsByClassName("classname")
with...
$(".classname")

Weird 'ChildNodes of undefined' error in IE8 with an AngularJS application

TypeError: Unable to get value of the property 'childNodes': object is null or undefinedundefined
After making a long list of modifications to my application in order to support IE8, including:
running all of the views in their compiled form through W3C validator, setting up xdomain.js proxy to support CORS API calls, making some general restructures, etc.
I was very disappointed to find out that IE8 still throws this weird error at me, while IE9 works perfectly fine.
Making changes to the Angular-seo package to prevent it from running when the client is an IE browser.
Any ideas on what can it be?.
Make sure that all your tags are closed properly. I just spent hours trying to figure out what the problem was, until I noticed this in my code:
<span>some text<span>
I finally realized I didn't close the <span> tag properly. After that everything just worked.
Without the code you are running it is a bit difficult. However there is a command to use for debugging. First you need to identify which variable might not contain an object [i.e.
"object is null or undefined"].
For example, parent, then you can use
//next look to see if parent is something
if('undefined'==(typeof parent)) alert("variable empty:parent");
Once you find something that is empty that you are expecting to be an object then you can go trace back from there. Also use a browser debugged tool, to identify the line number of the error.
Often if using the child nodes, you may not have the right level or you need to access as an array i.e. you need something like.
parent.childNodes[0].childNodes[0].value
In IE you are also dealing with unsupported functions. So getElementById will work but some other similar ones do not. Again typeof can be useful.
//next ensure function supported
if( 'undefined'==(typeof document.getElementsByClassName) ){
alert("Not Supported"); // notice ^ no () required here
//...add code to handle differently when not supported
}
This may reveal if you can use a function
IE8 is so old and non-standards compliant it doesn't support childNodes[]. http://quirksmode.org/dom/core/#t70

Type coercion bug in IE8 RegExp.exec()?

I don't know if this is a know problem in IE8, but I can't really find any info on it.
// The regex can vary but has to have a non-matching group defined:
var re = /^(\s)?[\d]+$/i;
// We call it with a string...
re.exec("2");
// We call it with a number...
re.exec(2);
Firefox and Chrome (can't try it in Opera right now) have no problem with either calls. But on IE8 the second call fails with an "Object does not support that property or method".
Is this a known bug or something?
I saw the same issues in an Ext JS 4 application. Lots of things were failing as Ext JS appears to pass numbers in the exec() method at times. The issue turned out to be a third party library SyntaxHighlighter. Removing this reverted the default IE8 behavior and re.exec(2); worked.
I'd suggest cutting down the external JS that you include in your app until you find the culprit.
Since exec takes a string I would make sure you are passing a string. By passing a number in I would say you are trying to count on grey areas of the way browsers implement javascript.

on a javascript error, how to identify method or js file with the problem?

When a javascript error occures in IE (or in other browsers) you get a popup saying that javascript error has occurred - usually this comes with a line number and some hint.
Sometimes it comes with line 0 and with no way of knowing what the problem is.
Javscript can come from HTML itself, from a js file or from JSP (and more).
Microsoft has a script debugger that helps a lot in finding where js errors are, however sometimes when a js error occurs the script debugger cannot find the code portion and thus its difficult of finding where is the root cause of the problem.
My question is whether anyone knows any way of making script debugger find the code any way (mostly happen with js code that is in JSP file), or at least include in the IE popup the method or js file where the error has occurred. (it only display the line number, and many times its line 0...).
Thanks,
Tal.
The error object which is created when an error is thrown by JavaScript is very unreliable when it comes to the source line, especially within IE. Browsers like Firefox and Safari are better at line numbers, but they are generally pointless due to minification of the files.
What is obviously of more use is getting the call stack, but due to the anonymous nature of JavaScript functions (well, that they can be anonymous) a call stack can often be hard to work out.
If you're doing a try/ catch you can do arguments.callee which will return you the method which called the current method which failed.
Here's a good example of doing a complete stack in JavaScript - http://eriwen.com/javascript/js-stack-trace/
Also developer tools included with Internet Explorer 8 is something good to trace and debug your javascript code
There is a version of Firebug called Firebug Lite that will work with Internet Explorer. It's performance is going to be based on how complex your pages are; however, for relatively lightweight pages, it should provide some insight.
I recommend this tool rather than simply using Firebug and Firefox because not all errors that occur in Internet Explorer will occur in Firefox, and so performing any debugging in that browser may not yield any results.
Firebug on Firefox is usually considered one of the best debugging tools.
On Firefox, go to
http://getfirebug.com
to get it.
This will print you a stack trace:
function Stack()
{
try
{
throw Error()
}
catch(ex)
{
return ex.stack
}
};
print( Stack() );
If all else fails (and when dealing with IE it sometimes does) you can always walk through your code with alerts. It's crude and tedious, but sometimes it's all you can do:
Simply:
var count = 0;
then sprinkle some:
alert(count++);
at strategic lines along your code and note where it stops alerting.
Lather rinse repeat until you have your line.
If using Firefox you can press Ctrl + Shift + J to bring up the JavaScript error console that is built into Firefox, which will tell you exactly what went wrong.

Categories