CODEWITHSUNDEEP
javascriptjquery
ozzboy
ozzboy

Reputation: 2720

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

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.

Upvotes: 0

Views: 2737

Answers (1)

spanky
spanky

Reputation: 2870

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>

Upvotes: 2

Related Questions