We Keep Coding

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")

Processing sketch works in Java but not in JavaScript mode

I wrote a processing sketch for depicting the parallel coordinates visualization. The problem is that though it works fine in Java mode but shows a blank screen in JavaScript Mode. Can someone tell me what the problem is? I am using Processing 2.0. The error I receive in Firefox is as follows:
Use of getPreventDefault() is deprecated. Use defaultPrevented instead. # chrome://smarterwiki/content/jquery.js:3527
Error in parsing value for 'image-rendering'. Declaration dropped. # http://127.0.0.1:56763/
ReferenceError: Float is not defined # http://127.0.0.1:56763/processing.js:10175
I cannot provide the code because it's part of a homework I still need to submit. Also, seeing the last line, I tried to replace all the instances of the float type with var type in the JavaScript mode but it didn't help.

My problem was that I was using Float.isNaN() and Float.MAX_VALUE in parts of my code where I couldn't do without them.
I got this answer in the Processing forum which worked like a charm.
For MAX_VALUE:
http://docs.oracle.com/javase/6/docs/api/constant-values.html#java.lang.Float.MAX_VALUE
And see also
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity
For NaN:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN

Copy javascript error text to clipboard?

How do you copy javascript errors in IE to clipboard? CTRL + C doesn't work and I don't want to take screenshots. Are there any tools out there that lets you copy the text?
(ANSWER) EDIT: I finally found a machine which has IE8 on it and was able to copy the error message. It's a hassle, though.

If you were using IE8+ there is a new button called Copy error details to clipboard.
IE7 or older, have done everything that is "easy", "de facto", "cultural" to something else, just to get your job harder.

IE allows you to use the method window.clipboardData.getData() to programatically copy data. I guess you could use this in a try/catch statement. But you will have to set permissions to use it, and it will only work in IE.

These error messages in IE6/7 are rarely useful anyways, it's better to describe what you were doing when you experienced the error on which page. Because IE gives vague error messages and likes to concatenate all the javascript files together any line number that would have pointed to actual source of the problem is practically lost. Whomever is fixing the javascript is going to have to go through some grueling line by line medival debugging.
Edit: That is if the problem doesn't present in IE8, if it's present in IE8 as well, you have much better options.

Try `Ctrl + C' to copy. It works in windows' alerts.

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.