I am new to Fuel UX and trying to make checkbox work. I have the following simple page:
<!DOCTYPE html>
<html lang="en" class="fuelux">
<head>
<meta charset="utf-8">
<title>Fuel UX 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="dist/css/fuelux.min.css" rel="stylesheet" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//www.fuelcdn.com/fuelux/3.11.0/js/fuelux.min.js"></script>
</head>
<body>
<div class="checkbox" id="myCheckbox">
<label class="checkbox-custom" id="myCustomCheckbox1">
<input class="sr-only" type="checkbox" value="">
<span class="checkbox-label">Custom checkbox unchecked on page load 22234</span>
</label>
</div>
<script>
//javascript initialization goes here
</script>
</body>
</html>
I need to initialize the checkbox via Javascript. The following works:
$('#myCustomCheckbox1').checkbox();
The following are not working:
$('input[type="checkbox"]').each(function(index, item) {
$(this).checkbox();
});
or
$('input[type="checkbox"]').checkbox()
Could any expert confirm that checkboxes must have id if they are initialized via Javascript? Or I did it in a wrong way?
Please review the documentation. The checkbox jQuery plugin can only be bound to the label, not the wrapping div (if present), nor the input.
You might try:
$('.checkbox > label').each(function(index, item) {
$(this).checkbox();
});
Related
This is the code.
(I know that I must type here so many text to post my question, but please ignore this part in the parenthesis. It is due only to the rules of the site.)
I can not find the reason, but on screen only appears "{{adat}}".
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> </title>
<script src="https://code.angularjs.org/1.8.2/angular.js">
</script>
<script type="text/javascript">
function todoc($scope) {
$scope.adat = "Szia!";
}
</script>
</head>
<body ng-app>
<div ng-controller="todoc">
<h1> {{adat}} </h1>
</div>
</body>
</html>
It turned out that this version of Angular works with a newer syntax.
For this syntax the appropriate version is 1.0.0
if i have this code:
<div><input type="checkbox" name="lista[]" value="3424"> 3424<br><input type="checkbox" name="lista[]" value="3333"> 3333<br></div>
I would like to have the checkbox value in the variable $valore without using any submit button
help me?
I'm very new with this. But it seems your case is similar to the one that I've found somewhere on the internet. Too bad, I don't remember that internet address.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery.js"></script>
<style>
</style>
</head>
<body>
<div>
<input class="calc" type="checkbox" name="lista[]" value="3424"> 3424<br>
<input class="calc" type="checkbox" name="lista[]" value="3333"> 3333<br>
</div>
<input type="text" name="sum"/>
<script>
function calcscore(){
var valore = 0;
$(".calc:checked").each(function(){
valore=parseInt($(this).val(),10);
});
$("input[name=sum]").val(valore.toLocaleString())
//alert(valore)
}
$().ready(function(){
$(".calc").change(function(){
calcscore()
});
});
</script>
</body>
</html>
Test Link in jsfiddle.net.
I don't understand at all the code because I just copied it from the internet, then I try to modify it with more miss than hit.
The original code is to sum the value of the checked checkbox, so it put plus (+) sign in this line : valore+=parseInt($(this).val(),10);
I have done a program which does autocomplete using angucomplete statement.but iam unable to get when i enter any key it does not displaying it with scrollbar whne number of matches are done.CAn anyone help me to solve this
//Html file
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Autocomplete using remote searching</title>
<script src="angularfiles/angular.min.js"></script>
<script src="angularfiles/angular-animate.js"></script>
<script src="angularfiles/ui-bootstrap-tpls-0.13.4.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="Jsfiles/autourl.js"></script>
<script src="angularfiles/angucomplete-alt.js"></script>
<link rel="stylesheet" href="angularfiles/style.css" />
<link rel="stylesheet" href="angularfiles/angucomplete-alt.css" />
<link rel="stylesheet" href="angularfiles/bariol.css" />
</head>
<body ng-controller="controller">
<angucomplete-alt id="members" pause="400" placeholder="Type to start"
selected-object="testObj" maxlength="40"
remote-url="http://maps.googleapis.com/maps/api/geocode/json?sensor=false&address="
remote-url-data-field="results"
title-field="formatted_address"
minlength="1"
discription-field="status"
/>
</body>
</html>
//JSfile
var app=angular.module("myapp",['ui.bootstrap','angucomplete-alt']);
app.controller("controller",function(){
});
To show scrollbar, you need to set the following css style to angucomplete-dropdown class, and then the directive automatically picks it up.
.angucomplete-dropdown {
overflow-y: auto;
max-height: 200px; // your preference
}
See example #1
For more Info: https://github.com/ghiden/angucomplete-alt
How to implement Auto Complete Text Box in App Framework Using AngularJS,
Auto Complete Method gives error undefined
The following code throws an error when using AppFramework:
$scope.complete = function () {
console.log($scope.availableTags);
$("#tags").autocomplete({ source: $scope.availableTags });
};
Error autoComplete method is undefined
You can use ng-autocomplete. I have provided a simple example as follows:
<!DOCTYPE html>
<html ng-app="Test">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css"href="style.css">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<script src="script.js"></script>
<script src="ngAutocomplete.js"></script>
</head>
<body>
<div ng-controller="TestCtrl">
<form id="form" role="form">
<div class="form-group move-down">
<label for="Autocomplete">Generic Autocomplete</label>
<input type="text" id="Autocomplete" class="form-control" ng-autocomplete="result1" details="details1" options="options1"/>
</div>
</form>
</div>
</body>
</html>
You can also use Angucomplete. Find it here: http://ghiden.github.io/angucomplete-alt/
I make simple example of ng-repeat when I used ng-repeat it works fine .But when I use collection-repeat it gives me this error
Controller '$ionicScroll', required by directive 'collectionRepeat', can't be found!
could you please help me solving this error
Here is my my plunker
http://plnkr.co/edit/LjADQj07M4cEpTQP3WzS?p=preview
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Invoices Grid</title>
<!--Stylesheets-->
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<!--Scripts-->
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="a">
<div class="row" collection-repeat="n in names">
<div class="col">{{n.name}}</div>
<div class="col">{{n.lasename}}</div>
</div>
</body>
</html>
First post Google post :
http://forum.ionicframework.com/t/error-compile-ctreq-controller-ionicscroll-required-by-directive-collectionrepeat-cant-be-found/4879
collection repeat needs a scrolling system.
Therefore, suround your code with <ion-content overflow-scroll="true" >
See updated plnkr : http://plnkr.co/edit/LuHPy3lbqYBlg35iYuw1?p=preview