We Keep Coding

What are invalid values when setting style properties in IE9?

Im doing a js with D3v4 library. It works in Chrome, Firefox, IE edge and IE 10. But I need it works in IE 9.
I saw a similar question but this is for the D3v3 version. Even so, I try solve my problem with the answer but don't work.
In IE9 the console report this type errors.
SCRIPT87: Argumento no válido.
Archivo: d3.min.js, Línea: 2, Columna: 6430
This error mark this function in d3.js library:
function styleConstant(name, value, priority) {
return function() {
this.style.setProperty(name, value, priority);
};
}
Specifically this line:
this.style.setProperty(name, value, priority);
And if I usin d3.min.js mark this function:
function B(t,n,e){return function(){this.style.setProperty(t,n,e)}}
Specifically this line:
this.style.setProperty(t,n,e)
I found this answer and it says this:
Yes, IE9 throws an error sometimes if you try to set an invalid style property. This is one of IE9’s quirks, and since D3 is not a compatibility layer, you’ll need to avoid invalid values when setting style properties.
But i don't know what are invalid values in style properties.

Try
element.style("property", "value");
It's absolutely necessary that the value is always a string. Otherwise you will get a weird Character Error in IE9 as it can only handle strings.
I tested it with D3JS 4.10.12.

XPath queries in IE use zero-based indexes but the W3C spec is one-based. How should I handle the difference?

The Problem
I am converting a relatively large piece of Javascript that currently only works on Internet Explorer in order to make it work on the other browsers as well. Since the code uses XPath extensively we made a little compatibility function to make things easier
function selectNodes(xmlDoc, xpath){
if('selectNodes' in xmlDoc){
//use IE logic
}else{
//use W3C's document.evaluate
}
}
This is mostly working fine but we just came across the limitation that positions in IE are zero-based but in the W3C model used by the other browsers they are one-based. This means that to get the first element we need to do //books[0] in IE and //books[1] in the other browsers.
My proposed solution
The first thought was using a regex to add one to all indexes that appear in the queries if we are using the document.evaluate version:
function addOne(n){ return 1 + parseInt(nStr, 10); }
xpath = xpath.replace(
/\[\s*(\d+)\s*\]/g,
function(_, nStr){ return '[' + addOne(nStr) + ']'; }
);
My question
Is this regex based solution reasonably safe?
Are there any places it will convert something it should not?
Are there any places where it will not convert something it should?
For example, it would fail to replace the index in //books[position()=1] but since IE doesn't appear to support position() and our code is not using that I think this particular case would not be a problem.
Considerations
I downloaded Sarissa to see if they have a way to solve this but after looking at the source code apparently they don't?
I want to add one to the W3C version instead of subtracting one in the IE version to ease my conversion effort.
In the end
We decided to rewrite the code to use proper XPath in IE too by setting the selection language
xmlDoc.setProperty("SelectionLanguage", "XPath");

we just came across the limitation that positions in IE are zero-based
but in the W3C model used by the other browsers they are one-based.
This means that to get the first element we need to do //books[0] in
IE and //books[1] in the other browsers.
Before doing any XPath selection, specify:
xmlDoc.setProperty("SelectionLanguage", "XPath");
MSXML3 uses a dialect of XSLT/XPath that was in use before XSLT and XPath became W3C Recommendations. The default is "XSLPattern" and this is what you see as behavior.
Read more on this topic here:
http://msdn.microsoft.com/en-us/library/windows/desktop/ms754679(v=vs.85).aspx

Why not modify the original expressions, so that this:
var expr = "books[1]";
...becomes:
var expr = "books[" + index(1) + "]";
...where index is defined as (pseudocode):
function index(i) {
return isIE ? (i - 1) : i;
}

javascript options.length = 0 not working in IE9

I have a page that sets the length of a select list to 0 before it adds new options. This worked fine in all browsers until IE9. In IE9 I get the error: DOM Exception: NOT_FOUND_ERR (8). This is all I'm trying to do:
var typebox = document.sForm.ePosition;
typebox.options.length = 0;
Works fine in compatibility mode.

