Select: Do not inject HTML that is not XHTML compliant

This means insert   instead of   and make sure that all $( "<...>" ) that are more than just a single tag have the closing tag. Fixes #6699
jquery-archive · Jan 2, 2014 · 143bdae · 143bdae
1 parent 2b04726
commit 143bdae
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git a/js/widgets/forms/checkboxradio.js b/js/widgets/forms/checkboxradio.js
@@ -116,7 +116,7 @@ $.widget( "mobile.checkboxradio", $.extend( {
 		return $( "<div class='"  +
 			( this.options.wrapperClass ? this.options.wrapperClass : "" ) +
 			" ui-" + this.inputtype +
-			( this.options.disabled ? " ui-state-disabled" : "" ) + "' >" );
+			( this.options.disabled ? " ui-state-disabled" : "" ) + "' ></div>" );
 	},
 
 	_handleInputFocus: function() {

diff --git a/js/widgets/forms/select.custom.js b/js/widgets/forms/select.custom.js
@@ -158,10 +158,10 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 			"</div>"+
 			"<div data-" + $.mobile.ns + "role='content'></div>"+
 			"</div>" );
-		listbox = $( "<div id='" + popupId + "' class='ui-selectmenu'>" ).insertAfter( this.select ).popup({ theme: o.overlayTheme });
-		list = $( "<ul class='ui-selectmenu-list' id='" + menuId + "' role='listbox' aria-labelledby='" + this.buttonId + "'" + themeAttr + dividerThemeAttr + ">" ).appendTo( listbox );
-		header = $( "<div class='ui-header ui-bar-" + ( o.theme ? o.theme : "inherit" ) + "'>" ).prependTo( listbox );
-		headerTitle = $( "<h1 class='ui-title'>" ).appendTo( header );
+		listbox = $( "<div id='" + popupId + "' class='ui-selectmenu'></div>" ).insertAfter( this.select ).popup({ theme: o.overlayTheme });
+		list = $( "<ul class='ui-selectmenu-list' id='" + menuId + "' role='listbox' aria-labelledby='" + this.buttonId + "'" + themeAttr + dividerThemeAttr + "></ul>" ).appendTo( listbox );
+		header = $( "<div class='ui-header ui-bar-" + ( o.theme ? o.theme : "inherit" ) + "'></div>" ).prependTo( listbox );
+		headerTitle = $( "<h1 class='ui-title'></h1>" ).appendTo( header );
 
 		if ( this.isMultiple ) {
 			headerClose = $( "<a>", {

diff --git a/js/widgets/forms/select.js b/js/widgets/forms/select.js
@@ -244,7 +244,9 @@ $.widget( "mobile.selectmenu", $.extend( {
 			if ( text ) {
 				span.text( text );
 			} else {
-				span.html( "&nbsp;" );
+
+				// Set the contents to &nbsp; which we write as &#160; to be XHTML compliant - see gh-6699
+				span.html( "&#160;" );
 			}
 
 			// TODO possibly aggregate multiple select option classes