So I'm trying to make a simple CRUD system but running into a problem. More specifically, I'm making a webpage that can add and delete entries but when I try to run the webpage it shows some errors notifying that some variables can't be accessed or not defined. I know this is due to the variable being in a local function. Any tips on how to fix this? Here's the HTML and TypeScript code:
import * as ko from "knockout";
class People {
id: KnockoutObservable < number > ;
name: KnockoutObservable < string > ;
age: KnockoutObservable < number > ;
constructor(name: string, age: number, id: number) {
this.name = ko.observable(name);
this.age = ko.observable(age);
this.id = ko.observable(id);
}
addEntry = function() {
let self = this;
this.entryInfo = ko.observableArray([
new People("Long", 23, 36457547),
new People("TD", 23, 43635736)
]);
this.removeEntry = function(entry: People) {
this.entryInfo.remove(entry);
}
}
}
ko.applyBindings(new People("Long", 23, 3234234));
<!DOCTYPE html>
<html>
<script src="./externals/require.js"></script>
<script src="./built/require-config.js"></script>
<script>
require(["built/hello"]);
</script>
<h2>Employee Information (<span data-bind="text: entryInfo().length"></span>)</h2>
<body>
<table>
<thead>
<th>ID Number</th>
<th>Name</th>
<th>Age</th>
</thead>
<tbody data-bind="foreach: entryInfo">
<tr>
<td><input data-bind="value: id" /></td>
<td><input data-bind="value: name" /></td>
<td><input data-bind="value: age" /></td>
<td>Remove Entry</td>
</tr>
</tbody>
</table>
<button data-bind="click: addEntry">Add Entry</button>
</body>
</html>
Screenshot of the error:
enter image description here
Related
I am creating an editable JQuery data-table from the model list . I want to edit some of the column [Rate, Qty, IsBranded, Description] of each record listed in a table. My code is given below.
ProductModel
Id int
Name string
Rate decimal
Qty int
Price decimal
Description string
Html and Javascript
<script type="text/javascript">
$("document").ready(function () {
$('#tbllist').DataTable();
});
</script>
#model List<Product>
<table id="tbllist" class="cell-border" style="width:100%">
<thead class="thead-light">
<tr>
<td>Name</td>
<td>Rate</td>
<td>Qty</td>
<td>total</td>
<td>IsBranded</td>
<td>Description</td>
</tr>
</thead>
<tbody>
#if (Model != null)
{
for (var i = 0; i < Model.Count; i++)
{
<tr>
<td>#Model[i].Name</td>
<td>#Model[i].Rate</td>
<td>#Model[i].Qty</td>
<td>#Model[i].total</td>
<td><input type="checkbox" #(Model[i].IsBranded ? "checked" : "") /></td>
<td>#Model[i].Description</td>
</tr>
}
}
</tbody>
</table>
I want to make edit Rate,Qty, Description, IsBranded column. It would be very appreciated , if someone can help me with appropriate code to make .
With Thanks
Alan
I made an example based on #StéphaneLaurent comment, hope it can work for you.
Copy the dataTables.cellEdit.js to your project, you can place it under wwwroot/js
Reference it in your page
<script src="~/js/dataTables.cellEdit.js"></script>
Then follow the tutorial.
#model List<ProductModel>
<table id="tbllist" class="cell-border" style="width:100%">
<thead class="thead-light">
<tr>
<td>Name</td>
<td>Rate</td>
<td>Qty</td>
<td>Total</td>
<td>IsBranded</td>
<td>Description</td>
</tr>
</thead>
<tbody>
#if (Model != null)
{
for (var i = 0; i < Model.Count; i++)
{
<tr>
<td>#Model[i].Name</td>
<td>#Model[i].Rate</td>
<td>#Model[i].Qty</td>
<td>#Model[i].Total</td>
<td><input type="checkbox" #(Model[i].IsBranded ? "checked" : "") /></td>
<td>#Model[i].Description</td>
</tr>
}
}
</tbody>
</table>
#section scripts{
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="~/js/dataTables.cellEdit.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" />
<script type="text/javascript">
var table = $('#tbllist').DataTable();
function myCallbackFunction(updatedCell, updatedRow, oldValue) {
console.log("The new value for the cell is: " + updatedCell.data());
console.log("The values for each cell in that row are: " + updatedRow.data());
}
table.MakeCellsEditable({
"onUpdate": myCallbackFunction
});
</script>
}
Result:
I'm trying to create a live search feature with meteor similar to the one here.
I have a simple Mongo collection called "people" with 4 fields - name, gender, email, phone.
Here is my html:
<head>
<title>People Search</title>
</head>
<body>
<div class="container">
{{> search}}
</div>
</body>
<template name="search">
<div class="form-group">
<label for="search-query">Search:</label>
<input type="text" class="form-control search-query" id="search-query">
</div>
<h1>People</h1>
{{> people}}
</template>
<template name = "people">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
{{#each searchresults.results}}
<tr>
<td>{{name}}</td>
<td>{{gender}}</td>
<td>{{email}}</td>
<td>{{phone}}</td>
</tr>
{{/each}}
</tbody>
</table>
</template>
Here is my js file:
People = new Mongo.Collection("people");
if (Meteor.isClient) {
Template.search.events({
'keyup input.search-query': function (evt) {
Session.set("search-query", evt.currentTarget.value);
},
})
Template.people.searchResults = function () {
var keyword = Session.get("search-query");
var query = new RegExp( keyword, 'i' );
var results = People.find( { $or: [{'name': query},
{'gender': query},
{'email': query},
{'phone': query}] } );
return {results: results};
}
}
What should happen is on the event of text change in the text box, the collection is queried, and the results displayed in the table.
The event gets triggered, but the table does not get updated.
Thanks
change
{{#each searchresults.results}}
to
{{#each searchResults.results}}
I've started recently working with angular and node.js. I'm trying to populate the content of a json file on some html forms depending on the option selected on a drop down list. I managed to do that but the problem is as soon as I change the content of the form manually, if I want to load the value that it was before (selecting the option from the drop down list) the value of the form doesn't change keeping the one I put manually.
Does anybody know if there's a way to fix that?
Thanks in advance.
Sandra.
Here it's my code:
- json file: content that I want to populate on the forms
[
{
"host": "server1",
"user": "dan",
"pwd": "123456",
"remotedir": "OUT",
"localdir": "65_cargo/dmshared",
"pattern":"FNVAC",
"archive": "0",
"monitor": "2"
},
{
"host": "ftp.xmap.com",
"user": "pront",
"pwd": "x14ck",
"remotedir": "OUT",
"localdir": "107_sss/dmshared",
"pattern":"csv",
"archive": "0",
"monitor": "2"
}
]
-html file: website
<!doctype html>
<html ng-app="gtApp">
<head>
<!--script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script-->
<script data-require="angular.js#1.0.x" src="http://code.angularjs.org/1.0.7/angular.min.js" data-semver="1.0.7"></script>
<script src="ftpsites.js" type="text/javascript"></script>
</head>
<body>
<div ng-controller="ftpSitesCtrl">
<h1>TTS GetTrack Control Panel</h1>
<h2>Total FTP Sites {{ getTotalSites() }}</h2>
<p>Select Site</p>
<select ng-model="selectedItem" ng-options="item.host for item in ftpsites">
</select>
<div>
<p>Edit Site Details</p>
<form>
<table>
<tr>
<td>Host</td>
<td><input type="text" value="{{selectedItem.host}}"/></td>
</tr>
<tr>
<td>User Name</td>
<td><input type="text" value="{{selectedItem.user}}"/></td>
</tr>
<tr>
<td>Password</td>
<td><input type="text" value="{{selectedItem.pwd}}"/></td>
</tr>
<tr>
<td>Remote Directory</td>
<td><input type="text" value="{{selectedItem.remotedir}}"/></td>
</tr>
<tr>
<td>Local Directory</td>
<td><input type="text" value="{{selectedItem.localdir}}"/></td>
</tr>
<tr>
<td>File Pattern</td>
<td><input type="text" value="{{selectedItem.pattern}}"/></td>
</tr>
<tr>
<td>Archive</td>
<td><select><option selected>No</option><option>Yes</option></selected></td>
</tr>
<tr>
<td>Monitor (Days)</td>
<td><select><option="{{selectedItem.monitor}}"></option></selected></td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
js file: logic
var gtApp = angular.module('gtApp', []);
gtApp.controller('ftpSitesCtrl', function($scope, $http){
$http.get('ftpsites.json').success(function (data){
$scope.ftpsites = data;
});
$scope.getTotalSites = function(){
return $scope.ftpsites.length;
}
$scope.populateData = function(){
$scope.host=ftpsites.host;
//return $scope;
}
});
On each of the inputs change "value" to "ng-model" (no curly brackets)
value - one time bind, prints the value to the placeholder
ng-model - two way binding to the model object
Sample
<td><input type="text" ng-model="formSelectedItem.pattern"/></td>
EDIT:
try add this code on your controller:
$scope.formSelectedItem = {};
$scope.$watch('selectedItem', function(newVal) {
$scope.formSelectedItem = newVal;
});
Notice the change in the ng-model attribute
Building a Shpping Cart using AngularJS .
I had code the code from a user on JSFiddle.
JS:-
function CartForm($scope) {
$scope.invoice = {
items: [{
qty: 10,
description: 'item',
cost: 9.95}]
};
$scope.addItem = function() {
$scope.invoice.items.push({
qty: 1,
description: '',
cost: 0
});
},
$scope.removeItem = function(index) {
$scope.invoice.items.splice(index, 1);
},
$scope.total = function() {
var total = 0;
angular.forEach($scope.invoice.items, function(item) {
total += item.qty * item.cost;
})
return total;
}
}
HTML
<h2>Shopping Card Example</h2>
<div ng:controller="CartForm">
<table class="table">
<tr>
<th>Description</th>
<th>Qty</th>
<th>Cost</th>
<th>Total</th>
<th></th>
</tr>
<tr ng:repeat="item in invoice.items">
<td><input type="text" ng:model="item.description"class="input-small" readonly="readonly"></td>
<td><input type="number" ng:model="item.qty" ng:required class="input-mini"> </td>
<td><input type="number" ng:model="item.cost" ng:required class="input-mini" readonly="readonly"></td>
<td>{{item.qty * item.cost | currency}}</td>
<td>
[<a href ng:click="removeItem($index)">X</a>]
</td>
</tr>
<tr>
<td><a href ng:click="addItem()" class="btn btn-small">add item</a></td>
<td></td>
<td>Total:</td>
<td>{{total() | currency}}</td>
</tr>
</table>
</div>
I want to have the add item outside the table . How do I access the addItem function outside the outside the above snippet of HTML code.
JS Fiddle http://jsfiddle.net/slav123/75m7e/
Your problem is related to scope visibility: you define your cart login in the CartForm scope and you want to access that logic from outside that scope.
There are several ways of doing that:
You could always do it the nasty way: pin any global funcionalities to the $rootScope to make them visible throughout the whole app:
function CartForm($scope, $rootScope) {
// ...
$rootScope.addItem = $scope.addItem;
}
Or you could try a cleaner way: you should pack your cart functionalities into a shared service that you can inject wherever you need it:
app.factory('CartService', function() {
// some cart logic here
// return your cart api
return {
addItem: function() {/*...*/}
}
});
After you defined yor cart logic as a factory, you can use it anywhere you want by simply injecting it as a dependency:
app.controller('MyPageCtrl', function($scope, CartService) {
$scope.cart = CartService;
});
and use the functionality into the view:
<a href ng:click="cart.addItem()" class="btn btn-small">add item</a>
I have a HTML table with a checkbox in one of the columns. I want to know how I could get the row data when the user clicks on the checkbox with javascript (without jquery)? Can anyone please help me with this?
Thanks
HTML DOM solves your problem
<script type="text/javascript">
function getRow(n) {
var row = n.parentNode.parentNode;
var cols = row.getElementsByTagName("td");
var i=0;
while (i < cols.length) {
alert(cols[i].textContent);
i++;
}
}
</script>
<table>
<tr>
<td><input type="checkbox" onclick="getRow(this)" /></td>
<td>aaa</td>
<td>bbb</td>
</tr>
<tr>
<td><input type="checkbox" onclick="getRow(this)" /></td>
<td>ccc</td>
<td>ddd</td>
</tr>
<tr>
<td><input type="checkbox" onclick="getRow(this)" /></td>
<td>eee</td>
<td>fff</td>
</tr>
</table>
EDIT:
this script will help you more, I think:
function getRow(n) {
var row = n.parentNode.parentNode;
var cols = row.getElementsByTagName("td");
var i = 0;
while (i < cols.length) {
var val = cols[i].childNodes[0].nodeValue;
if (val != null) {
alert(val);
}
i++;
}
}
You could try something like this:
HTML:
<table>
<thead>
<tr><th></th><th>Row Text</th></tr>
</thead>
<tr>
<td><input type="checkbox" /></td>
<td>Test</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>Test 2</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>Test 3</td>
</tr>
</table>
JavaScript:
checkboxes = document.getElementsByTagName("input");
for (var i = 0; i < checkboxes.length; i++) {
var checkbox = checkboxes[i];
checkbox.onclick = function() {
var currentRow = this.parentNode.parentNode;
var secondColumn = currentRow.getElementsByTagName("td")[1];
alert("My text is: " + secondColumn.textContent );
};
}
JSFiddle: http://jsfiddle.net/markwylde/wzPHF/1/
if your select is in td directly, try the following:
sel.onclick = function(){
row = this.parentNode.parentNode
//then what you need
}
Note that first you have to find sel with either document.getElementById() or document.getElementsByTagName()
Also you may need to handle onchange event instead of onclick
This will give you content of row directly(all td in tr)
HTML:
<table>
<tr id="tr1">
<td>
<input type="checkbox" value="chkbox1" id="chk1">
</td>
<td>
Lorem ipsum text
</td>
</tr>
<tr id="tr2">
<td>
<input type="checkbox" value="chkbox2" id="chk2">
</td>
<td>
Lorem ipsum text
</td>
</tr>
</table>
Jquery:
$(document).ready(function(){
$('#chk1, #chk2').on('change',function(){
if($('#chk1').prop('checked') || $('#chk2').prop('checked'))
{
var ids=$(this).parent().parent().html();
alert(ids);
}
else
{
}
});
})
if you're new :
onChange EVENT of the checkbox will call the function that i named "checking"
it will send "This.checked", which means, will send True or false to the function "checking", Then i go in the function get that True or False that was sent, and put it in a variable i called "temp".
HTML: onchange="checking(this.checked)" <--- sending out : "This.checked" ( This = the object that creates the Event onchange, and .checked, is the propriety)
you could even send multiple info like this : onchange="checking(this.checked,this.id)" and so on.
JAVASCRIPT :function checking(temp) <--- this is how it gets the "this.checked" in HTML, and put it in the variable temp.
to receive multiple infos : function checking(temp,temp2) and so on.(name it like you want)
then i run a 'IF' with the variable "temp" and if the value of it = true, then do alert.
Hope it helps, think about it and work it so it fits what you need !
HTML :
<table>
<tr>
<td>
<input type="checkbox" value=""onchange="checking(this.checked)">
</td>
<td>
<label>Something Here</label>
</td>
</tr>
</table>
JAVASCRIPT :
function checking(temp)
{
if(temp == true)
{
alert("Checkbox is checked");
}
else
{
alert("Checkbox is NOT checked");
}
}