Try executing each piece in your console, and see where your exception is:
document.sForm
document.sForm.ePosition
document.sForm.ePosition.options
document.sForm.ePosition.options.length
I tried setting the length of options to 0, and was pretty surprised that it worked (in Chrome). Array.length should be a read-only property, in my opinion. I would use DOM code to remove the elements, something like this:
while (element.hasChildNodes()) {
element.removeChild(element.firstChild);
}

I was just struck by the same issue and found a convenient solution for those of us using jQuery:
$(selectObject).empty();
I've tested this in IE 7-9, FF 10.0 and Chrome 18 using jQuery 1.4.4.

Question was in pure javascript, please supply first a pure javascript reply. The users could not be interested in jquery since many embedded solutions can't use jquery.

IE Javascript error "Object doesn't support this property or method" within jQuery

For some reason, I am getting the following Javascript error in Internet Explorer 8 on line 3156 of jquery.js (version 1.4.3, non-compressed version): Object doesn't support this property or method. No error occurs in Firefox and Google Chrome.
This is the line the error occurs on:
if ( (match = Expr.leftMatch[ type ].exec( expr )) != null && match[2] ) {
Investigation (console.log(Expr.leftMatch[type])) produces the following interesting result: In Google Chrome, it outputs
/(^(?:.|\r|\n)*?):((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\3\))?(?![^\[]*\])(?![^\(]*\))/
However in Internet Explorer this is the output:
function() {
var p = this;
do p = p.previousSibling;
while (p && p.nodeType != 1);
return p;
}
On which exec cannot be called (it is undefined). The quoted function is not present within jquery.js. Does anyone have any clue why this happens, or what I can do to solve it?
I have, unfortunately, not yet been able to create a simple script to reproduce the problem, although I did find this post of someone having the same problem, but it does not offer a solution (the last post suggests the page should be run in Standards Mode, but mine already is).

As it turns out, I managed to figure it out by myself after several painful hours. It appears the Sizzle selector engine breaks in this unexpected way (and only in Internet Explorer), if you have defined Object.prototype.previousObject elsewhere.
Removing that declaration, or renaming previousObject to something else fixes the problem.
The funny thing is, I even put that code there myself (the Object.prototype.previousObject = [the function in my question]), but I did not recognize the code.
Well, that's another day full of development potential wasted.

I have discovered the same behaviour occurs if you attempt to add a method called "inherited" to the Object.prototype, ie Object.prototype.inherited = <some func>
It affects IE6, 7 & 8 but seems to be fixed in IE9 (beta)

May be to late to respond but I had the same problem and solved with selecting elements with plain java script rather then jquery!
var div = document.getElementById("myDiv");
var rect = div.getBoundingClientRect();
This works some how!

ext js - el.ownerDocument.createRange() errors in IE 8

HI,
I am trying to dynamically add a form to a tab in Ext-js. (the tab has already been rendered). fyi, i am using I am using Ext 2.2.
the error occurs when during the tab.add function:
ie:
function tabactivate(tab) {
var newItem= new Ext.FormPanel(.....);
**tab.add(newItem)**; //ERRORS HERE
tab.doLayout();
}
I get this error on line 247 of ext-all-debug.js
which is
range = el.ownerDocument.createRange();
the error is (Object doesn't support this property or method.)
This works fine in Firefox but breaks in IE8.
Does anyone know a workaround for this ?
Thanks

This sounds very similar to an issue I had with ExtJS 2.2 and IE.
It seems like a lot of places in the Ext code that you see code like this:
var td = document.createElement("td");
this.tr.insertBefore(td, this.tr.childNodes[index]);
When in fact that doesn't work on IE because "this.tr.childNodes([0])" does not yet exist.
My workaround was to override the prototype (in my case insertButton() in Ext.Toolbar) to check for the existence of this.tr.childNodes([0]), using a different function or creating it if it didn't exist.
I hope that I'm correct that this is the problem you are running into.

So i found an old string that had the solution for me.
http://www.extjs.com/forum/showthread.php?t=7912&highlight=createRange
Essentially, when i was instantiating empty tabs, i had my html property set to this:
html: ' ',
once i either took the property out completely or i changed to
html: '<span></span>'
it stopped breaking.
Thanks

IE (even 8) doesn't support the document.createRange() method.
You can try var supportsDOMRanges = document.implementation.hasFeature("Range", "2.0"); to see whether a browser supports DOM ranges per the standard.