New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

jQM inserts invalid XML when using a Slider or Select in an XHTML document #7849

Closed
T18970237136 opened this Issue Nov 21, 2014 · 0 comments

Comments

Projects
None yet
2 participants
@T18970237136

Hi,

I'm trying to use jQuery Mobile 1.4.5 with jQuery 2.1.1 on a XHTML page (that is, a Content-Type of "application/xhtml+xml"; e.g. with an ".xhtml" file extension).

When I try to place a slider on the page with the following code:

<input type="range" min="1" max="100" value="20" />

Then I get the following error in Chrome:

Uncaught SyntaxError: Failed to set the 'innerHTML' property on 'Element': The provided markup is invalid XML, and therefore cannot be inserted into an XML document. jquery-2.1.1.js:5089

When debugging, I see that jQuery tries to set the following innerHTML property:

tmp.innerHTML = "<div class='ui-slider'>";

This is non-wellformed XML because the end tag is missing. In HTML, most parsers add the missing end tag automatically, while in XML mode this is a fatal error.

When debugging, I found that in file https://code.jquery.com/mobile/git/jquery.mobile-git.js (* Git HEAD hash: f530399 <> Date: Thu Oct 30 2014 19:16:08 UTC),
changing the following line 8287

wrapper = this.options.mini ? "<div class='ui-slider ui-mini'>" : "<div class='ui-slider'>";

to

wrapper = this.options.mini ? "<div class='ui-slider ui-mini'></div>" : "<div class='ui-slider'></div>";

fixes the problem for me.

Note, that the same problem exists for:

<select>
  <option value="1">Bla1</option>
</select>

This can be solved by changing line 9669 from

this.select = this.element.removeClass( "ui-btn-left ui-btn-right" ).wrap( "<div class='ui-select" + classes + "'>" );

to

this.select = this.element.removeClass( "ui-btn-left ui-btn-right" ).wrap( "<div class='ui-select" + classes + "'></div>" );

Please see the uploaded XHTML file here: https://gist.github.com/T18970237136/adb9925cd9a139a7f015
If you open it from the local filesystem, most browsers (Chrome, Firefox, IE) interpret it as "application/xhtml+xml" due to the file extension ".xhtml" so you should be able to reproduce the problem.

@T18970237136 T18970237136 changed the title from jQM inserts invalid XML when using a Slider in an XHTML document to jQM inserts invalid XML when using a Slider or Select in an XHTML document Nov 21, 2014

gabrielschulhof added a commit to gabrielschulhof/jquery-mobile that referenced this issue Nov 28, 2014

gabrielschulhof added a commit to gabrielschulhof/jquery-mobile that referenced this issue Nov 28, 2014

gabrielschulhof added a commit to gabrielschulhof/jquery-mobile that referenced this issue Nov 28, 2014

@gabrielschulhof gabrielschulhof added this to the 1.5.0 milestone Nov 28, 2014

@gabrielschulhof gabrielschulhof self-assigned this Nov 28, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment