jQuery error in Internet Explorer - Object doesn't support property or method 'addEventListener' occurred

▲
0
▼

I have a simple HTML file with jQuery script calling a web service.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    function makeRequest(url, messageString) {
        return $.ajax({
            url,
            headers: {
                'Authorization': 'Bearer XXXXX',
                'Content-Type': 'application/json'
            },
            method: 'POST',
            dataType: 'json',
            data: messageString,
        });
    }
    function request1() {
        var messageString = '{"data":{"sample_data":"4.40%"}}';
        const url = 'https://url/v1/projects/path/results';
        return makeRequest(url, messageString);
    }
    $.when(request1())
        .then(function (data1) {
            $('#level1').html(data1[0].data.content);
        });
</script>
</head>
<body>
<div id="level1"></div>
</body>
</html>

Everything works fine in Chrome but when I try to open it in Internet Explorer 9 it fails. When I debug I found this error:

Unhandled exception at line 3, column 147 in 
https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
0x800a01b6 - Microsoft JScript runtime error: Object doesn't support 
property or method 'addEventListener' occurred

Any help appreciated.

javascript
jquery
asked on Stack Overflow Sep 1, 2017 by Ram

1 Answer

▲
2
▼

Your HTML document doesn't have a doctype declaration. This is needed for IE9 to include addEventListener. Without it, you're in quirks mode, and things will not behave as you'd expect.

Put this at the top of your HTML:

<!DOCTYPE html>
answered on Stack Overflow Sep 1, 2017 by spanky

User contributions licensed under CC BY-SA 3.0