"Uncaught Typeerror: Illegal Invocation" in Chrome

Uncaught TypeError: Illegal invocation in Chrome

In your code you are assigning a native method to a property of custom object.
When you call support.animationFrame(function () {}) , it is executed in the context of current object (ie support). For the native requestAnimationFrame function to work properly, it must be executed in the context of window.

So the correct usage here is support.animationFrame.call(window, function() {});.

The same happens with alert too:

var myObj = {
  myAlert : alert //copying native alert to an object
};

myObj.myAlert('this is an alert'); //is illegal
myObj.myAlert.call(window, 'this is an alert'); // executing in context of window 

Another option is to use Function.prototype.bind() which is part of ES5 standard and available in all modern browsers.

var _raf = window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        window.oRequestAnimationFrame;

var support = {
   animationFrame: _raf ? _raf.bind(window) : null
};

Keep getting Uncaught TypeError: Illegal invocation?

getElementById requires a calling context of document. Use .bind to bind r to document:

var r = document.getElementById.bind(document);

What is causing Uncaught TypeError: Illegal Invocation in this code?

You're missing two options for the $.ajax call, these

contentType: false,
processData: false,

Making it like this

$.ajax({
    xhr: function () {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function (evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total * 100;
                console.log("percentComplete = " + percentComplete);
            } else {
                console.log("lengthComputable evaluated to false;")
            }
        }, false);

        xhr.addEventListener("progress", function (evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total * 100;
                console.log("percentComplete = " + percentComplete);
            } else {
                console.log("lengthComputable evaluated to false;")
            }
        }, false);

        return xhr;
    },
    type: 'POST',
    url: '@Url.Action("upload","FileUploadAsync")',
    data: data,
    contentType: false,
    processData: false,
    success: function (data) {
        console.log("success!");
    }
});

if you let jQuery process the files internally it throws an Illegal invocation error.

Javascript : Uncaught TypeError: Illegal invocation

The error "Illegal Invocation" is usually caused when the invocation context is invalid. In case of .getUserMedia() it expects the context to be of navigator.

Try webrtcSupport.getUserMedia.call(navigator, ...);

Uncaught TypeError: Illegal invocation in Chrome or SCRIPT65535: Invalid calling object in IE when submit form

The submit method when called with myForm.submit() knows the context is myForm, but when we are calling it using submit2(), there is not context ( global context), so its giving error.

To fix the error, you have to call the submit2() method by setting the content of this to the myForm.

The sample code is

var submit2 = myForm.submit;
submit2.call(myForm);

You can either use call or apply for changing the context.

More Info on call and apply:

1. apply mdn reference
2. call mdn reference

---

Related Topics