Why does my Javascript break in IE8? - javascript

The following code breaks in IE8:
getTypes: function (filter) {
features = []
_.each(this.collection.models, function (item) {
_.each(item.get(filter), function (value) {
if(features.indexOf(value) == -1){ //// error happens here
features.push(value)
}
})
})
return features
}
I get the error message:
Message: Object doesn't support this property or method
http://jsfiddle.net/w8fm2bf1/
Why is this?

The IE versions before IE9 does not support .indexOf() function for Array
As an alternative you can use jQuery.inArray(). Something like this:
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function(val) {
return jQuery.inArray(val, this);
};
}

Array.prototype.indexOf isn't supported in IE until version 9. (source).
You'll need to monkey patch it (there's an example on the MDN page linked above) or use an alternative.

Related

Detect if `scrollIntoView` accepts an object paramenter

The method element.scrollIntoView accepts one parameter. This parameter can be a boolean value or an object.
Currently, only Firefox supports the object syntax. I need to find a way to detect if the method allows an object to be passed.
The following is the code I'm trying to write:
var acceptsObjects = // part that I'm missing
if (acceptsObjects) {
element.scrollIntoView({ block: 'end', behavior: 'smooth' })
} else {
element.scrollIntoView(false)
}
My answer is quite late, but maybe it helps someone else:
function supportsScrollIntoViewOptions() {
var isSupported = false;
try {
var opts = {};
Object.defineProperty(opts, 'block', {
// define a getter on the opts object for the property 'block'
// if an object as the argument is supported, this function will be called and
// we can set `isSupported` to true
get: function() {
isSupported = true;
return 'nearest';
}
});
document.createElement('div').scrollIntoView(opts);
} catch(e) {}
return isSupported;
}
I have used var and old school method definitions for better backwards compatibility, as well as wrapped everything in a try { … } catch(e) { … }, which I’m not sure is necessary.
This was tested in Firefox 31.0, which returns false as well as Firefox 108.0.1 and Safari 15.5 which both return true. Even though Can I Use claims this feature is not supported in Safari 15.5 it works.
Please let me know if there are any improvements to my code.

IE 11 Script1002 Array.Filter(x => ...) (Arrow functions)

I get a error message in IE11 but not in chrome the error is:
Script1002 Syntax error
My code is as follows
var selectedRoles = vm.roles.filter(x => x.id === role.id);
The line and column number of the error suggest that it is the arrow function => that IE11 does not like. However it works fine in Chrome and Edge
ie 11 not support arrow functions
try
var selectedRoles = vm.roles.filter(function(x) { return x.id === role.id; });
IE not supported arrow function check browser compatibility here. If you want IE support then use the normal function instead.
var selectedRoles = vm.roles.filter(function(x) {
return x.id === role.id
});
The arrow function is not supported yet in IE 11. You can refer to these compatibity table: https://kangax.github.io/compat-table/es6/ to get an overview what is suuported where and to what extent in a detailed fashion.
Use pollyfills or a PRE-ES6 compatible code, e.g.
var selectedRoles = vm.roles.filter(function(x) {
return x.id === role.id
});

Syntax error when using `get` in object property shorthand

This bit of code:
function get() {
console.log('get')
}
var obj = {
get
}
obj.get()
results in a SyntaxError: Unexpected token } in iojs and Chrom{ium,e} but works fine in Firefox.
Longhand, of course, works fine:
function get() {
console.log('get')
}
var obj = {
get: get
}
obj.get()
So does using a word other than get
function git() {
console.log('get')
}
var obj = {
git
}
obj.git()
Is this a bug in V8 or something else? What am I not getting here?
v8 hasn't made this available by default yet1; firefox (which doesn't use v8) has.
For now, you can transpile with babel.js.
1 It's available, but not in every runtime environment. In node.js, for example, you need to enable it with a --harmony_something flag.

Why does IE give this error: Object doesn't support property or method isNaN

I get this error in IE 11:
Object doesn't support property or method isNaN
JavaScript
jQuery(document).ready(function($) {
var $total = $('#total'),
$value = $('.value');
$firstName = $('#firstname');
$lastName = $('#lastname');
$tour = $('#tour');
$pledge = $('#pledge');
$currency = $('#currency');
$distance = $('#distance');
$riders = $('#riders');
$(':input').on('input change', function(e) {
var total = 1;
$value.each(function(index, elem) {
if(!Number.isNaN(parseFloat(this.value)))
total = total * parseFloat(this.value);
});
$total.val(total/10);
$('#pledgefirstname').text($firstName.val());
$('#pledgelastname').text($lastName.val());
$('#pledgetour').text($tour.val());
$('#pledgepledge').text($pledge.val());
$('#pledgecurrency').text($currency.val());
$('#pledgecurrency2').text($currency.val());
$('#pledgecurrency3').text($currency.val());
$('#pledgecurrency4').text($currency.val());
$('#pledgetotal').text($total.val());
$('#pledgetotal2').text($total.val());
$('#pledgedistance').text($distance.val());
$('#pledgeriders').text($riders.val());
});
});
Number.isNaN
This is an experimental technology, part of the Harmony (EcmaScript 6)
proposal. Because this technology's specification has not stabilized,
check the compatibility table for usage in various browsers. Also note
that the syntax and behavior of an experimental technology is subject
to change in future version of browsers as the spec changes.
It is still not supported by most of the browsers (including IE11).
You should use a standard isNaN method instead:
if (isNaN( parseFloat(this.value) )) { ... }
If you are using ES6 with Babel in React. You can do like this:
// pollyfills for older browsers
// core-js v2.x.x:
import 'core-js/es6/number';
// core-js v3.x.x:
import 'core-js/es/number';
Add dependencies in package.json for
"dependencies": {
"core-js": "^2.5.5",
}
I had a similar problem except it was coming from React after it compiled, bundled, and minified. To solve this, I redefined the Number.isNaN:
if (!Number.isNaN) {
Object.defineProperty(Number, 'isNaN', {
value: function(value) {
return value !== value;
}
});
}

Javascript line breaking in IE8

I have a script which is using this line as part of some geocoding.
var dms = String(dmsStr).trim().replace(/^-/,'').replace(/[NSEW]$/i,'').split(/[^0-9.,]+/);
It works fine in all browsers apart from IE, which is kicking out an error.
I'm sending it parameters.
0.5501039994056782
It's not my code I'm just debugging it. I'm assuming it could be a problem with Typecasting it to a string, given that it's clearly a number.
But I'd love some feedback.
There is no String.trim() in IE8. You can add it like this:
if(typeof String.prototype.trim !== 'function') {
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g, '');
}
}
as per this answer.
I don't think IE has trim(). Try this:
if(typeof String.prototype.trim !== 'function') {
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g, '');
}
}
See this SO question for more information
the exact error is
"Object doesn't support property or method 'trim'"
so to solve you could do:
var dms = jQuery.trim(String(dmsStr)).replace(/^-/,'').replace(/[NSEW]$/i,'').split(/[^0-9.,]+/);

Categories