Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
jQM inserts invalid XML when using a Slider or Select in an XHTML document #7849
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:
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),
wrapper = this.options.mini ? "<div class='ui-slider ui-mini'>" : "<div class='ui-slider'>";
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 + "'>" );
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