The addEventListener function seems to encounter issues in IE11

Question

The addEventListener function seems to encounter issues in IE11

There is a javascript function below that uploads the selected file and updates the grid. It works perfectly in Firefox, but there seems to be an issue with IE11. The "ESignature/Registration" function within the addEventListener does not seem to execute. I placed a breakpoint at the Registration function, but it does not get triggered, resulting in the grid not refreshing. Any suggestions on how to resolve 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;
        } 
    });

javascript asp.net-mvc-4 internet-explorer

Answer 1

Answer №1

In Firefox, the "addEventListener" method is fully supported; however, it may not work in IE. To handle the event of completing a request, you should use "onreadystatechange" instead. Remember to set up your "onreadystatechange" handler before calling "send", as the request to the server could finish before the handler is ready.

For more information on XMLHttpRequest properties, visit: here

Answer 2

In Firefox, the "addEventListener" method is fully supported; however, it may not work in IE. To handle the event of completing a request, you should use "onreadystatechange" instead. Remember to set up your "onreadystatechange" handler before calling "send", as the request to the server could finish before the handler is ready.

For more information on XMLHttpRequest properties, visit: here

Answer 3

Answer №2

If you're already utilizing jQuery, my recommendation would be to utilize $.ajax instead of directly using XMLHttpRequest, as it is likely to resolve the issue at hand.

However, if you have a specific reason for sticking with using XMLHttpRequest directly, it's probable that you'll need to utilize readystatechange instead of load. It's possible that IE11 doesn't support load, or does not support it in the compatibility setting being applied to your page. If your page is loading under an older compatibility mode, the addEventListener won't be available on the XMLHttpRequest object.

Since you are not sharing the XMLHttpRequest instance with anyone else, here's a straightforward approach to address both potential issues:

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

And as mentioned by Chris, ensure to place this code before calling .send.

Once again: You have a library that can handle these tasks more efficiently. Make use of it.

Answer 4

If you're already utilizing jQuery, my recommendation would be to utilize $.ajax instead of directly using XMLHttpRequest, as it is likely to resolve the issue at hand.

However, if you have a specific reason for sticking with using XMLHttpRequest directly, it's probable that you'll need to utilize readystatechange instead of load. It's possible that IE11 doesn't support load, or does not support it in the compatibility setting being applied to your page. If your page is loading under an older compatibility mode, the addEventListener won't be available on the XMLHttpRequest object.

Since you are not sharing the XMLHttpRequest instance with anyone else, here's a straightforward approach to address both potential issues:

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

And as mentioned by Chris, ensure to place this code before calling .send.

Once again: You have a library that can handle these tasks more efficiently. Make use of it.

Answer 5

Answer №3

After making some adjustments to the URL, I was able to get it working. The issue was that Internet Explorer was caching the URL and not hitting the Registration function. To solve this, I added a new variable called 'check' to the URL with a unique value every time, ensuring that the Registration function is always accessed.

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

Here's the 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;
    } 
});

A big thank you to T.J. Crowder and Chris for their valuable contributions.

Answer 6

After making some adjustments to the URL, I was able to get it working. The issue was that Internet Explorer was caching the URL and not hitting the Registration function. To solve this, I added a new variable called 'check' to the URL with a unique value every time, ensuring that the Registration function is always accessed.

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

Here's the 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;
    } 
});

A big thank you to T.J. Crowder and Chris for their valuable contributions.

The addEventListener function seems to encounter issues in IE11

Answer №1

Answer №2

Answer №3

Similar questions

steps for setting up babel-cli and babel-preset-react

Step-by-step guide on installing both Angular and Nodejs within a single folder

Crafting artistic shapes using the Canny Edge Detection technique on Canvas

Next.js - utilizing dynamic API routes within nested folders

Struggling to toggle the visibility of a table with a button - successfully hiding it, but unable to make it reappear?

What could be causing the Angular router outlet to not route properly?

Transforming Color with JQuery on the Fly

Issue with displaying marker information on Angular Google Maps

Calculate the total number of table rows added using jQuery

Reactive property cannot be defined on an undefined, null, or primitive value within the context of Bootstrap Vue modal

Load a webpage with two dropdown menus in JavaScript/jQuery that have the same selection option pre-selected

Utilizing AngularJS directives with the power of string formatting

Using setInterval on a batch of freshly generated div elements

Truncating decimal points in JavaScript

Placing a hyperlink within template strings

Show the elements of an array (that have been read and processed from a text file) on separate lines using JavaScript

Conceal the div element if the value exceeds 0

Typescript implementation for structuring JSON response data from API calls

JavaScript: Exporting and Utilizing a Function within a Model.js File

Spin a child element by clicking on its parent component