addEventListener is not working in IE11

Question

Below javascript function uploads the chosen file and updates the grid. Its working perfectly in firefox but not in IE11. Observed that its not executing "ESignature/Registration" function in addEventListener. I kept break point at Registration function. Its not getting hit and not refreshing the grid. Please guide me to fix this problem

     $("#lnkAddAttachment").click(function (e) {
        if (document.getElementById("txtFile").files[0] != null) {
            oFiles = document.getElementById("txtFile").files[0];
            nFiles = oFiles.size;

            var selectedFile = document.getElementById("txtFile").files[0];

            var xhr = new XMLHttpRequest();
            var fd = new FormData();
            var url = '@Url.Content("~/")' + "ESignature/getFile";

            fd.append("file", document.getElementById('txtFile').files[0]);
            $("#loadingwrapper").fadeIn();
            xhr.open("POST", url, true);
            xhr.send(fd);
            xhr.addEventListener("load", function (event) {
                var url = '@Url.Content("~/")' + "ESignature/Registration";
                $('#gridAttachments').load(url + ' #gridAttachments');
                $("#loadingwrapper").fadeOut();
            }, false);
            $('#txtDescription').val('');
            $('#txtFile').val('');

            return false;
        } 
    });

Answer 1

As you're clearly using jQuery already, I'd suggest using $.ajax rather than using XMLHttpRequest directly, which would almost certainly solve the problem.

But if you want to keep using XMLHttpRequest directly for some reason, you most likely need to use readystatechange rather than load ; perhaps IE11 doesn't support load , or doesn't support it in whatever compatibility setting it decided to use for your page. If your page is being loaded in some older compatibility mode, it also won't have addEventListener on the XMLHttpRequest object.

As you're not sharing the XMLHttpRequest instance with anyone, the simple way to deal with both of those potential problems is:

xhr.onreadystatechange = function () {
    if (xhr.readystate === 4) { // Also consider checking `status`
        var url = '@Url.Content("~/")' + "ESignature/Registration";
        $('#gridAttachments').load(url + ' #gridAttachments');
        $("#loadingwrapper").fadeOut();
    }
};

And as Chris points out , move that above the call to .send .

But again: You're using a library that handles these things for you. Use it.

Answer 2

The "addEventListener" method is supported in Firefox, but it may not be supported in IE. You'll need to use "onreadystatechange" to handle the event of completing the request. Also, you'll want to setup your "onreadystatechange" handler before calling "send"; otherwise it's possible the request to the server will finish before you setup the handler.

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest?redirectlocale=en-US&redirectslug=DOM%2FXMLHttpRequest#Properties

Answer 3

I just changed url as below. it worked. Problem is whenever below url hits IE, it takes from cache and it won't hit Registration function. To make the url unique every time, added new variable called check to url. Its value will be unique everytime and hits Registration function.

var url = '@Url.Content("~/")' + "ESignature/Registration?check=" + new Date().getTime();

Complete code:

$("#lnkAddAttachment").click(function (e) {
    if (document.getElementById("txtFile").files[0] != null) {
        oFiles = document.getElementById("txtFile").files[0];
        nFiles = oFiles.size;

        var selectedFile = document.getElementById("txtFile").files[0];

        var xhr = new XMLHttpRequest();
        var fd = new FormData();
        var url = '@Url.Content("~/")' + "ESignature/getFile";

        fd.append("file", document.getElementById('txtFile').files[0]);
        $("#loadingwrapper").fadeIn();
        xhr.open("POST", url, true);
        xhr.send(fd);
        xhr.addEventListener("load", function (event) {
            var url = '@Url.Content("~/")' + "ESignature/Registration?check=" + new Date().getTime();
            $('#gridAttachments').load(url + ' #gridAttachments');
            $("#loadingwrapper").fadeOut();
        }, false);
        $('#txtDescription').val('');
        $('#txtFile').val('');

        return false;
    } 
});

Thank you TJ Crowder and Chris for your inputs.