INVALID_STATE_ERR: DOM Exception 11 (WebKit)

Question

I recently tested a Cappuccino app I was working on with Chrome and Safari. I get the error:

INVALID_STATE_ERR: DOM Exception 11: An attempt was made to use an object that is not, or is no longer, usable.

The lack of information is frustrating. What object and where did I attempt to use it? Chrome tries to answer the second question but the line number it gives, 465, doesn't mean anything when the file it gives is just 94 lines long. Without more information I don't even know where to start looking.

Topping

Answer 1

Chrome canary offers stack traces for DOM Exceptions!

Kay

This is the best answer to this question. Made my day. Thank you sir! – Bales

"DOM exceptions have stack trace in Chrome 21." code.google.com/p/chromium/issues/detail?id=64319 – Topping

Answer 2

Usually this error occurs with the XMLHttpRequest when you call the open method with async = true, or you leave the async parameter undefined so it defaults to asynchronous, and then you access the status or responseText properties. Those properties are only available after you do a synchronous call, or on the readyState becoming ready (once the asynchronous call responds). I suggest you first try with async = false, and then switch to it being true and use the onReadyStateChange.

Gasteropod

thanks buddy... I'd been rage-concentrating on this for an hour. – Carsoncarstensz

Instead of onReadyStateChange, use onLoad, if that's what you want. And status and responseText are actually available on HEADERS_RECIEVED state as well, so they are available early enough if you want it. – Bilocular

Dave, you might be able to help me with my question. I tried setting async to false, and Chrome stops giving me the error, but it doesn't even make a request to the server. My code works totally fine in Firefox. https://mcmap.net/q/410278/-chrome-webkit-xhr-file-upload/371273 – Demerit

async = false is deprecated (and hated by the browser vendors, and they'll try to remove it). I suggest not using it, at least not for anything more than temporary debugging. – Henton

Answer 3

In my case I was setting the headers prior to opening the connection. To prevent this error the headers need to be set after opening the connection:

var fd = new FormData();
fd.append("fileToUpload", file);
var xhr = new XMLHttpRequest();
xhr.open("POST", postUrl, true);
xhr.setRequestHeader("cache-control", "no-cache");
xhr.send(fd);

I understand this answer is specific to my problem and not the generic INVALID_STATE_ERR: DOM Exception 11 message but figured I would post my solution here for the next person.

Romie

I'm glad you posted this answer, because it's exactly what I was doing. – Engird

Was in the same rabbit hole with zepto github.com/madrobby/zepto/pull/935 – Belldame

Answer 4

This can also happen when Javascript tries to document.write() into an XHTML page (Content-Type: application/xhtml+xml).

Insulator

Yes, with XHTML it does not work, with HTML it works! Thanks a lot. – Tater

Answer 5

This error is also thrown when attempting to modify the value property of a <input type="file"

This is a security check.

Echinate

Can you provide more focus on your answer? Because I am facing issue with <input type="file"/> with jquery.1.7.1.min.js. Would appreciate your valuable response :) – Worse

For obvious security purposes, you cannot modify the value field of a file input field in JavaScript. Otherwise that would allow any script to upload random files from the user computer to their server without any action on the user part. Thus, when trying to update the property, the browser will throw an exception. – Echinate

Actually I am not able to even open the File Open Dialog box on clicking Browse button. – Worse

The only permissible value that can be set for <input type="file" /> is null. Even undefined results in this exception. – Marco

So is there any solutions ? – Sexton

Answer 6

First, I don't really know a thing of Cappucino or what you're trying to do. But I've seen this when working with Qt WebKit and JavaScript objects. It happened after javascript window object was cleared, e.g. if I didn't load my native JS objects to WebKit after new page was loaded.

This basically means, you are trying to use internally deleted JavaScript object.

Spilt

Answer 7

In this case I believe the issue was stemming from trying to draw images to canvas using a pattern fill with an image that was not fully loaded. This question was related to Cappuccino issue 811 and my reasoning is based on aparajita's advice to make sure the image is loaded before attempting to use it as a pattern fill.

Still, this error is frustratingly opaque considering the key piece of information (what object was called) is not obvious and the places it can crop up in are varied.

Topping

Answer 8

Both Chrome and Safari have built in debuggers. Make sure you use the index-debug.html file to launch your application to get easy to read code.

In Safari, go to Preferences and activate the Developer menu. Then go to Develop > Start Debugging JavaScript. Use the pause icon in the lower left to set the debugger to pause on errors. The next time you hit the problem the debugger will pause at the offending line and show you how it got there through the stack trace.

Peshitta

Have you ever experienced this problem? The hardest part is debugger doesn't give the usual info. – Bales

Answer 9

I've seen this happen when trying to dynamically write an input[type="file"] element with its value attribute set.

When i removed the value attr from what i was injecting it all worked.

In a sense, I see this error as meaning "you tried to do something that specification does not allow" based upon this article here -- http://designbyjeeba.blogspot.com/2011/04/dreaded-invalidstateerr-dom-exception.html

Lifeordeath

Answer 10

This problem occured for me because I used the Audio API like this:

let someAudio = new Audio(file);
someAudio.play();
someAudio.pause();

But this is not correct because the play() function is async. Instead you need to use the then function of the returned Promise.

someAudio.play().then(() => someAudio.pause());

Return value: A Promise which is fulfilled when playback has been started, or is rejected if for any reason playback cannot be started. MDN

Humankind

Answer 11

I would like to add to this. Got this bug on a Samsung S4 and S5 using the stock browser.

On my side it was caused by trying to play an audio file that hasn't loaded yet.

This SO Question covers the same problem: DOM Exception 11

Grandiose