Using jQM 1.4, I am working on a custom select
widget, with [data-role='toggleselect']
, like so:
<select data-role="toggleselect">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
For this, I need my select
element to not be enhanced. From what I have read in the jQM 1.4 API here and understand, I should be able to use the following to prevent my select
from being enhanced by the primary mobile.selectmenu
widget:
$( document ).on( "mobileinit", function() {
$.mobile.selectmenu.prototype.initSelector += ":not(:jqmData(role='toggleselect'))";
});
Here is my jsfiddle showing that this doesn't work. My select
element is still being enhanced. And yes, this is placed after loading jQuery but before jQM.
For further experimentation, I hardcoded the following initSelector into the jQM-1.4.js file under the mobile.selectmenu
widget:
initSelector: "select:not(:jqmData(role='slider')):not(:jqmData(role='flipswitch')):not(:jqmData(role='toggleselect'))"
When this is hardcoded, my select
is not enhanced, thus works as expected.
Below is a copy/paste of my file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>mobile.toggleselect</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$( document ).on( "mobileinit", function() {
$.mobile.selectmenu.prototype.initSelector += ":not(:jqmData(role='toggleselect'))";
});
</script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h3>mobile.toggleselect</h3>
</div>
<div data-role="content">
<select data-role="toggleselect">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
</body>
</html>
Again, if I download a local copy of the jquery.mobile-1.4.0.js
file and hardcode the initSelector
for mobile.selectmenu
, it works as expected.
So... what am I missing? Or is this a bug?
It looks like a mistake in jQuery Mobile API 1.4 documentation.
To assign a custom initSelector
$.mobile.widget.initSelector = ".selector";