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";
Demo
Related
I am Unable to hide the following slider using jquery mobile, here is my code
can anyone help
javascript code:
$(document).ready(function($) {
$("#d_c").hide();
}
html code:
<label for="d_c" class="containing-element5">Design & Construct Type Project:</label>
<select name="d_c" id="d_c" data-role="slider" class="containing-element3" data-mini="true">
<option value="off">No</option>
<option value="on">Yes</option>
</select>
To hide the native select element behind that nice label which looks like a Flipswitch, JQM is using absolute positioning, so you are out of luck here just because you are hiding the wrong element.
Please, let say it is somewhat unusual to hide just the Flipswitch and keep the corresponding caption visible but anyway, up to you. The solution here is to set a wrapper container and use the standard JQM class ui-screen-hidden to get the job done. You may use for that a trivial standard naming convention and attach to all your wrappers the suffix -container. Here is an example:
function toggleFlipswitch() {
$("#d_c-container").toggleClass("ui-screen-hidden");
}
$(document).on("pagecreate", "#page-one", function() {
$("#d_c-container").addClass("ui-screen-hidden");
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page-one">
<div data-theme="a" data-role="header" data-position="fixed">
Show/Hide Flipswitch
<span class="ui-title"></span>
</div>
<div data-role="content">
<div id="d_c-container">
<label for="d_c" class="containing-element5">Design & Construct Type Project:</label>
<select name="d_c" id="d_c" data-role="slider" class="containing-element3" data-mini="true">
<option value="off">No</option>
<option value="on">Yes</option>
</select>
</div>
</div>
</div>
</body>
</html>
I am trying to manually integrate the jQuery select2 library into my Symfony form as a replacement for my select boxes.
Following the manual I have added to the page header:
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
In addition I have modified my form class, adding attr to each select:
->add('kontoWinien', EntityType::class, array(
'class' => 'AppBundle\Entity\konto',
'attr' => array('class'=>'select2')
))
My modified Twig template:
{{ form_start(form) }}
<SCRIPT type="text/javascript">
$(document).ready(function() {
$(".select2").select2();
});
</SCRIPT>
{{ form_widget(form) }}
{{ form_end(form) }}
However the select2 is still not loaded.
HTML code generated by symfony3 looks like this:
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
</head>
<form name="dziennik" method="post">
<script type="text/javascript">
$(document).ready(function() {
$(".select2").select2();
});
</script>
<select id="dziennik_kontoWinien" name="dziennik[kontoWinien]" class="select2 form-control">
Could you please advise what am i doing wrong?
Like fcpauldiaz said you'll need to load up jquery before hand. I took your code loaded jquery (and some options so we can see it work) and it worked fine.
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
<!-- Loading jquery here--><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
</head>
<form name="dziennik" method="post">
<script type="text/javascript">
$(document).ready(function() {
$(".select2").select2();
});
</script>
<select id="dziennik_kontoWinien" name="dziennik[kontoWinien]" class="select2 form-control">
<option value="test1">test1</option>
<option value="test2">test2</option>
</select>
Try this
<script type="text/javascript">
$('select').select2();
</script>
I'm working on my first app in jQuery Mobile. I'm stuck on a select menu.
I've tried to copy/paste the "Your state" style at http://jquerymobile.com/demos/1.2.0/docs/forms/selects/custom.html and work it into my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CAST</title>
<link rel="stylesheet" href="./custom.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="./global.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
</head>
<body>
<div data-role="page" data-theme="c" id="home-page" class="type-interior" data-url="home-page">
<div data-role="header" style="background:#AAA">
<h1><img src="/logo.png" width="97" height="50" border="0" /></h1>
</div>
<h2 id="header_title"></h2>
<div id="error" class="error" style="display:none;">Could not connect to the server. Please try again.</div>
<div data-role="content">
<div class="content-primary" id="content">
<div data-role="fieldcontain">
<label for="client" class="select">Client:</label>
<select name="client" id="client" data-native-menu="false">
<option value="1">Option 1</option>
</select>
</div>
</div>
</div>
<div data-role="footer">
<h4>© 2013</h4>
</div>
</div>
</body>
</html>
The select menu shows up, but it doesn't look like the custom mobile version on their site? It just looks like a regular select menu.
I don't understand enough jquery.mobile yet to really even know how to ask this question properly... but any help getting this to work would be appreciated!
If you mean the "Your state" example looks like a dialog, showing the contents of the menu alone in the screen, you have to add more options to the select element as it is stated in the page you link:
When it has too many options to show on the device's screen, the framework will automatically create a new "page" populated with a standard listview for the options. This allows us to use the native scrolling included on the device for moving through a long list. The text inside the label is used as the title for this page.
I modified the jsfiddle provided by Omar to add more options and it looks exactly like in the original site
<Ignore>Code so I can post link to jsfiddle</ignore>
I've poked around and found similar questions, but none of the solutions have worked.
I'm writing a simple (so far) app that will allow the user to select a number from 1-6 on a form, then display the that value (1-6) on another page. It works fine on my desktop, but when I try it from the iPhone emulator I click "Submit" and nothing happens at all... as if I didn't even click it.
I'm using jQuery 1.10.1 and jQuery Mobile 1.3.1. I'll add that this is a PhoneGap app using Adobe's PhoneGap Build service.
Here's the code for my main page:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Value Submit</title>
<link rel="stylesheet" type="text/css" href="css/jquery-mobile.css" />
<link rel="stylesheet" type="text/css" href="css/themes/aw-theme2.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-mobile-min.js"></script>
<script type='text/javascript'>
$(document).on('pageinit', function() {
$(document).on('click', '#submitroll', function() {
var dieRoll = $("#dieresult").val();
$.mobile.changePage('valuedresult.html', { data: {arg1:dieRoll}});
return false;
});
});
$(document).on('pageinit', '#valued', function() {
var dieRoll = $("#dieresult").val();
$("#results span").html(dieRoll);
});
</script>
</head>
<body>
<div data-role="page" id="valued" data-theme='a'>
<div data-role="header" data-header-theme='a'>
<a data-icon="back" data-rel="back" back-btn="true">Back</a>
<h1>Value</h1>
<a data-icon="home" href="index.html" data-iconpos="notext">Home</a>
</div>
<div data-role="content" data-theme='a'>
<form id="rollform">
<select id="dieresult" name="dieresult">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
Submit
</form>
</div>
</body>
</html>
And here's the code for valuedresult.html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Value Result</title>
<script>
$(document).on('pageshow', function(event) {
var url = $.url(document.location);
var arg1 = url.param("arg1");
$("#results span").html(arg1);
});
</script>
</head>
<body>
<div data-role="page" id="valueresult" data-theme='a'>
<div data-role="header" data-header-theme='a'>
<a data-icon="back" data-rel="back" back-btn="true">Back</a>
<h1>Value Result</h1>
<a data-icon="home" href="index.html" data-iconpos="notext">Home</a>
</div>
<div data-role="content" data-theme='a'>
<div id="results">Result: <span></span>
</div> <!-- results -->
</div>
</body>
</html>
As I said, it works fine on a desktop browser, but nothing happens on the iPhone emulator when I click "Submit".
I've played around with this for quite a while, referring to other posts, documentation, etc... but I just can't seem to get it working. Hopefully I'm just missing something silly.
Any help is appreciated. Thank you very much in advance!
EDITED: I've noticed this piece of code $.url. This is not part of jQuery or jQuery Mobile. You're missing the Purl JavaScript URL parser plugin. You should add it in the first page's head tag.
Below you can find some fixes related to the code you've posted. I have removed the code which refers to the missing Purl JavaScript URL parser plugin as well.
In the first page, attaching the click event handler on the document element is enough. You don't need to include it inside a pageinit event handler. Moreover instead of using return false; it is better to use event.preventDefault() in order to prevent the default behavior of the event. I have removed some unnecessary code as well.
In the second page, I have modified your script and put it inside the jQM page. The reason is that when a jQM page is loaded through Ajax, the script inside the head tag are not loaded. An alternative solution would be to load this script on the first page's load.
I have modified your example as following:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Value Submit</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type='text/javascript'>
$(document)
.on('click', '#submitroll', function (e) {
e.preventDefault();
var dieRoll = $("#dieresult")
.val();
$.mobile.changePage('valuedresult.html', {
data: {
arg1: dieRoll
}
});
});
</script>
</head>
<body>
<div data-role="page" id="valued" data-theme='a'>
<div data-role="header" data-header-theme='a'>
<a data-icon="back" data-rel="back" back-btn="true">Back</a>
<h1>Value</h1>
<a data-icon="home" href="index.html" data-iconpos="notext">Home</a>
</div>
<div data-role="content" data-theme='a'>
<form id="rollform">
<select id="dieresult" name="dieresult">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
Submit
</form>
</div>
</body>
</html>
valuedresult.html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Value Result</title>
</head>
<body>
<div data-role="page" id="valueresult" data-theme='a'>
<div data-role="header" data-header-theme='a'>
<a data-icon="back" data-rel="back" back-btn="true">Back</a>
<h1>Value Result</h1>
<a data-icon="home" href="index.html" data-iconpos="notext">Home</a>
</div>
<div data-role="content" data-theme='a'>
<div id="results">Result: <span></span>
</div>
<!-- results -->
</div>
<script>
$(document)
.one('pageshow', '#valueresult', function (event) {
var parameters = $(this)
.data("url")
.split("?")[1];
parameter = parameters.replace("arg1=", "");
$("#results span")
.html(parameter);
});
</script>
</div>
</body>
</html>
I hope that helps.
To get the value of checked radio button I use something like this
$('input:radio[name=rbutton]:checked').val()
This work well until I upgrade the version of jQuery Mobile from 1.0 to 1.1 rc1, then i could not get the value anymore, i just get "undefined"
I dont understand why something basic like this does not work for a change of JQM lib..
I paste and example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test radio button</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script>
$(document).delegate("#test", "pageinit", function(event) {
$("button.select").bind ( "click", function (e) {
// Get value of checked radio with JQM 1.0, but get "undefined" with JQM 1.1 RC
alert( $('input:radio[name=rbutton]:checked').val() );
});
$("input[type=radio]").bind ( "change", function (e) {
alert ($(this).val()); //OK
});
});
</script>
</head>
<body>
<div data-role="page" id="test" >
<div data-role="content">
<fieldset data-role="controlgroup">
<input type="radio" name="rbutton" id="rbutton1" value="1" />
<label for="rbutton1">Option 1</label>
<input type="radio" name="rbutton" id="rbutton2" value="2" />
<label for="rbutton2">Option 2</label>
</fieldset>
<button class="select">selected</button>
</div> <!-- /content -->
</div><!-- /page -->
</body>
</html>
This was a bug and is now fixed:
https://github.com/jquery/jquery-mobile/issues/3687#issuecomment-4251371