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.

'target.html()' is null or not an object

I'm trying to replace all occurrences of a certain character (quotes) from an element. My code works fine in Chrome and FF but fails in IE with the debugger saying - 'target.html()' is null or not an object
here is what my code looks like -
text = "some random text";
target = $('#target');
target.append(text);
target.html(target.html().replace(/"/g, " "));
What's causing that error in IE and how do i fix it?

'target' is used an attribute and IE does not like it if you use it as a variable name. In fact it even refuses to recognize event.target and insists on event.srcElement (tell me about it ..) .
Anyways, it should work if you rename the object to $target.

One of the main reasons I get such errors is because the HTML is not correctly formed(and it sure gave me hell before I found out). Other browsers allow a missing '>' or other syntactical errors, but IE is very strict.
So just see minutely that the markup in target.html() is correct.

Jquery issues on older versions of IE

I have the following statement in document.ready function:
if($("sidebar ").html().trim().length == 0)
{
$("sidebar").append("<p> The sides..</p>");
};
It works fine in IE 9 but as soon as I select IE 8 (browser and document standard), the script stops working and gives the following error:
SCRIPT5007: Unable to get value of the property 'trim': object is null or undefined
application-e51c9eee7d22e9644481115dc1fedd5f.js, line 7 character 17578
I looked at the .js in debug mode and see that my statement above is transformed to:
$("sidebar ").html().trim().length==0&&$("sidebar").append("<p> The sides..</p>")
How do I prevent this error? Please note that I do see that the node is present in the rendered page.
I thought that maybe just having reference to shiv5.html may not be sufficient to take care of the IE idiosyncrasies. So, I have added modernizr.js via sprockets and I have added class="no-js" in my layout. Still no luck in IE <9.
What am I missing? What else can I do to get the favor of Microsoft overlords?

According to MDN, trim isn't available in IE < 9.
You could use $.trim instead:
if($.trim($("sidebar ").html()).length == 0)
{
$("sidebar").append("<p> The sides..</p>");
} // <-- Don't want a semicolon here.
The MDN article lists an alternative if you don't want to find all the instances of trim and correct them. You could use the following to create .trim if it's not natively available:
if(!String.prototype.trim) {
String.prototype.trim = function () {
return this.replace(/^\s+|\s+$/g,'');
};
}

Check out this thread. After a quick search it seems that many people are experiencing issues with trim.

Javascript can't create dictionary in IE

var Dictionary = {
foo: "bar"
}
alert(Dictionary.foo)
This works fine in Firefox 6, but not in IE8, is there a syntax error that FF is displacing, or do I need an IE fix?

This example does work in IE8 - at least for me. I'm running on a Windows XP SP 3 with the latest IE8.
If you have problems with some Object-notations, check if your key is named like keywords which are specified in JavaScript, like class and aren't defined as a String (you need to write it as "class". Otherwise missing colons are often a source of errors.

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.