31

Here's a new one, IE11 is throwing errors on code that works in every other browser.

Anyway, after a few hours of "fixing" code so that IE11 doesn't fall on its own face I have come across an error I just cannot seem to find a solution to. Here is the code in question:

$('input[name="messageAccount"]').change(function () {
    $aButton.show();
    var addedIds = $("#hdnfield").val();
    if (addedIds == null || addedIds === "") {
        $("#hdnfield").val(this.value);
    } else {
        $("#hdnfield").val(`${addedIds}${this.value}`);
    };
});

This is nested on the inside of the success call in an Ajax request. IE's debugger is saying the error is coming from the content of the else statement but it's also reading all the brackets wrong. For example the opening parenthesis on this function is being "closed" after the closing bracket for the Ajax request... (hopefully that made sense).

Has anyone else had a similar issue with IE before? I've got a number of other bugs to fix so if there are any replies I will post back as soon as I can. Thanks in advance.

EDIT: just for reference I am currently running this locally and is part of what will become an internally hosted web app.

Damien
  • 621
  • 1
  • 7
  • 17
  • 2
    It's probably complaining about the backticks because IE11 doesn't support [template literals](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals). – André Dion Mar 27 '17 at 14:05
  • 11
    In general terms, if you need to support Internet Explorer you can't use technologies from current decade. – Álvaro González Mar 27 '17 at 14:07
  • Unfortunately this isn't code I have personally written so while skim reading over it I totally didn't notice they were backticks. Issue has been resolved – Damien Mar 27 '17 at 14:10

2 Answers2

60

It's because "`" (template strings) is not supported by IE : http://caniuse.com/#search=string

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

See https://stackoverflow.com/a/27678299/2195875

To avoid this error you can either use a ES6 to ES5 transpiler, or just directly write valid ES5 javascript:

instead of

`string text ${expression} string text`

write

"string text "+expression+" string text"

Tom
  • 4,666
  • 2
  • 29
  • 48
1

You can also add polyfill to your html:

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"/>
goksel
  • 4,450
  • 3
  • 42
  • 51