Var with {} break IE 11 [duplicate] - javascript

This question already has answers here:
IE 11 throws js breaking error 1010 unexpectedly in the middle of a tab to <h1> element
(1 answer)
function animate({ draw1, duration1 }) {... causes expected identifier (script1010) error in IE11 - Object Destructuring support in IE [duplicate]
(1 answer)
Closed 2 years ago.
Im having an issue using slideToggle as a variable on my website. Im using domSlider. When I try the following I get issues I cannot understand.
If define slideToggle as:
var {slideToggle} = window.domSlider;
I get SCRIPT1010: Expected identifier in IE 11. But works in Chrome and modern browsers.
And if I define it as:
var slideToggle = window.domSlider;
I get Uncaught TypeError: slideToggle is not a function In chrome and other modern browsers. But no errors in IE 11.
I dont know what is causing this, and how to move on from here.

IE11 doesn't support destructuring assignment: Browser_compatibility
var { slideToggle } = window.domSlider;
would be:
var slideToggle = window.domSlider.slideToggle;
to work in IE11, or you can just use window.domSlider.slideToggle directly

The var { item } = func() construct is called destructuring. The older Redmond Middle School Science Project (IE11) doesn't support it; it's from a javascript version that came after they stopped working on IE.
If you're targeting IE, scroll to the bottom of the MDN page describing the feature. For your example, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment# It says which browsers support the feature.
There's also a site called CanIUse.com with information, feature by feature, about browser support.
There's a transpiler (a compiler that turns new javascript into old) called Babel. You could try that. But explaining how to rig it in your project is too much for a SO answer.
Welcome to the wonderful world of developing code for bad legacy browsers. There's a good reason for Microsoft abandoning their own browser development and adopting Chromium.

Related

function animate({ draw1, duration1 }) {... causes expected identifier (script1010) error in IE11 - Object Destructuring support in IE [duplicate]

This question already has answers here:
Support for ES6 in Internet Explorer 11
(1 answer)
IE11 gives SCRIPT1002 error when defining class in javascript
(3 answers)
Closed 4 years ago.
I am having issues with a site build where the page is not displaying properly in IE11. The site displays correctly in chrome, firefox, and edge.
The error seems to break all the javascript from the file of the error. The file is responsible for handling parts of the layout, so when it fails it causes various sections on the page to not render properly.
The error message is "Script1010" and points to the following line of code:
function animate({ draw, duration }) {
...
}
I've not been able to identify why IE cannot process this line. The closest thing to answer I've seen is the following post that suggests that "draw" or "duration" might be reserved words in IE. But changing them caused the same error to occur.
Any suggestions or pointers?
EDIT: Thanks for the replies. Figured I would clarify the question as a foot note for similar searches, or even just for myself. As pointed out below, the question boils down to "Does IE support ES6 object destructuring?". Turns out object destructuring does not work in IE.
You are using ES6 to destructure the arguments. Internet Explorer does not support ES6.
You'll either have to rewrite it using ES5 or use a transpiler like Babel to transpile your code into ES5.
EDIT: If this is the only occurrence of ES6, I'd suggest rewriting it, but otherwise I'd use Babel.
function animate(arg) {
var draw = arg.draw
var duration = arg.duration
...
}

Can I have a problem with the arrow functions in Safari 9 in 2018?

I read this How to run ES6 code with arrow functions in Safari? but this question since January 2016. I also founded one issue about this on github, but it also since 2016.
I use the arrow functions, and my main script looks like that (()=>{ ... })(). So, it works nicely in all browsers except Safari 9. The last one gives me an error SyntaxError: Unexpected token ')'.
Following the attached link, I found that "Safari doesn't yet support this feature". In the MDN site I didn't found anywhere that Safari doesn't support this stuff. I was here too http://kangax.github.io/compat-table/es6/. I don't very well understand the table there, but I see the Safari and it is green.
So, I don't undersand, Safari support arrow functions or still not? Or my error have some other reason?
If you didn't found the answer there, try https://caniuse.com/#search=arrow%20functions. I'm sure it's what you need!

Javascript broken after moving from IE8 to IE11: "Object doesn't support property or method 'all' "

I was just forced into a browser upgrade (IE8 to IE11) while in the middle of testing. I've lost some essential functionality with some javascript that suddenly doesn't work in my .NET site.
This section of the code was written when I was in grade school, so I'm not extremely familiar with it, but what seems to be the problem is a call to form.all. I have to assume that call was built into javascript at some point - there's no definition for it in the code.
There are 7 "if statements" that use form.all and they are all written the same way:
if(form.all(cTag + "PersonNum") != null)
form.all(cTag + "PersonNum").value = personNumber;
The error:
JavaScript runtime error: Object doesn't support property or method 'all'
In newer versions of JavaScript, is there a version of form.all that performs the same action? All I really need is for someone to point me in the right direction.
A weird note: the same JavaScript code IS working in production on IE11
EDIT Ok, I found a line that was minimized. It looks like form is a created variable.
var form = document.forms(0);
EDIT2 Compatibility view/mode was the solution after all. I had added our production site's domain to the compatibility list and didn't think about it; adding 'localhost' fixed the issue. You just have to set it to the right domain first for it to work :)
Check the browser compatability mode when your running in production it's probally on IE8.
You can use obj.getElementsByTagName("*")
You could also add an All method to the prototype if it's not there.
IE introduced an all property for certain DOM objects (e.g. document) but it was never part of any W3C standard. It allowed access to DOM objects by name or ID using:
var element = document(elementNameOrID);
or
var element = document[elementNameOrID];
that is, it is a property that could use the same syntax as a method. Neat. Some other browsers supported it for compatibility, but it pretty much went out of use with IE 6 (not sure when IE started supporting getElementById, I think it was IE 5). But IE continued to think name and ID attributes were the same thing until IE 8 in standards mode.
Support for all has been dropped from IE 11 in standards mode.
If form is a reference to a form element, and cTag + "PersonNum" is the name of a form control, then the simplest fix is to change:
form.all(cTag + "PersonNum").value
to
form[cTag + "PersonNum"].value
which takes advantage of named form controls being made properties of the form that contains them. This behaviour is standardised and supported by browsers from the very beginning (i.e. every where) and is future proof (it's not going to change).

document.querySelectorAll([classname]) not working in IE9 [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
IE9 equivalent of querySelectorAll
I'm trying to get all elements with the classname "video" in some JS running in IE9. I'm using var videopanels = document.querySelectorAll(".video"); which is working great in Chrome.
Unfortunately I'm getting this error when I watch document.querySelectorAll(".video") in the debugger:
document.querySelectorAll(".video")
Object doesn't support property or method 'querySelectorAll'
Error
However, when I watch document in the debugger (it shows up as a DispHTMLDocument) and open up the [Methods] list, I see
querySelectorAll()
querySelectorAll(v)
IHTMLDOMChildrenCollection
What's going on? How come I can see it in the debugger, but not (apparently) actually call or use it?
Change your doctype to html5 standards.
<!DOCTYPE html>
Also check IE9 isn't operating in compatibility mode as this may cause it to ignore some methods it supports.

extjs4 Object doesn't support property or method 'indexOf' IE 8 workaround issue

My User defined sort function does not work in IE 8.
Object doesn't support property or method 'indexOf'
roles_store.sort([{
sorterFn: function(v1, v2) {
var order = ['read-only', 'user', 'admin', 'super'],
v1o = order.indexOf(v1.get('role_name')),
v2o = order.indexOf(v2.get('role_name'));
return v1o < v2o ? -1 : 1;;
}
}]);
The following link shows a workaround:
How to fix Array indexOf() in JavaScript for Internet Explorer browsers
I tried replacing indexof with Array.prototype.indexOf
v2o = order.Array.prototype.indexOf (v2.get('role_name'));
I apologize if I missed something here
IE 8 is a little old and it includes an old javascript version. It doesn´t have a lot of very useful methods that we use everyday. I recommend to include the tiny Array prototype extensions library (link). That library allows you to use all the methods (for arrays) that all new browsers (with newer javascript version) include.
You also can use the Extjs methods as Evan suggests (they work well) but you have to have that in mind all the time and most of the snippets and code samples that you find in internet or this site won´t run (you will have to translate them to use extjs methods). Another problem is that your code will works ok in Chrome and FF but not in IE if you not take care.
It is much more easy and safe to include the extensions that I recommend you, that´s what we did in our own project and it was a great solution.
Use Ext.Array.indexOf, it defers to the native indexOf where possible.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.Array-method-indexOf

Categories

Resources