In Js file:
$scope.isCheckboxChecked = function() {
var chks = document.getElementsByName('chk[]');
for (var i = 0; i < chks.length; i++)
{
if (chks[i].checked)
{
$scope.checkBoxClicked = true;
$('#btnUpdateData').attr("data-target", "#update-modal");
$('#btnUpdateData').attr("data-toggle", "modal");
break;
}
if ($scope.checkBoxClicked == false)
{
alert("Please select at least one checkbox");
}
}
}
In HTML
<div class="row" style="">
<button type="button" id="btnUpdateData" class="btn btn-info" ng-click="isCheckboxChecked()">Update</button>
</div>
This code checks if the checkbox is checked only once.
once the checkbox is unchecked, I want the for loop to run again.
Here's a Plunkr example of how you could watch a checkbox's statechange and do something when it changes:
https://plnkr.co/edit/kyEv7IyAXGFRdZjaD4vM?p=preview
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.$watch("testCheckBox", function(newVal, oldVal){
alert('Checkbox changed!')
});
});
Html:
<body ng-controller="MainCtrl">
<p>Check box test</p>
<input type="checkbox" name="testCheckbox" ng-model="testCheckBox"></input>
</body>
Related
I need help of professionals at Apps script. I have the project implemented by web-app.
I wrote script on server-part
var url = "https://docs.google.com/spreadsheets/d/1s8l-8N8dI-GGJi_mmYs2f_88VBcnzWfv3YHgk1HvIh0/edit?usp=sharing";
var sprSRCH = SpreadsheetApp.openByUrl(url);
let sheetSRCHSSCC = sprSRCH.getSheetByName("PUTAWAY_TO");
function GetQ(){
var QPLAN = sheetSRCHSSCC.getRange("M2:M").getValues().filter(String).length;
var myArray = sheetSRCHSSCC.getRange("O2:O" + (QPLAN + 1)).getValues();
var QFACT = 0;
for (i = 0; i < myArray.length; i++) {
if (myArray[i] != "") {
QFACT += 1
}
}
}
I need to return values from this function to inputs:
QFACT to FACT
QPLAN to PLAN
<div class="input-field col s3">
<input disabled value="" id="PLAN" type="text" >
<label for="disabled">PLAN</label>
</div>
<div class="input-field col s3">
<input disabled value="" id="FACT" type="text" >
<label for="disabled">FACT</label>
</div>
I will be grateful for the help. I'm new at this))
If you are using Apps Script deploying Web App, I can see 2 possibilities :
1/ Get data at the loading of the page (and only at the loading) :
In code.gs :
function doGet() {
var tmp = HtmlService.createTemplateFromFile('page');
tmp.QFACT = "hello";
tmp.PLAN = "World!";
return tmp.evaluate();
}
In page.html :
<html>
<body>
<h5><?= QFACT ?></h5>
<h5><?= QPLAN ?></h5>
</body>
</html>
2/ If you need to refresh the data by click button, or something else, you will need to operate diffently :
Add a page-js.html to your project, and bind it at the end of your page.html
<html>
<body>
<h5 id="QFACT"></h5>
<h5 id="QPLAN"></h5>
</body>
<?!= include("page-js"); ?>
</html>
then in your page-js.html :
<script>
function refresh() {
google.script.run.withSuccessHandler(callback).refresh();
}
function callback(e) {
document.getElementById('QPLAN').innerHTML = e.QPLAN;
document.getElementById('QFACT').innerHTML = e.QFACT;
}
</script>
and finally add the refresh() function in your code.gs :
function refresh() {
var obj = {};
obj.QPLAN = "QPLAN";
obj.QFACT = "QFACT";
return obj;
}
This code works on a dropdown very well. However I would like to alter it to use in on the click of a div.
<script>
$(document).ready(function() {
$result = $("#result");
console.log(window.event.target.id)
$("#optionsx").click(function(e) {
var selected = $(this).val();
console.log('change:', selected);
if(selected === '--') return;
$.get("/inside/fusebox/view/communications/locations/getsite.cfc?method=dostuff", {input:selected}, function(res) {
$result.html(res);
},"JSON");
});
})
</script>
Here is the div
<div class="container">
<cfoutput>
<cfloop query = "availablesites">
<div class="filterDiv #typelist#" onclick ="loaddoc()" id = "optionsx" value ="#availablesites.siteid#">#availablesites.sitename#
</div>
</cfloop>
</cfoutput>
</div>
I did see on an internet search I could use onclick because it was listed as a thing that can be done but there was no syntax. Sorry. I have been stuck. Here is a couple that failed.
<script>
$(document).ready(function() {
$result = $("#result");
console.log(window.event.target.id)
$("#optionsx").onclick(function(e) {
var selected = $(this).val();
console.log('onclick:', selected);
if(selected === '--') return;
$.get("/inside/fusebox/view/communications/locations/getsite.cfc?method=dostuff",
{ input:selected }, function(res) {
$result.html(res);
},"JSON");
});
})
</script>
and I tried this too
<script>
function loaddoc() {
$.get("/inside/fusebox/view/communications/locations/getsite.cfc?method=dostuff", {input:selected}, function(res) {
$result.html(res);
}
}
</script>
Consider the following.
$(function() {
var $result = $("#result");
$(".options").click(function(e) {
var selected = $(this).attr("value");
console.log('change:', selected);
if (selected === '--') return;
$.get("/inside/fusebox/view/communications/locations/getsite.cfc?method=dostuff", {
input: selected
}, function(res) {
$result.html(res);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<cfoutput>
<cfloop query="availablesites">
<div class="options filterDiv #typelist#" value="#availablesites.siteid#">#availablesites.sitename#</div>
</cfloop>
</cfoutput>
</div>
When you click on a <div> it does not have a natural value property. If you've added it as a attribute, you can call it using .attr().
I'm doing an online food delivery system in codeigniter. This is the section which shows order status. It gets updated in the database.
<td>
<?php
if ($order_current_status==0)
{?>
<button style="background-color: #FAA0C7;color:#000;cursor: context-menu;" type="button" class="btn"> New</button>
<?php
}
elseif ($order_current_status==3)
{?>
<button style="background-color: #6ED1FB;color:#000;cursor: context-menu;" type="button" class="btn"> Ready</button>
<?php
}
elseif ($order_current_status==5)
{?>
<button style="background-color: #FEE609;color:#000;cursor: context-menu;" type="button" class="btn">On the way</button>
<?php
}
elseif ($order_current_status==6)
{?>
<button style="background-color: #7FFFD4;color:#000;cursor: context-menu;" type="button" class="btn">Delivered</button>
<?php
}?>
</td>
Can someone please tell me how i can see the change in value from the database without refreshing the page?
First of all you should prepare HTML page:
<td>
<button type="button" class="btn" id="ch_button"></button>
</td>
Second step is preparing the JS(JQuery) with Ajax:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
update_button();
})
function timerss(){
var s1= new Date();
var c1= s1.setSeconds(s1.getSeconds() + 2); // update in 2seconds
var x1= setInterval(function() {
var n1= new Date().getTime();
var d1= c1 - n1;
if (d1< 0) {
clearInterval(x1);
update_button();
}
}, 1000);
};
function update_button(){
$.ajax({
url:"/index.php/controller1/method1",
method:"POST",
data: null
}).done(function(ans) {
if (ans == 0) {
$('#ch_button').attr('style','background-color: #FAA0C7;color:#000;cursor: context-menu;');
$('#ch_button').html('New');
timerss();
}
else if (ans == 3) {
$('#ch_button').attr('style','background-color: #6ED1FB;color:#000;cursor: context-menu;');
$('#ch_button').html('Ready');
timerss();
}
else if (ans == 5) {
$('#ch_button').attr('style','background-color: #FEE609;color:#000;cursor: context-menu;');
$('#ch_button').html('On the way');
timerss();
}
else if (ans == 6) {
$('#ch_button').attr('style','background-color: #7FFFD4;color:#000;cursor: context-menu;');
$('#ch_button').html('Delivered');
}
}).fail(function (){
alert('Ajax has been failed.');
});
}
</script>
The third step is to make a controller method which will get the variable value from DB. Here you should do everything you need to know value of $order_current_status:
<?php
class Controller1 extends CI_Controller {
public function __construct() {
parent::__construct();
}
public function method1() {
// get value of $order_current_status
$order_current_status = 5; // for example
echo $order_current_status;
}
}
You will get what you want if you will do each step according to this instruction. It works for me, next your turn.
I have two inputs in which I am applying typeahead:-
<div class="form-group>
<label class="control-label=">Product Code:</label>
<input placeholder="Enter Value" type="text" class="form-control" ng-model="a.productCode" typeahead="code for code in getProductByCode($viewValue)" typeahead-loading="loadingCodes" typeahead-no-results="noResults"/>
<label class="control-label">Product Name:</label>
<input placeholder="Enter Value" type="text" class="form-control" ng-model="getNgModel(a)" typeahead="code for code in getProductNameByCode($viewValue,a.producrCode)" typeahead-loading="loadingCodes" typeahead-no-results="noResults" ng-disabled="!a.productCode"/>
<button type="button" ng-disabled="!a.productCode">Show</button>
</div>
My DIRECTIVE CODE:-
(function () {
'use strict';
angular.module('myApp.components')
.directive('products', products);
products.$inject = ['$http', '$timeout', 'ApiServices'];
function products($http, $timeout, ApiServices) {
return {
restrict: 'EA',
scope: {
},
link: function (scope, el, attrs) {
scope.a = {};
scope.getNgModel = function (a) {
if(a.productCode){
return a.productName;
}else{
return '';
}
};
scope.getProductCode = function(key){
var obj = {"key": key}
if(key.length>=2){
return ApiServices.getProductCodee(obj).then(function (response) {
return response.data.map(function(item){
return item;
});
});
} else {
return false;
}
}
scope.getProductCodeByName = function (key,Code) {
var obj = {"key": key, "Code":Code}
if(key.length>=2){
return ApiServices.getProductCodeByName(obj).then(function (response) {
return response.data.map(function(item){
return item;
});
});
} else {
return false;
}
};
},
templateUrl: ''
};
}
})();
What I want here is when I select a particular value from product code only then the product name and button gets enabled otherwise disabled. Also when the productName is disabled back the value inside it is set to null.Because the previous value remains bind to it and even disabled.
I am not able to clearly understand the second part of your question.. Also when the productName is disabled back the value inside it is set to null.Because the previous value remains bind to it and even disabled
Try this
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.4.0/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript">
angular.module('myApp', ['ui.bootstrap'])
.controller("mainCtrl", function ($scope) {
$scope.selected = '';
$scope.states = [
{
id:1,
name:'A'
},{
id:2,
name:'B'
}
];
var selectedByUser = false;
$scope.onSelectValue = function(selected){
$scope.selected = selected.name;
$scope.disableFields = false;
selectedByUser = true;
};
$scope.changingInput = function(inputValue){
// $scope.selected = null;
if (inputValue && inputValue.id) {
$scope.disableFields = true;
}else{
if (inputValue.length>0 && selectedByUser) {
$scope.disableFields = false;
}else{
$scope.disableFields = true;
// $scope.selected = null;
selectedByUser = false;
}
}
};
$scope.disableFields = true;
});
</script>
</head>
<body ng-controller="mainCtrl">
<div class="container">
<div class="form-group">
<label class="control-label=">Product Code:</label>
<input placeholder="Enter Value" ng-change="changingInput(selected)" type="text" class="form-control" ng-model="selected" typeahead="state as state.name for state in states | filter:$viewValue" typeahead-on-select="onSelectValue(selected)" typeahead-loading="loadingCodes" typeahead-no-results="noResults"/>
<label class="control-label">Product Name:</label>
<input placeholder="Enter Value" type="text" class="form-control" typeahead-loading="loadingCodes" typeahead-no-results="noResults" ng-disabled="disableFields"/>
<button class="btn btn-default" type="button" ng-disabled="disableFields">Show</button>
</div>
{{selected}}
</div>
</body>
</html>
If it does not work here then copy paste it in your editor and then try. Even after that it does not work then you can go to my gihub account, you will find my email address, then share me your mail address so I will mail you zipped solution.
This is my code but when i type text into input box after that i click on save button then text is saving into dropdown list but this text is't storing in local storage and for this i m using knockout.js
<form style="margin-top: -25px;">
<button id="buttonSave" type="submit" style="margin-left: 1156px;">Save</button>
</form>
<div id="labelList" class="btn-group" style="margin-top: -595px;margin-left: 3px;">
<input id="editExistannotation" data-bind="value: annotationList" class="editAnnotationList textArea" type="text" placeholder="Edit existing annotation"/>
<select data-bind="options: area"></select>
</div>
----------------------------------------------------
var addHandle = function () {
this.items = ko.observableArray();
this.add = function (item) { this.items.push(item); }
this.remove = function (item) { this.items.remove(item); }
this.clear = function () { this.items.removeAll(); }
}
var addHandler = new addHandle();
ko.applyBindings(addHandler, document.getElementById("slider"));
$("#buttonSave").click(function () {
var label_object;
var labelText = document.getElementById("textarealabel");
var labelObject = new Object();
labelObject.textarealabel = labelText.value;
localStorage.setItem('label_object', JSON.stringify(labelObject));
$("#ddlList").prepend("<option value='0'>" + localStorage.getItem(label_object) + "</option>");
return false;
})
var existAnnotationmodel = new function () {
var labelObject = $('#textarealabel').val();
this.annotationList = ko.observable();
this.area = ko.observableArray();
this.append = ko.computed(function () {
this.area.push(this.annotationList());
localStorage.setItem('labelObject', JSON.stringify(labelObject));
}, this);
}
ko.applyBindings(existAnnotationmodel);
Now when you type text into the input type="text" and you click on the button. The text is added to the options and to the local storage.
I also remove non relevant code.
<form >
<button id="buttonSave" type="submit" data-bind="click:append" >Save</button>
</form>
<div id="labelList" class="btn-group" >
<input id="editExistannotation" data-bind="value: annotationList" type="text" />
<select data-bind="options: area"></select>
</div>
var VM = function () {
this.annotationList = ko.observable();
this.area = ko.observableArray();
this.append = function () {
this.area.push(this.annotationList());
localStorage.setItem('labelObject',this.annotationList());
localStorage.setItem('labelObjectList',this.area());
};
};
var existAnnotationmodel = new VM();
ko.applyBindings(existAnnotationmodel);
See fiddle