I am learning jQuery Mobile building the simplest single page template application: main page and a little form.
In this form I have a single text field that I want to be required.
Here's my link to the form page:
Form
In the form page I have all the key elements: the jquery validation plugin (and jquery before it, of course), the validation script, the mandatory field and the submit button:
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script>
$(document).ready(function(){
$("#field").validate();
});
</script>
<input type="text" id="field" name="field" class="required" required>
<input id="submit" class="submit" type="submit" value="Inserisci" data-theme="a"/>
If I get in the form page using the normal link the validation won't happen (simple page reload because my form action is not yet set).
If I change my form link to:
<a href="form.html" data-ajax=false>Form</a>
The validation works and tells me to insert my data in the mandatory field.
But, even if insert data, it'll keep on asking me to insert it without submitting the form.
I really can't understand what I'm doing wrong...
After the 1st suggestion I've kept on reading and I've updated my code with this example: http://jquery.bassistance.de/validate/demo/jquerymobile.html and the problem is now that I am forced to refresh the form page to see the validation working. If I use data-ajax=false on the link that leads me to the form then validation is always perfectly working.
Update:
to be sure that everything is "as vanilla" as possible I got the main template from jquery documentation as starting page, my index.html:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script>
</head>
<body>
<div data-role="page" id="cruscotto">
<div data-role="header" id="header">
<h1>page</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="a">
<li>
Inserimento clienti
</li>
<li>
Ricerca clienti
</li>
<li>
Gestione pagamenti
</li>
</ul>
</div><!-- /content -->
<div data-role="footer" data-theme="a">
<div class="ui-bar">
Torna su
</div>
</div>
</div>
</body>
</html>
And then I got a perfectly working form from a tutorial, my inserisci_clienti.html page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script>
<style type='text/css'>
label.error {
color: red;
font-size: 16px;
font-weight: normal;
line-height: 1.4;
margin-top: 0.5em;
width: 100%;
float: none;
}
#media screen and (orientation: portrait){
label.error { margin-left: 0; display: block; }
}
#media screen and (orientation: landscape){
label.error { display: inline-block; margin-left: 22%; }
}
em { color: red; font-weight: bold; padding-right: .25em; }
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$( "#frmLogin" ).validate({
submitHandler: function( form ) {
alert( "Call Login Action" );
}
});
});//]]>
</script>
</head>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1">
<div data-role="page" id="login">
<div data-role="header">
<h1>Acme Corporation</h1>
</div>
<div data-role="content">
<form id="frmLogin" class="validate">
<div data-role="fieldcontain">
<label for="email"><em>* </em> Email: </label>
<input type="text" id="email" name="email"
class="required email" />
</div>
<div data-role="fieldcontain">
<label for="password"><em>* </em>Password: </label>
<input type="password" id="password" name="password"
class="required" />
</div>
<div class="ui-body ui-body-b">
<button class="btnLogin" type="submit"
data-theme="a">Login</button>
</div>
</form>
</div>
</div>
</body>
</html>
Needless to say it's working only if I reload the form page after loading it or if I put data-ajax=false OR rel="external" on the link that leads to the form (losing jQuery animations)
I am going mad :(
This the proper use of jQuery.validate in jQuery Mobile.
$(document).on('pageinit', function () {
$(form).validate({ // or form #id
rules: {
field: "required" // field name not #id and has class="required
},
submitHandler: function (form) {
alert('data submitted');
return false;
}
});
});
The validation should be applied on the form not in the input .Try the following :
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script>
$(document).ready(function(){
$("#myForm").validate(); // applying the validation on myForm
});
</script>
<form id="myForm">
<input type="text" id="field" name="field" class="required" required>
<input id="submit" class="submit" type="submit" value="Inserisci" data-theme="a"/>
<form>
for more infos : http://docs.jquery.com/Plugins/validation
Related
I am facing a pretty strange problem .I have compiled the cordova app and it runs on android smoothly now on mac when i try to compile the app for the iOS it don't show me the component of onsenui and page comes without button ,toolbars etc . I tried to open it on web browser and it gives me same result .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"/>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsenui.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsen-css-components.css"/>
<!--parse code only
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.4.2.min.js"></script>
<!-- parse code only -->
<!--<link rel="stylesheet" type="text/css" href="css/style.css"/>
<!-- Enable all requests, inline styles, and eval() -->
</head>
<body>
<ons-navigator title="Navigator" var="myNavigator">
<ons-page>
<ons-toolbar>
<div class="center">Toolbars</div>
<div class="right">
<ons-toolbar-button>
<ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em">
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-list>
<ons-list-header>Toolbar Variations</ons-list-header>
<ons-list-item modifier="chevron" onclick="myNavigator.pushPage('page2.html', { animation : 'slide' } )">
HTML Content
</ons-list-item>
<ons-list-item modifier="chevron" onclick="myNavigator.pushPage('page4.html', { animation : 'slide' } )">
Search Box
</ons-list-item>
<ons-list-item modifier="chevron" onclick="myNavigator.pushPage('page5.html', { animation : 'slide' } )">
Images
</ons-list-item>
</ons-list>
</ons-page>
</ons-navigator>
<ons-template id="page2.html">
<ons-page>
<ons-toolbar>
<div class="left" style="line-height: 44px">
<ons-back-button>Back</ons-back-button>
</div>
<div class="center">Title</div>
<div class="right" style="line-height: 44px">
Right
</div>
</ons-toolbar>
<div style="text-align: center">
<br />
<ons-button modifier="light" onclick="myNavigator.popPage()">
Pop Page
</ons-button>
</div>
</ons-page>
</ons-template>
<ons-template id="page4.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-back-button>Back</ons-back-button>
</div>
<div class="center">Search</div>
<div class="right" style="padding-right: 6px">
<input type="search" class="search-input" placeholder="Search" style="margin-top: 6px;">
</div>
</ons-toolbar>
<div style="text-align: center">
<br />
<ons-button modifier="light" onclick="myNavigator.popPage()">
Pop Page
</ons-button>
</div>
</ons-page>
</ons-template>
<ons-template id="page5.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-back-button>Back</ons-back-button>
</div>
<div class="right">
<ons-search-input></ons-search-input>
</div>
</ons-toolbar>
<div style="text-align: center">
<br />
<ons-button modifier="light" onclick="myNavigator.popPage()">
Pop Page
</ons-button>
</div>
</ons-page>
</ons-template>
<script type="text/javascript" src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/angular/angular.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/onsenui.min.js"></script>
</body>
</html>
The code overall looks ok.
The only thing missing is ons.bootstrap(). I'm guessing you accidentally removed it at some point. Add that and you should be ready to go.
Here's a working demo of your code with ons.bootstrap() added.
On a sidenote - since you don't seem to be using angular right now you might be interested in checking out Onsen 2. It has both an angular and a pure js version.
I am creating a SPA ios application using phonegap and having some issue with Jquery mobile the lastest version (1.4.0). The pages do not fit to the screen of the iphone but they appear one after another and I can scroll down to view all my pages ! (possibly data-role = "page" is not working correctly. Can anyone shed a light on this. Here is my HTML
<!DOCTYPE html>
<html>
<head>
<title>App Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1" />
<!--<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />-->
<link rel="stylesheet" href="css/jquery.mobile-1.4.0.css" />
<script src="phonegap.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/soapclient-1.2.js"></script> <!-- for soap v1.1 use js/soapclient.js -->
<script src="js/EmailComposer.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="js/jquery.ui.map.full.min.js"></script>
<script src="js/jquery.imageLens.js"></script>
<script src="js/jquery.alerts.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/touchable.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/date.js"></script>
<script src="js/moduleScripts/timetoport.js"></script>
<script src="js/moduleScripts/imageslogic.js"></script>
<script src="js/moduleScripts/loadingScript.js"></script>
<script src="js/moduleScripts/LoginController.js"></script>
<script src="js/moduleScripts/kmlMap.js"></script>
<script src="js/moduleScripts/tools.js"></script>
<script src="js/moduleScripts/dataService.js"></script>
<script src="js/jquery.mobile-1.4.0.js"></script>
<script>
$(document).ready(function() {
InitializeLoginScreen();
CheckDisclaimer();
});
$("#discpage1").live("pageshow",function() {
$("#agree").click(function() {
localStorage.setItem('disclaimerAccepted', true);
tools.GoForward("#loginPage");
});
$("#disagree").click(function() {
localStorage.setItem('disclaimerAccepted', false);
navigator.notification.alert('To ccontinue you must accept the Disclaimer', null, '', 'OK');
});
});
$(document).delegate(".scroll-disabled", "scrollstart", false);
</script>
</head>
<body id="boddy">
<!-- LOGIN PAGE -->
<div data-role="page" id="loginPage" class="scroll-disabled">
<div data-role="header" class="header" >
<div id="LoginHeader" class="headerText">Login</div>
</div>
<div data-role="content">
<div>
<img src="images/shiplogo.png" id="logobspt">
<label id="ship2Go">Ships to go</label>
</div>
<div id="loginContainer">
<div>
<label for="uid" id="uidLabel">Username</label>
<input type="text" value="test" name="uid" id="uid" placeholder="Enter username" />
</div>
<div id="loaderdiv" style="height:50px;width:100px;padding:5px;margin-left:87px;margin-top:-12px;display:none;">
<img src="images/loading3.gif" id="loadingimg" style="margin-left:30px;">
<div id="loadingMsg">
<center >Please wait...</center>
</div>
</div>
<div>
<label for="pwd" id="pwdLabel">Password</label>
<input type="password" value="test" name="pwd" id="pwd" placeholder="Enter password"/>
</div>
</div>
<div class="Button" id="loginButton">Login</div>
<div data-role="footer">
<div id="envLabel"></div>
</div>
</div>
</div>
<!-- DISCLAIMER PAGE -->
<div data-role="page" id="discpage1" class="scroll-disabled">
<!--<div id="dleftpanel"></div>
<div id="drightpanel"></div>-->
<div id="dcontent">
<div id="bplogo"></div>
<div id="shiplogo"></div>
<div id="discHeading">Disclaimer</div>
<div id="agree" class="Button discButton">I have read and I agree</div>
<div id="disagree" class="Button discButton">Disagree</div>
</div>
</div>
</body>
</html>
Whenever this happens to me (as - I admit - it does from time to time), it is ALWAYS that the CSS file for jQuery Mobile is missing, linked to the wrong path, or I have a typo (used a "dot" instead of a "dash" more often than not).
Any chance that could be it?
A quick way to check is to open up the file you pasted in above in Chrome (or whatever) and look at the debug console for any messages throwing a fit about the CSS file.
I have an input form using FLAT UI KIT that MUST contain a datepicker, so I chose to use jQuery's widget. But when I run it in Chrome the datepicker shows up, whilet on Firefox it is shows as a simple text input.
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My test · stuff with datepicker</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Loading Bootstrap -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="bootstrap/css/prettify.css" rel="stylesheet">
<!-- Loading Flat UI -->
<link href="css/flat-ui.css" rel="stylesheet">
<link href="css/docs.css" rel="stylesheet">
<link rel="shortcut icon" href="images/favicon.ico">
<!-- my addition jQuery UI for datepicker -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-select.js"></script>
<script src="js/bootstrap-switch.js"></script>
<script src="js/flatui-checkbox.js"></script>
<script src="js/flatui-radio.js"></script>
<script src="js/jquery.tagsinput.js"></script>
<script src="js/jquery.placeholder.js"></script>
<script src="bootstrap/js/google-code-prettify/prettify.js"></script>
<script src="js/application.js"></script>
<style>
.containerx {
background-color: #1abc9c;
background-repeat: no-repeat;
background-position: bottom right;
background-attachment: scroll;
}
.titluedit{
margin: 0 0 0 0;
font-size:14px;
}
.titlueditx{
margin: 0 0 0 0;
font-size:14px;
color:red;
}
fieldset { margin: 0 0 10px 0; }
</style>
<script>
</script>
<script>
$(document).ready(function(){
$(function() {
$( "#datepicker" ).datepicker();
});
});
</script>
</head>
<body>
<img src="images/logo2.png" alt="logox" height="81" width="305">
<h1 class="demo-panel-title" style="text-align:center; color:#d35400">XXXXXXXXX</h1>
<h3 class="demo-panel-title" style="text-align:center; color:#1abc9c">New info</h3>
<div class="container" style="width:900px; margin:0 auto;">
<form action="save.php" method="post">
<div class="container" style="width:700px; margin:0 auto;">
<fieldset>
<p class="titlueditx">Name *:</p>
<input type="text" name="nume" value="" placeholder="Name" class="form-control" />
</fieldset>
<fieldset>
<p class="titlueditx">Medium time *:</p>
<input type="text" name="durata" value="" placeholder="minutes" class="form-control" />
</fieldset>
<p class="titlueditx">Start date *:</p>
<input type="date" id="ui-datepicker" name="dataang" value="" class="form-control"/><br>
<fieldset>
<p class="titlueditx">Some other stuff *:</p>
<input type="text" name="sefutzul" value="" placeholder="Other relevant stuff" class="form-control" />
</fieldset>
</div>
<br><br>
<div class="container" style="width:700px; margin:0 auto;">
<table>
<tr>
<td>
<input type="hidden" id="idhidfirma" name="idfirma" value="1" />
<input type="hidden" id="idhnumefirma" name="numefirma" value="xxxxx" />
<button type="submit" class="btn btn-hg btn-primary"> Save info </button>
</form>
</td>
<td>
<form action="mylist.php" method="post">
<INPUT TYPE="hidden" NAME="idfirma" value="1">
<INPUT TYPE="hidden" NAME="numefirma" value="xxxxx">
<button type="submit" class="btn btn-hg btn-danger"> Cancel </button>
</form>
</td>
</tr>
</table>
</div>
</div>
</body></html>
What can I do to make it work in Firefox TOO?
Also in Chrome how can I make the calendar to close onClick on a day? Right now the calendar stays shown until i click somewhere else on the screen.
The problem is not Firefox, you are defining:
an input type=date with id ui-datepicker
binding a jQuery UI datepicker to an id datepicker
The 2nd selector not match any element so the jQuery UI datepicker is not binded to anything; by using an input type=date Chrome renders automatically a calendar control, so you see a calendar in Chrome because of the input type (see. https://plus.google.com/+GoogleChromeDevelopers/posts/hTcMLVNKnec)
To fix the issue in all browser you can set input type=text in your ui-datepicker element, and set the correct selector.
Code:
$(document).ready(function () {
$("#ui-datepicker").datepicker();
});
Demo: http://jsfiddle.net/IrvinDominin/zAKQe/
Date picker is working with firefox, but z-index of datepicker is in "-". So it's not appearing in firefix browser.
Show update the z-index of datepicker through jquery it will appear.
$(".datepicker").css("z-index","100");
it will work on mozila firefox if is not working update your firefox version .
i run this it works. thanks
<head>
<meta charset="UTF-8" />
<title>Datepicker fadein</title>
<link href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
$('.datepicker').datepicker({showAnim: "fadeIn"});
})
</script>
in your body of the page use the input
<input class="datepicker">
jQuery 1.7.1 and jQuery Mobile 1.1.0RC1
Hello, I have a JQM radio button on my site and am programmatically changing its value based on a condition I'm checking on pageshow. Everything works fine, but it isn't happening very "smoothly," by which I mean that it is very visible to the user when it changes i.e. it's in its original state for half a second or so and then switches. Maybe I'm being a little picky, but I'd like the switch to be transparent to the user. I'm still trying to understand the various JQM "page*" events and thought if I did it on pagebeforeshow or pagebeforecreate it would make that happen, but that is not the case.
I've tried to do a jsFiddle for it (my first time), it's happening pretty instantaneously there (maybe something to do with my selection of onDomReady in the options?) but should give you an idea of what I'm talking about ... on my site the selection is very obviously in the Off state for a moment when the page loads and then switches over to On. It's not really a big deal, I'm asking more to help my understanding of the various page* events.
http://jsfiddle.net/pdjeU/
More info:
The web app is basically a document browser, constructed like so: the index.html files contains a list of the documents, or rather a list of links to the TOCs of the available documents. Each of these TOCs contains links to the sections of the actual document.
The code is as follows ... It's probably riddled with bad style since I'm a beginner. The code for my radio button issue is in lines 30-39 of custom2.js and 23-28 of ch2-sec1.html. Also, note that the console.log($("link[href$='styleDay.css']").length); line of code in custom2.js prints out "2" when the stylesheet ends with styleDay.css, and I have no idea why (I expect it to be "1"). My main problem, though, is that there is a noticeable lag when browsing through the content files (e.g. ch2-sec1.html as shown below) and the code flips the radio button to "Day Mode" when the condition is true ... can't this be coded so that it's already flipped by the time the page becomes visible?
root/index.html ...
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="Style/styleNight.css" />
<link rel="stylesheet" type="text/css" href="Style/jquery.mobile.simpledialog.min.css" />
<script type="text/javascript" src="JS/jquery-1.7.1.min.js"> </script>
<script type="text/javascript" src="JS/jquery.mobile-1.1.0-rc.1.min.js"> </script>
<script type="text/javascript" src="JS/jquery.mobile.simpledialog2.min.js"> </script>
<script type="text/javascript" src="JS/custom2.js"> </script>
</head>
<body>
<div data-role="page" data-theme="b" id="main">
<div data-role="header">
<div style="float:left; width:20%">
<a id="openOptions" href="#" data-role="button" data-icon="gear">Settings</a>
</div>
<div style="float:left; width:60%; text-align:center; padding-top:5px">
<h2>DOCUMENT LIST</h2>
</div>
<div style="float:left; width:20%">
<a id="openSearch" href="#" data-role="button" data-icon="search" data-iconpos="right">Search</a>
</div>
</div>
<!-- /header -->
<div data-role="content" style="clear:both">
<div data-role="controlgroup">
Document 1
Document 2
Document 3
Document 4
Document 5
</div>
</div>
<!-- /content -->
</div>
<!-- /page -->
</body>
</head>
root/doc1-toc.html ...
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="Style/ftidStyleNight.css"/>
<script type="text/javascript" src="JS/jquery-1.7.1.min.js"> </script>
<script type="text/javascript" src="JS/jquery.mobile-1.1.0-rc.1.min.js"> </script>
<script type="text/javascript" src="JS/custom2.js"> </script>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header" style="position:relative">
<div style="float:left">Home</div>
<h1>Document 1 TOC</h1>
</div>
<div data-role="content">
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="true">
<h3>
<font color="white">Chapter 1</font>
</h3>
<ul data-role="listview" data-theme="c">
<li>Chapter 1 Section 1</li>
</ul>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>
<font color="white">Chapter 2</font>
</h3>
<ul data-role="listview" data-theme="c">
<li>Chapter 2 Section 1</li>
<li>Chapter 2 Section 2</li>
<li>Chapter 2 Section 3</li>
<li>Chapter 2 Section 4</li>
</div>
</div>
</div>
</div>
</body>
</html>
root/HTML/ch2-sec1.html ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<link rel="stylesheet" type="text/css" href="../Style/styleNight.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"> </script>
<script type="text/javascript" src="../js/jquery.mobile-1.1.0-rc.1.min.js"> </script>
<script type="text/javascript" src="../js/custom1.js"> </script>
<script type="text/javascript" src="../js/custom2.js"> </script>
</head>
<body>
<div data-role="page" id="doc1-ch2-sec1">
<div id="header" data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
<div id="optionsDiv">
<div style="float:left; width:25%; text-align:left">
Home
Previous
</div>
<div style="float:left; width:50%">
<div class="containing-element">
<fieldset data-role="controlgroup" data-type="horizontal" id="day-night">
<input type="radio" name="radio-choice-1" id="day" value="../Style/styleDay.css" data-theme="b"/>
<label for="day">Day Mode</label>
<input type="radio" name="radio-choice-1" id="night" value="../Style/styleNight.css" checked="checked" data-theme="b"/>
<label for="night">Night Mode</label>
</fieldset>
</div>
</div>
<div style="float:left; width:25%; text-align:right">
TOC
Next
</div>
</div>
</div>
<!-- Main content from legacy data source ->
</div>
</body>
</html>
root/JS/custom2.js ...
$("#main").live("pageinit",function(){
$('<div>').simpledialog2({
mode: 'blank',
animate:false,
top:10,
left:10,
themeDialog:'a',
headerText: false,
headerClose: false,
blankContent :
"<span>Active Checklists: </span><select name='slider' id='flip-b' data-role='slider' data-mini='true' data-theme='a'><option value='off'>Off</option><option value='on'>On</option></select>"+
"<a rel='close' data-role='button' data-theme='b' style='color:white' href='#'>Cancel</a>"
});
});
$(document).on('click', '#openSearch', function() {
$('<div>').simpledialog2({
mode: 'blank',
themeDialog:'a',
animate:false,
top:10,
left:'60%',
headerText: false,
headerClose: false,
blankContent :
"<input type='search' name='search' id='searc-basic' value='' placeholder='Under Construction ...' disabled='disabled' data-mini='true' data-theme='c' />"+
"<a rel='close' data-role='button' style='color:white' href='#' data-theme='b'>Cancel</a>"
});
});
});
$("div[data-role='page']").live("pageshow",function(){
console.log($("link[href$='styleDay.css']").length);
if ($("link[href$='styleDay.css']").length > 0){
$("#day").attr("checked",true).checkboxradio("refresh");
$("#night").removeAttr("checked").checkboxradio("refresh");
}
$("input[name='radio-choice-1']").on('change mousedown',function(event) {
$("link").attr("href",$("input[checked][name='radio-choice-1']").val());
});
});
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