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.

score 62 · Answer 1 · answered Mar 16 '11 at 00:24

62

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.

answered Mar 16 '11 at 00:24

Dave Lampert

697
1
6
3

12

thanks buddy... I'd been rage-concentrating on this for an hour. – jsj Jun 15 '11 at 10:23
1

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. – odinho - Velmont Jan 09 '12 at 16:51
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. http://stackoverflow.com/q/14540418/371273 – winduptoy Jan 26 '13 at 20:12
`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. – Kornel Feb 04 '15 at 14:40

score 24 · Answer 2 · answered Dec 07 '12 at 14:39

24

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.

answered Dec 07 '12 at 14:39

Jeff Widmer

4,666
6
36
49

3

I'm glad you posted this answer, because it's exactly what I was doing. – bugloaf Mar 07 '13 at 20:50
Was in the same rabbit hole with `zepto` https://github.com/madrobby/zepto/pull/935 – parapet Aug 15 '14 at 10:17

score 9 · Accepted Answer · answered Jun 16 '12 at 22:45

9

Chrome canary offers stack traces for DOM Exceptions!

answered Jun 16 '12 at 22:45

Jamie Pate

1,379
17
17

1

This is the best answer to this question. Made my day. Thank you sir! – Nek Jun 25 '12 at 19:19
3

"DOM exceptions have stack trace in Chrome 21." http://code.google.com/p/chromium/issues/detail?id=64319 – Regis Frey Aug 17 '12 at 20:06

score 5 · Answer 4 · edited May 09 '12 at 20:41

5

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

edited May 09 '12 at 20:41

Charles Menguy

38,416
17
91
113

answered May 09 '12 at 16:26

Brian DeRocher

74
1
5

Yes, with XHTML it does not work, with HTML it works! Thanks a lot. – geronime Jun 24 '12 at 23:00

score 4 · Answer 5 · answered Feb 02 '13 at 12:44

4

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

This is a security check.

answered Feb 02 '13 at 12:44

pieroxy

860
7
12

Can you provide more focus on your answer? Because I am facing issue with `` with `jquery.1.7.1.min.js`. Would appreciate your valuable response :) – NullPointer Sep 30 '13 at 06:06
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. – pieroxy Oct 08 '13 at 08:31
Actually I am not able to even open the File Open Dialog box on clicking Browse button. – NullPointer Oct 08 '13 at 08:45
1

The only permissible value that can be set for is null. Even undefined results in this exception. – Noel Abrahams Nov 14 '13 at 10:25
So is there any solutions ? – Andrea Borgogelli Avveduti Jul 11 '16 at 16:06

score 3 · Answer 6 · answered Aug 15 '10 at 18:51

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.

score 3 · Answer 7 · answered Apr 02 '11 at 20:44

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.

score 2 · Answer 8 · answered Feb 15 '13 at 19:14

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

score 2 · Answer 9 · answered Aug 15 '10 at 20:26

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.

Have you ever experienced this problem? The hardest part is debugger doesn't give the usual info. — Nek, Jun 25 '12 at 19:17

score 1 · Answer 10 · answered Nov 05 '17 at 21: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

score 0 · Answer 11 · edited May 23 '17 at 11:54

0

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

edited May 23 '17 at 11:54

Community

1
1

answered Jul 30 '16 at 11:19

Jan Swart

5,489
6
29
40

INVALID_STATE_ERR: DOM Exception 11 (WebKit)

11 Answers11

Linked