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
Related
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 );
},
I am trying to over ride one the notification popups of browser using the following code:
var branch = Components.classes["#mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefBranch);
But in Mozilla Firefox, I get the error Component.classes is undefined.
And in Chrome Browser, I get the error Component is undefined.
Well I have realised I need to include something in my website. But I am unable to find exactly what is required.
Please anybody help. I googled about it a lot, but I have never used this thing before(the Classes) and I am unable to search what will help me out. i dont even have any idea that what will be the tags for this thing. I have never used Component or its classes
My website is in ZF2.
Components Object is non-standard feature. See https://developer.mozilla.org/en/docs/Components_object.
It also says
Warning: This object is only intended for code running with chrome
privileges. Exposing the object to regular web code was a mistake.
I know this is crazy, but IE can drive one to do crazy things.
Here's the deal: we have a SharePoint 2007 site with Content Editor Web Parts. We have a contingent of users with Internet Explorer 8. We want to keep the site in IE8/IE8 Standards modes for better rendering of content. However, this configuration breaks the ability to open the Rich Text Editor window from the C.E. web part.
If we force IE8 into IE7 document mode or quirks mode, it works. Indeed, other sources online have suggested doing just that to fix the problem. But we'd really rather have everything run in standards mode.
Through some debugging, we found the source of the problem to be the use of document.all.index("<web_part_id>") JavaScript when retrieving a web part object on the page. In IE8 standards, this returns an object with most of the properties either empty, null or undefined; most notably, the id property is not set. If you were to use document.getElementById to retrieve the same ID, you get back a fully populated object. Likewise if IE8 is not in standards mode, you get back a mostly (but not completely) populated object -- but populated enough to avoid the script error, anyway.
All this code looks like it is injected dynamically into the SharePoint page, so that rules out simply replacing references to document.all. However, we got the crazy idea of redefining the document.all.item method to actually invoke document.getElementById. Our attempts so far to do this don't work, so perhaps someone might shed some light on what we're doing wrong (okay, there's lots wrong about this, but it's IE and SharePoint, right?).
Our initial attempt at an override looks like this:
<script type="text/javascript">
document.all.item = function(id) { return document.getElementById(id); }
</script>
This code is in the document HEAD, above any other script references (SharePoint or otherwise), but it does not appear to supersede the native code.
Thoughts, ideas, suggestions and criticisms welcome!
document.all is a HTMLCollection, so you may use HTMLCollection.prototype to change the behaviour:
if(document.all
&& !window.opera
&& typeof HTMLDocument=='object'
&& typeof HTMLCollection=='object')//filter IE8
{
HTMLCollection.prototype.item=
function(id)
{
return((this==document.all)
? document.getElementById(id)//document.all
: this[id]//maintain native behaviour for other collections
);
}
}
So you're saying you can't change the references to document.all.item because SP directly injects it to the html? So couldn't you use the DOM to replace it?
BTW, I feel your SharePoint pain. I've built SP workflows, and those are enough of a pain for me!
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 the server lies a html file with javascript code included.
This javascript code includes a method called something like "CheckObject".
This file works for all users, except one specific (but important).
He gets a javascript error and in his browser sourcode appears something unbelievable:
The methodname "CheckObject" is replaced with "Check!==ect", means the "Obj" of the method name is replaced with !==.
Why could that be?
Hope anybody can help me!
Best regards
If he's using a browser that supports extensions (like Firefox, Chrome, and some others), it's probably worth disabling all of the extensions and seeing if the problem goes away.
If you haven't already, I'd completely clear his cache in case there was a bad page transfer once and the browser is reusing it.
I can't imagine how it would be happening reliably otherwise.