GWT - Create ListBox throw INVALID_CHARACTER_ERR Exception in IE9

Question

I am developing a web application using GWT. The application is working fine in both FF and chrome. When I run it in IE9, I receive "Error: DOM Exception: INVALID_CHARACTER_ERR (5)".

When I review the code that caused the exception is in the creation of a ListBox as below

comboBox = new ListBox(false);

and in the compiled Javascript is:

this["@com.google.gwt.dom.client.DOMImplTrident::createSelectElement(Lcom/google/gwt/dom/client/Document;Z)"] = function(doc, multiple) {
  var html = multiple?'<SELECT MULTIPLE>':'<SELECT>';
  return doc.createElement(html);
}

How can I resolve this problem?

Thanks and Regards,

Haider

score 2 · Answer 1 · edited May 23 '17 at 10:34

The underlying cause is outlined in Invalid Character DOM Exception in IE9 - essentially IE 9 now follows the W3C DOM Level 1 standard in its implementation of document.createElement.

Previously you could create an element like this:

document.createElement('<div>');

this isn't as per the standard and now you can only pass the element name as an argument, e.g.:

document.createElement('div');

The invalid character is presumably because < (and >) are invalid character in element names.

score 2 · Answer 2 · answered Aug 09 '11 at 14:20

2

Upgrade to gwt 2.3.0, this bug has been fixed in http://code.google.com/p/google-web-toolkit/issues/detail?id=5125.

answered Aug 09 '11 at 14:20

Djam

963
1
8
10

score 1 · Answer 3 · answered Apr 21 '11 at 10:12

1

I fixed it by adding the following line to the xml file

<set-property name="user.agent" value="safari" />

answered Apr 21 '11 at 10:12

HaiderSahib

380
2
4
16

score 0 · Answer 4 · answered Nov 11 '15 at 23:43

I was running into this with an old GWT app. Instead of touching GWT (who wants to do that), I found it easier to patch the browser method to support GWT's incorrect document.createElement usage.

Here's the gist that should be dropin-able: https://gist.github.com/cmawhorter/b688401e00220c4a1af2

Now document.createElement('<SELECT MULTIPLE>') works as gwt expects, app loads, and all is once again right with the world.

Resolved the problem for me in a fairly complex app.

score 0 · Answer 5 · answered Apr 20 '11 at 08:45

0

A DOMException.INVALID_CHARACTER_ERR is thrown whenever an invalid or illegal character is specified, such as in a name.

Names in XML can contain English letters (of any case), numbers (0-9), underscores (_), periods(.) and hyphens (-). Names cannot begin with a number, period or hyphen. Names can also contain a colon, but the use of colons outside of namespaces should be avoided.

See if you are violating this rule on the HTML rendered on the page. Compare the HTML page together with the line number of the error and fix it.

answered Apr 20 '11 at 08:45

Zasz

12,330
9
43
63

Hi Zasz, you are right, but where is the invalid character in the code?. I decided to use GWT to get rid of the headache of browsers compatibility. But it seems GWT generates a code that not compatible with IE9. – HaiderSahib Apr 20 '11 at 08:56
Names and IDs for HTML elements are something that *WE* specify, GWT cannot help if we decide to enter an invalid name or ID for a HTML element. However, I'll see if I can help if you can point me to the rendered HTML, along with linenumber of the error. Forget the CSS, html should be enough. Use github Gist – Zasz Apr 20 '11 at 09:18
I put the code in the question post. I think the problem in: return doc.createElement(html); where html will contains " – HaiderSahib Apr 20 '11 at 09:38

GWT - Create ListBox throw INVALID_CHARACTER_ERR Exception in IE9

5 Answers5