I am new to knockout, I have found an example of checkbox binding which could be very useful in my website.
Link to the example: http://knockoutjs.com/documentation/checked-binding.html
I tried to apply it to my page but it didn't work, then I tried to copy this example without changing anything but still it didn't work. I tried it on different browser(Chrome, Firefox, IE) and including different version of knockout libraries, but still it didn't work.
I have no other idea what I am doing wrong, please help!
Here is the code of this example:
<!DOCTYPE html>
<head>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js'></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dokument bez tytułu</title>
</head>
<body>
<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p>
<div data-bind="visible: wantsSpam">
Preferred flavors of spam:
<div><input type="checkbox" value="cherry" data-bind="checked: spamFlavors" /> Cherry</div>
<div><input type="checkbox" value="almond" data-bind="checked: spamFlavors" /> Almond</div>
<div><input type="checkbox" value="msg" data-bind="checked: spamFlavors" /> Monosodium Glutamate</div>
</div>
<script type="text/javascript">
var viewModel = {
wantsSpam: ko.observable(true),
spamFlavors: ko.observableArray(["cherry","almond"]) // Initially checks the Cherry and Almond checkboxes
};
// ... then later ...
viewModel.spamFlavors.push("msg"); // Now additionally checks the Monosodium Glutamate checkbox
</script>
</body>
</html>
What you are looking at is a fragment, not a fully working example. You need to do a couple of things.
You need to applyBindings:
ko.applyBindings(viewModel);
And you need to do that after the DOM has loaded (or knockout will get very upset).
Here's an example
I've updated my example a little to make it easier to see that the checkboxes are, in fact, bound. There's a list of the spamFlavors under the list of checkboxes that will change as you check and uncheck the checkboxes.
Related
It works at first open of the page but when i navigate to other pages that uses also the datepicker. It no longer works. Did i missed something in my code? Please see below. Thank you so much.
<link href="css/custom-theme/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script src="js/jquery-1.9.1.js" type="text/javascript" language="javascript"></script>
<script src="js/jquery-ui-1.10.3.custom.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">
$('#btnDfrom').focus(function () {
$(this).datepicker();
});
$('#btnDto').focus(function () {
$(this).datepicker();
});
</script>
<span id="filtertxt">Date From: </span>
<input type="text" id="btnDfrom" />
<span id="filtertxt">Date To: </span>
<input type="text" id="btnDto" />
This one does not work also
$(function(){
$('#btnDfrom').datepicker();
$('#btnDto').datepicker();
});
Jquery UI datepicker isn't intended to be called multiple times on the same element, which is what would happen if you call it on a focus event.
All you need to do is call it once on the target element, like so:
$(function(){
$('#btnDfrom').datepicker();
$('#btnDto').datepicker();
});
The datepicker plugin will take care of handling clicks and focus events on the elements by itself, you don't need to.
EDIT: You should also check that you are both including the script files, css files and this code on each page where you use the datepicker (but make sure it's only included once!)
your code is looking cool
$(function(){
$('#btnDfrom').datepicker();
$('#btnDto').datepicker();
});
check your code I think may be jquery is Conflicting somewhere in your pages.
This seems like it would have a really obvious answer, however I cannot get a simple checkbox to uncheck with JQuery once I add Jquery Mobile.
Here is some very simple code as an illustration:
<html>
<head>
<title>Untitled</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.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script>
jQuery(function () {
jQuery('#a').change(function () {
if (jQuery(this).is(':checked')) {
jQuery('#b').removeAttr('checked');
}
});
jQuery('#b').change(function () {
if (jQuery(this).is(':checked')) {
jQuery('#a').removeAttr('checked');
}
});
});
</script>
</head>
<body>
<input type="checkbox" id="a"><label for="a">AAAA</label>
<input type="checkbox" id="b"><label for="b">BBBB</label>
</body>
</html>
This is a simple bit of code. When Checkbox 'A' gets checked, it should uncheck checkbox 'B', and vise verse. However it doesn't, and no error is written to the console.
This is using the standard version of Jquery & Jquery Mobile, linked directly to their site
If I remove the Jquery Mobile elements, by removing the following lines, then it works fine
<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/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
Can anyone please enlighten me as to where I am going wrong, since this seems so simple yet I'm at an absolute loss as to what is going on.
Many thanks
Because you need to use .prop and then re-apply styles using .checkboxradio('refresh').
Check
$('selector').prop('checked', true).checkboxradio('refresh');
Uncheck
$('selector').prop('checked', false).checkboxradio('refresh');
I'm using current versions of jQuery:
<!--jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!--jQuery UI-->
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<!--jQuery Mobile-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://
I have the following HTML (which I copy-pasted from docs to ensure correctness):
<div id="form-pay" data-role="fieldcontain">
<form action="mailer.php" method="post">
<label for="basic">Text Input:</label>
<input type="text" name="name" id="basic" data-mini="true" />
</form>
</div>
Everything is working fine with buttons, accordions and animations, but for some reason forms like the above are not working. They just show up unstyled. Is there any initialization I need to do? The docs say forms are auto-initialized.
Am I missing anything?
jQuery Mobile 1.2 (1.2.0) works with versions of jQuery core from 1.7.0 to 1.8.2.
Therefore change jQuery to ver 1.8.2 (or 1.8.3)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
jsFiddle
or use jQuery migrate if you for some reason need ver.1.9.X
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
jsFiddle
The databox plugin works well in a static jQuery Mobile html page. The scripts defined in header are:
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.js"></script>
The line for the datebox input is:
<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "flipbox","useFocus": true}'>
However, once I dynamically inject some other elements into the same page, like
$(document).bind("pagebeforechange", function route(e, data) {
...
$page.trigger('create');
...
As a result, I can see all elements are displayed well, including the datebox button. But clicks on the datebox button would not pop up anything.
I compare the two versions of html codes after enhancement. I found the dynamic one misses the following, which corresponds to the date dialog pop-up:
<div class="ui-datebox-container ui-overlay-shadow ui-corner-all ui-datebox-hidden pop ui-body-b"
...
Why did the dynamic way miss to generate the codes above? How can I correct?
I found a solution myself. It is to change
$page.trigger('create');
to
$page.page();
But I have no idea why and the fundamental difference of these two. Help please!
i am using Jquery mobile slider.I want make the slider in steps.
so i have tried with this.
<div data-role="page">
<div data-role="content">
<label for="slider" class="ui-hidden-accessible">Input slider:</label>
<input type="range" name="slider" id="slider_0" value="25" min="0" max="100" step="25" />
</div>
the slider is sliding well but it is not moving in the steps.
eg: 100/25 =4
so it should point only at 25,50,75,100 but its sliding every where.
I have seen an live example at this place. its working fine here but why its not working for me.
http://code.jquery.com/mobile/latest/demos/docs/forms/slider/index.html
here is my jsfiddle
http://jsfiddle.net/chakrirajni/pfNDB/
Thanks,
This Bug has been Fixed in Latest version JQuery Mobile Libraries mentioned below
1)stable version - 1.0.1 http://jquerymobile.com/blog/2012/01/26/jquery-mobile-1-0-1-released/
2)Unstable build - 1.1.0 RC1 http://jquerymobile.com/blog/2012/02/28/announcing-jquery-mobile-1-1-0-rc1/
Ya got it.
I have used these likns.
<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.7.1.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>
its working fine.
but i dont want to see the textbox beside the slider. how can i do that in this version in
my code looks like this.
<label for="slider" class="ui-hidden-accessible">
Input slider:</label>
<input type="range" name="slider" id="slidstep" step="25" value="0" min="1" max="100"/>
Thanks for ur help.