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.

ozzboy
  • 2,672
  • 8
  • 42
  • 69
  • 1
    @AlonEitan Perhaps I'm misunderstanding, but according to jQuery's [Browser Support](https://jquery.com/browser-support/), does this not say that the current version should work in IE 9+? – Tyler Roper Sep 01 '17 at 19:19
  • 1
    Oh, so I got confused with ie8 then, thanks for letting me know – Alon Eitan Sep 01 '17 at 19:20
  • Nothing in your code creates an event listener, I don't see why it would run into that error. – Barmar Sep 01 '17 at 19:20
  • 1
    Open the console, and check, that you're really running the page in IE9 mode. – Teemu Sep 01 '17 at 19:20
  • 1
    First thing I look at when I'm getting unexpected IE incompatibility issues is [Compatibility Mode](https://www.howtogeek.com/128289/how-to-disable-compatibility-mode-in-internet-explorer/). If necessary, you can read [**this**](https://stackoverflow.com/questions/5825385/javascript-can-i-detect-ie9-if-its-in-ie7-or-ie8-compatibility-mode) for a bit more information. – Tyler Roper Sep 01 '17 at 19:22
  • Also, IE9 supports `addEventListener`, so something else is wrong – adeneo Sep 01 '17 at 19:22
  • BTW - You have in your ajax this: `url,` which should be `url: url,` (I think) – Alon Eitan Sep 01 '17 at 19:26
  • 1
    @AlonEitan: That's new shorthand syntax that lets you elide a property name that matches the variable name that holds the value. `var url = "foo"; var obj = {url, bar: "baz"}; // {url: "foo", bar: "baz"}` – spanky Sep 01 '17 at 20:29

1 Answers1

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>
spanky
  • 2,768
  • 8
  • 9