Node creation fails for Chrome in XHTML under certain conditions

Reported by:	Sorensen	Owned by:	Sorensen
Priority:	undecided	Milestone:	None
Component:	unfiled	Version:	1.8.2
Keywords:		Cc:
Blocked by:		Blocking:

Description

When using XHTML and serving the page as application/xhtml+xml, node creation fails under certain conditions and bombs out with a DOM syntax error.

This has been tested in Chrome 22 and Firefox 14 on Windows 7 using jQuery 1.8.2. The problem is only present in Chrome. Firefox handles things fine.

As far as I have tested, this ONLY works when the page is served as application/xhtml+xml, which means I can't get a proper jsFiddle.net unit test for it. However, if you have access to a server that dishes out the page with the proper MIME type, it's an easy setup.

The problematic code is $('<tag attr="foo">'). Note that the tag element is not self-closed, and that an attribute is present. If the element is self closed, or if the attribute is not present, no problem happens. E.g., $('<tag attr="foo"/>') is okay, and $('<tag>') is okay. As far as I have tested, any combination of tag, attribute, and attribute value exhibits this behavior.

When $('<tag attr="foo">') is executed, Chrome barfs with SYNTAX_ERR: DOM Exception 12.

The following is the stack trace using the non-min version.


Error: An invalid or illegal string was specified.
    at Function.jQuery.extend.clean (jquery.js:6312:20)
    at Function.jQuery.buildFragment (jquery.js:6151:10)
    at Function.jQuery.extend.parseHTML (jquery.js:499:19)
    at jQuery.fn.jQuery.init (jquery.js:131:24)
    at jQuery (jquery.js:44:10)
    at Document.<anonymous> (http://localhost:8080/Test/testpage.jsp:29:6)
    at fire (jquery.js:974:30)
    at Object.self.fireWith [as resolveWith] (jquery.js:1082:7)
    at Function.jQuery.extend.ready (jquery.js:406:13)
    at Document.DOMContentLoaded (jquery.js:83:11)

The line that blows up is 6312:


div.innerHTML = wrap[1] + elem + wrap[2];

Here's a simple .jsp page that can be used as a test case:


<%@page contentType="application/xhtml+xml" pageEncoding="UTF-8" %>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
        <script type="text/javascript">//<![CDATA[
            jQuery(function($) {
                try {
                    //$('<div attr="foo"/>')  // works
                    $('<div attr="foo">')     // fails
                        .appendTo($('body'))
                        .text("Okay, it worked.");
                } catch (err) {
                    $('body').text(err)
                        .append($("<pre/>").text(err.stack));
                }
            });
        //]]></script>
    </head>
    <body></body>
</html>

If a .jsp server isn't available, simply replace the <%@page %> declaration with whatever you'd use to serve the page as application/xhtml+xml in your language/framework.

I don't know if something changed with jQuery or with Chrome, but the problem first cropped up when I upgraded from jQuery 1.7.1.

Regards,

Evan

PS, tell Askimet that this is not spam!

Attachments (0)

Change History (4)

Changed October 10, 2012 07:50PM UTC by dmethvin comment:1

owner:	→ Sorensen
status:	new → pending

The problematic code is $('<tag attr="foo">').

The docs do say "To ensure cross-platform compatibility, the snippet must be well-formed." (http://api.jquery.com/jQuery/#jQuery2) Is there a problem with doing that?

Changed October 10, 2012 07:59PM UTC by Sorensen comment:2

status:	pending → new

Replying to [comment:1 dmethvin]:

> The problematic code is $('<tag attr="foo">'). The docs do say "To ensure cross-platform compatibility, the snippet must be well-formed." (http://api.jquery.com/jQuery/#jQuery2) Is there a problem with doing that?

In that case, the problem is with jQuery-ui 1.9.0. In the Dialog widget code, the following can be found:


var button = $( "<button type='button'>" )
//...

As a result, Chrome chokes. I assumed that since $('<tag>') was acceptable, that jQuery was normalizing things, and that $('<tag attr="foo">') should also be acceptable. If that's not the case, who gets the ticket? jQuery-ui? Are you able to reassign it from here, or should I create a new one?

Changed October 10, 2012 08:16PM UTC by dmethvin comment:3

resolution:	→ notabug
status:	new → closed

Looks like it's already been fixed there. http://bugs.jqueryui.com/ticket/8639

Changed October 10, 2012 09:15PM UTC by anonymous comment:4

Oh, nice! Crisis averted.

Side navigation