JS Function Undefined in Internet Explorer

Question

The following function is returning as Undefined in Internet Explorer. I have searched around and see others that have had this issue, but not really finding a solid solution for this problem.

Javascript:

        function addRow(index) {

        $('#addButton' + index).attr("disabled", true);
        $('#removeButton' + index).attr("disabled", true);

        var counter = ++index;

        var content = `<tr id="row${counter}"><td align="right">First Name:</td>
                        <td align="left"><input id="personArray_${counter}__firstName" name="personArray[${counter}].firstName" type="text" value=""></td>
                        <td align="right">Middle Initial:</td>
                        <td align="left"><input id="middleInitial" name="personArray[${counter}].middleInitial" type="text" value=""></td>
                        <td align="right">Last Name:</td>
                        <td align="left"><input id="lastName" name="personArray[${counter}].lastName" type="text" value=""></td>
                        <td>
                            <input type="button" class ="btn btn-xs valid" id="addButton${counter}" onclick="addRow('${counter}')" value="Add" aria-invalid="false">
                            <input type="button" class ="btn btn-xs valid" id="removeButton${counter}" onclick="deleteRow(this, ${counter})" value="Remove" aria-invalid="false">
                        </td></tr>`;

        $(content).insertAfter($("#addRow > tr").eq(index - 1));
    };

HTML:

<td><input type="button" class="btn btn-xs" onclick="addRow('0')" value="Add" id="addButton0" /></td>

Internet Explorer Debugger Error:

Internet Explorer does not support backticks for template literals fyi. you might have caused IE to throw a syntax error. — Daniel A. White, Jan 04 '18 at 19:42
@DanielA.White you are correct. Through a combination of Babel and another stackoverflow answer located here https://stackoverflow.com/a/30867255/8401416 I was able to get my code working. — , Jan 04 '18 at 20:03
@DanielA.White, this should be mentioned in the answers as well. Mostly, people look for Answers to get thing resolved, not comments. And your comment saved my day :) — Aman Jain, Nov 15 '18 at 09:41

score 1 · Answer 1 · answered Jan 04 '18 at 19:55

1

It look like you are using Template literals and that is not support on Internet Explorer. Here is the documentation of Template literals at the bottom you can see the browser compatibility. Template literals

answered Jan 04 '18 at 19:55

Angel

1,670
1
11
14

score 1 · Answer 2 · answered Jan 06 '18 at 04:37

Fist setup IE to record error console messages (during page loads).

go Tools>Internet Options>Advanced tab, check "Always record developer console messages". Save changes.

now when you show the f12 dev tool it will list scripting, markup, blocked content and security errors in the Console tab of the dev tool.

OR

starting from a blank web page (about:blank). Press f12 to display the dev tool. Select the Debugging tab and select "Break on all exceptions" from the dropdown (looks like a Stop sign), then (without closing the dev tool...PIN it to your browser), return to the browser and type in the address of your web site. The debugger should now break when it finds the syntax error in your script.

Which input language are you using in your dev environment... from your given code snippet it looks like you are using a French AZERTY layout and have mistyped the single quote.

var content = **`**<tr id="row${counter}"><td align="right">First Name:</td>
                        <td align="left"><input id="personArray_${counter}__firstName" name="personArray[${counter}].firstName" type="text" value=""></td>
                        <td align="right">Middle Initial:</td>
                        <td align="left"><input id="middleInitial" name="personArray[${counter}].middleInitial" type="text" value=""></td>
                        <td align="right">Last Name:</td>
                        <td align="left"><input id="lastName" name="personArray[${counter}].lastName" type="text" value=""></td>
                        <td>
                            <input type="button" class ="btn btn-xs valid" id="addButton${counter}" onclick="addRow('${counter}')" value="Add" aria-invalid="false">
                            <input type="button" class ="btn btn-xs valid" id="removeButton${counter}" onclick="deleteRow(this, ${counter})" value="Remove" aria-invalid="false">
                        </td></tr>**`**;

When nesting double quotes inside a single quoted js literal you should escape them.

eg....

var foo='<input type="button" class="btn"/>';

can be escaped as

var foo='<input type=\"button\" class=\"btn\">';

for non-selfclosing tags. eg.

var foo='<div></div>';

use

var foo='<div><\/div>';

use the debugging techniques outlined above to find out the real cause of the error message.... to me it looks like a typo (french single quote), but you should get into the habit of escaping nested quotes in js literals and template strings.

JS Function Undefined in Internet Explorer

2 Answers2