Permalink
Browse files

Selectmenu: Correctly handle widget element IDs with weird characters

Fixes gh-7401
Closes gh-7898
  • Loading branch information...
gabrielschulhof committed Jan 5, 2015
1 parent 28e1ae2 commit 0f36bb9173e4a0ac03ac20a982d6142fb9986cea
@@ -197,17 +197,23 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
overlayThemeAttr = overlayTheme ? ( " data-" + $.mobile.ns +
"overlay-theme='" + overlayTheme + "'" ) : "";
dividerThemeAttr = ( o.dividerTheme && isMultiple ) ? ( " data-" + $.mobile.ns + "divider-theme='" + o.dividerTheme + "'" ) : "";
menuPage = $( "<div data-" + $.mobile.ns + "role='dialog' class='ui-selectmenu' id='" + dialogId + "'" + themeAttr + overlayThemeAttr + ">" +
menuPage = $( "<div data-" + $.mobile.ns + "role='dialog' class='ui-selectmenu'" +
themeAttr + overlayThemeAttr + ">" +
"<div data-" + $.mobile.ns + "role='header'>" +
"<div class='ui-title'></div>"+
"</div>"+
"<div data-" + $.mobile.ns + "role='content'></div>"+
"</div>" );
listbox = $( "<div" + themeAttr + overlayThemeAttr + " id='" + popupId +
"' class='ui-selectmenu'></div>" )
"</div>" )
.attr( "id", dialogId );
listbox = $( "<div" + themeAttr + overlayThemeAttr +
" class='ui-selectmenu'></div>" )
.attr( "id", popupId )
.insertAfter( this.select )
.popup();
list = $( "<ul class='ui-selectmenu-list' id='" + menuId + "' role='listbox' aria-labelledby='" + this.buttonId + "'" + themeAttr + dividerThemeAttr + "></ul>" ).appendTo( listbox );
list = $( "<ul class='ui-selectmenu-list' role='listbox' aria-labelledby='" +
this.buttonId + "'" + themeAttr + dividerThemeAttr + "></ul>" )
.attr( "id", menuId )
.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 );
View
@@ -5,7 +5,13 @@
//>>css.structure: ../css/structure/jquery.mobile.forms.select.css
//>>css.theme: ../css/themes/default/jquery.mobile.theme.css
define( [ "jquery", "../../core", "../../widget", "../../zoom", "./reset" ], function( jQuery ) {
define( [
"jquery",
"../../core",
"../../widget",
"../../zoom",
"../../navigation/path",
"./reset" ], function( jQuery ) {
//>>excludeEnd("jqmBuildExclude");
(function( $, undefined ) {
@@ -81,7 +87,7 @@ $.widget( "mobile.selectmenu", $.extend( {
.wrap( "<div class='ui-select" + classes + "'></div>" );
this.selectId = this.select.attr( "id" ) || ( "select-" + this.uuid );
this.buttonId = this.selectId + "-button";
this.label = $( "label[for='"+ this.selectId +"']" );
this.label = $( "label[for='"+ $.mobile.path.hashToSelector( this.selectId ) +"']" );
this.isMultiple = this.select[ 0 ].multiple;
},
@@ -0,0 +1,118 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Select Events Test Suite</title>
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../js/requirejs.config.js"></script>
<script src="../../../js/jquery.tag.inserter.js"></script>
<script src="../../jquery.setNameSpace.js"></script>
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../tests/jquery.testHelper.js"></script>
<script>
// The next call to $.fn.enhanceWithin() will have no effect
$( document ).one( "pagebeforecreate", function() {
var overrideOnce = true;
$.fn.enhanceWithin = ( function( original ) {
return function() {
if ( overrideOnce ) {
overrideOnce = false;
} else {
return original.apply( this, arguments );
}
};
})( $.fn.enhanceWithin );
});
</script>
<script>
$.testHelper.asyncLoad([
[
"widgets/forms/select",
"widgets/forms/select.custom",
],
[ "init" ],
[
"weird_characters_in_id_core.js"
]
]);
</script>
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
<link rel="stylesheet" href="../../../external/qunit/qunit.css"/>
<link rel="stylesheet" href="../../jqm-tests.css"/>
<script src="../../swarminject.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="default" data-nstest-role="page">
<select id="the-select['x']-native" data-nstest-native-menu="true">
<option value="1">An option</option>
<option value="2">Another option</option>
</select>
<select id="the-select['x']-non-native-small" data-nstest-native-menu="false">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select id="the-select['x']-non-native-large" data-nstest-native-menu="false">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
</body>
</html>
@@ -0,0 +1,30 @@
asyncTest( "Weird characters in selectmenu ID", function() {
var native, nonNativeSmallPopup;
// It is part of the test that the following line not cause an exception
$( ".ui-page" ).enhanceWithin();
native = $( "#the-select\\[\\'x\\'\\]-native" );
nonNativeSmallPopup = $( "#the-select\\[\\'x\\'\\]-non-native-small-listbox" );
deepEqual( native.parent().attr( "id" ), "the-select['x']-native-button",
"Native select correctly assigns ID to generated anchor" );
deepEqual( nonNativeSmallPopup.length, 1, "Small non-native popup is present" );
deepEqual( nonNativeSmallPopup.is( ":mobile-popup" ), true,
"Small non-native popup is popup widget" );
deepEqual( nonNativeSmallPopup.children( "ul" ).attr( "id" ),
"the-select['x']-non-native-small-menu", "Small non-native list has correct ID" );
$.testHelper.pageSequence([
function() {
$( "#the-select\\[\\'x\\'\\]-non-native-large-button" ).click();
},
function() {
deepEqual( $.mobile.activePage.attr( "id" ), "the-select['x']-non-native-large-dialog",
"The dialog generated for the large non-native selectmenu has the correct ID" );
$.mobile.back();
},
start
]);
});

0 comments on commit 0f36bb9

Please sign in to comment.