If i comment out the jquery.mobile...js file, this works fine, with it included, everytime i click the checkbox, the onclick event fires twice. Same is true for onchange event. Any ideas?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<script>
function tester() { alert("I get called twice on click"); }
</script>
<input id="abc" name="myCheckbox" onchange="tester()" type="checkbox" value="true" />
<label for="myCheckbox">Click me</label>
</body>
</html>
This is by design, since both events are happening. See example: http://jsfiddle.net/Twisty/T3qmG/
HTML:
<html>
<head>
<title>Checkbox Test</title>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h2>Checkbox Test</h2>
</div>
<div data-role="content">
<input type="checkbox" id="checkbox-choice-1" />
<label for="checkbox-choice-1">Click me</label>
</div>
</div>
</body>
</html>
JQuery:
$(document).ready(function(){
$("#checkbox-choice-1").click(function(){
alert("Click event triggerd.");
});
$("#checkbox-choice-1").change(function(){
alert("Change event triggerd.");
});
});
I would advise separating your script code if possible. You can a function to one or both events.
Your markup is malformed. The <label> tag points to a non-existent id. It points to "myCheckbox" but the id of your input tag is "abc". This change fixes your issue and the markup is correctly enhanced.
<input id="abc" name="myCheckbox" onchange="tester()"
type="checkbox" value="true" />
<label for="abc">Click me</label>
Related
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">
I am trying to share a ViewModel between pages.
Say I have pageA.html and pageB.html and a separate data.js file. pageA has fields bound (using Knockout) and after clicking a button it moves to pageB which also has some fields bound to the same ViewModel. I can't get this to work - what am I missing?
Of course I can keep all pages (data-role="page") inside a single .html file and it would work fine but is that the only way?
EDIT - pageB.html is a copy of pageA - I am trying to show the problem NOT having another login functionality in many pages!!!
This is the code:
pageA.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="en">
<title>PageA</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script src="JS/data.js"></script>
</head>
<body>
<div data-role="page" id="login">
<div id="loginDetails">
<div data-role="fieldcontain">
<label for="username">
Username:</label>
<input type="text" name="name" id="username" data-bind="value: userid" />
</div>
<div data-role="fieldcontain">
<label for="pswd">
Password:</label>
<input type="text" name="name" id="pswd" data-bind="value: pswd" />
</div>
</div>
<a id="btnLogin" data-role="button" data-bind="click: login">Login</a>
</div>
<script type="text/javascript">
ko.applyBindings(S5.myViewModel);
</script>
</body>
</html>
pageB.html (largely the same as above but its javascript block doesn't seem to get called...)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="en">
<title>pageB</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script src="JS/data.js"></script>
</head>
<body>
<div data-role="page" id="abcd">
<div id="loginDetails">
<input type="text" name="name" data-bind="value: userid" />
<input type="text" name="name" data-bind="value: pswd" />
</div>
</div>
<script type="text/javascript">
debugger; <-- THIS NEVER GETS CALLED!!
ko.applyBindings(S5.myViewModel);
</script>
</body>
</html>
data.js
var S5;
(function (S5) {
S5.myViewModel = {
userid: ko.observable('marcel'),
pswd: ko.observable('xxx'),
login: function () {
// ** DO LOGIN CHECK then move to pageB
$.mobile.changePage("pageB.html", { transition: "slideup" });
},
};
})(S5 || (S5 = {}));
jQuery Mobile uses Ajax Navigation to load and change views. When using multi-html page template, it loads first page (html file) entirely. However, for other views /pages fetched with Ajax, it loads contents inside <body> only, neglecting other tags i.e. <script>, <head> etc...
To solve your problem, move any extra JS libraries or code inside <div data-role="page">.
Please help me on this. I am new to CSS and jQuery Mobile and I got this issue.
The checkboxes in my page do not display the box; only the label. When I click the label, a square appears on the left.
Now, the issue only happens if I download the CSS file to my local file and refer that. If I refer the CSS file from the server directly, the box appears before the text and works normally. Below are the sample source:
Source which has error:
<!DOCTYPE HTML>
<html>
<head>
<title>Mobile App Login</title>
<meta name=viewport content="user-scalable=no,width=device-width">
<link rel="stylesheet" href="../jQuery/jquery.mobile.css">
<script src="../jQuery/jquery.js"></script>
<script src="../jQuery/jquery.mobile.js"></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Login Screen</h1>
</div>
<div data-role=content>
<label>
<input type="checkbox" name="checkbox-0" />
I agree
</label>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">I agree</label>
</div>
</div>
</body>
</html>
Source which does not have error:
<!DOCTYPE HTML>
<html>
<head>
<title>Mobile App Login</title>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel="stylesheet" href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css" />
<script src="../jQuery/jquery.js"></script>
<script src="../jQuery/jquery.mobile.js"></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Login Screen</h1>
</div>
<div data-role=content>
<label>
<input type="checkbox" name="checkbox-0" />
I agree
</label>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">I agree</label>
</div>
</div>
</body>
</html>
Everything else works fine; it is just the display of the box that causes me the problem. I took the latest files for the CSS and JS files and checked.
Without the box, the user may think it is just a label
Since I am new, I am unable to give an image, I'm sorry...
Thanks all.
Adding checkbox inside fieldset for me solved the same problem.
<fieldset data-role="controlgroup">
<input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
<label for="checkbox-2">I agree</label>
</fieldset>
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
I am creating one application with jquery.mobile-1.0a4.1 release. I have a page which is having input form to get details. It has date field , so for that I used jquery.mobile.datebox . See http://dev.jtsage.com/ for its demo.
I am facing one issue with it, when I set particular date value for date field on page-load , the value is shown in textbox. But when user click on date-picker icon- the calendar still highlight today's date and show current month only.
If anybody has used the same control then please help about , how to achieve like if there is any date value the text box then when you launch the datepicker, it should start from that date.
For eg. here I am setting date of March month, then ,when user clicks on datepicker , march month calendar should be shown.
Here is my code file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>Detailed information</title>
<link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" />
<link rel="stylesheet" href="jquery.mobile-1.0a4.1.css" />
<link type="text/css" href="jquery.mobile.datebox.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript">
$( document ).bind( "mobileinit", function(){
$.mobile.page.prototype.options.degradeInputs.date = 'text';
});
</script>
<script type="text/javascript" src="jquery.mobile-1.0a4.1.min.js"></script>
<script type="text/javascript" src="jquery.mobile.datebox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Setting start date value on pageload
$('#startdate').val('2011-03-20');
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="inline">
back
<h1>Detailed Information</h1>
</div>
<div data-role="content">
<form action="" method="get" onsubmit="validate();" id="frmdetailedinfo">
<div data-role="fieldcontain">
<input readonly="true" name="startdate" type="date" data-role="datebox" id="startdate" data-options='{"mode": "calbox", "useDialogForceFalse": true, "noAnimation": true}'/>
</div>
<div data-role="fieldcontain">
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<button type="submit" data-theme="a" name="submit" data-icon="check" value="submit-value">
Save
</button>
</div>
</fieldset>
</div>
</form>
</div>
<!--content-->
</div>
<!--page-->
</body>
</html>
You have to set it in the tag itself:
<input readonly="true"
name="startdate"
type="date"
data-role="datebox"
id="startdate"
data-options='{
"mode": "calbox",
"useDialogForceFalse": true,
"noAnimation": true
}'/>
Becomes this
<input readonly="true"
name="startdate"
type="date"
data-role="datebox"
id="startdate"
data-options='{
"mode": "calbox",
"useDialogForceFalse": true,
"noAnimation": true,
"defaultDate": "1999-03-20" // Add Default Date
}'/>