What are invalid values when setting style properties in IE9? - javascript

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.

Related

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.

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!

is this a bug? please check it out

html
<div contentEditable="true">testing....</div>
jQuery
$(document).ready(function(){
$('[contenteditable]').removeAttr('contenteditable');
});
above codes is fine and working. you can feel it here.
Now, try this
$('[contentEditable]').removeAttr('contentEditable');
// notice the CamelCase of the string contentEditable
in FF 3.6, it gives an error on the console
An invalid or illegal string was
specified" code: "12 elem[ name ]
= value;
and the div is still editable.
I suspected it was the jQuery selector, but is not. By further inspection, it was the argument passed on the .removeAttr('contentEditable');. It works when all small letters. So, I thought it should be all small letters. I'm curious so I tried adding CLass as an attribute and do .removeAttr('CLass');. But then it works without error.
So, how come contentEditable is giving me that error?
update
from Kobi, it seems that it actually accept any case except, contentEditable (I did try too).
CamelCase
This isn't about small letters, but about the exact casing. Any other casing than contentEditable works, for example: removeAttr('ConTentEditable');.
I can't find the exact source of the problem, I guess it's a Firefox restriction.
It seems jQuery sets the attribute to an empty string before removing it, which is what's causing the error. This seems to work better:
$('[contentEditable]').attr('contentEditable', false);
You could call it a bug, but really the framework is designed this way. removeAttr, along with other attr functions, points to jQuery.attr() to set the attribute's value. After setting the attribute to "", it then attempts to remove it. The code for attr() specifically checks to see if the given string is a property name on the object first using the in operator:
// If applicable, access the attribute via the DOM 0 way
if ( name in elem && notxml && !special ) {
(from jQuery 1.4, line 1452-1453)
Since you're supplying the camelCase property name, it uses that instead of elem.setAttribute(), which is specifically the cause of the problem. For any other case, name in elem would return false (because property names are case sensitive), which is why it's successful then. jQuery does this mostly to work around cross browser issues with setAttribute().
It looks like Firefox has a problem with setting the property to an empty string, unless you have the same problem in other browsers. You could try and file a bug either on the jQuery site or MDC.
contentEditable seams to be a special attribute:
http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#contenteditable
The contentEditable property (not attribute, since that isn't what attr() and friends usually deal with) expects a string value, one of "true", "false" and "inherit". I wouldn't use jQuery to turn off contentEditable, but I imagine the following would work:
$('[contenteditable]').attr("contentEditable", "false");
Or you could bypass jQuery for setting the actual contentEditable property:
$('[contenteditable]').each(function() {
this.contentEditable = "false";
});

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.

JQuery issue (major) with IE - all versions

This only happens with IE (all versions), on line 1120 in
jquery-1.2.6.js I get the following error:
Line 1120:
Invalid Property Value
The line in the js file is the following:
elem[name] = value;
It is inside attr: function( elem, name, value )
Does anybody have a problem similar to this?
If this is also you, it sounds like you're trying to change the CSS of the element rather than give it an attribute.
If that is the case then try this instead;
jQuery.css('color', 'inherit');
This error can also occur if you call jQuery.css with an invalid attribute value, such as:
$('div.foo').css('padding-left', 'NaNpx');
The problem is IE-only because you are probably trying to set something like "min-height" which exists in (a proper CSS implenting) browser like Firefox, but not in a (demon spawned fiend of a) browser like Internet Explorer. I ran in to the same issue using jQuery's own dialog UI function.
I was a huge proponent of jQuery before this, but this has really put some egg on its face.

Categories