I want to display the my tasks object properties as shown in the html page. My tasks have attributes of title and progress. The attributes are not showing however. Is it because of the way I did the map function in my template.helpers() is wrong? Thanks
My blaze template
<tbody>
{{#each displayAllTasks}}
<tr>
<td class="highlight">
<div class="success"></div>
{{counter}}
</td>
<td class="hidden-xs"> {{ task_item }} </td>
<td> {{ task_progress }}% </td>
<td> Bob Marley </td>
<td>
<a href="javascript:;" class="btn btn-outline btn-circle btn-sm purple">
<i class="fa fa-edit"></i> Edit </a>
</td>
</tr>
{{/each}}
</tbody>
My template is shown below
Template
.personalTask
.helpers({
displayAllTasks() {
counter = 1
return Tasks.find({}).map(function(item) {
return {
task_item: item.title,
task_progress: item.progress,
counter: counter++
}
})
}
})
Does it print any rows?
Anyway i'd do it lile this. You dont need a counter etc.
Template Helper:
Template
.personalTask
.helpers({
displayAllTasks() {
return Tasks.find({})
}
})
Blaze Template:
<tbody>
{{#each item in displayAllTasks}}
{{#let counter=#index}}
<tr>
<td class="highlight">
<div class="success"></div>
{{counter}}
</td>
<td class="hidden-xs"> {{ item.title }} </td>
<td> {{ item.progress }}% </td>
<td> Bob Marley </td>
<td>
<a href="" class="btn btn-outline btn-circle btn-sm purple">
<i class="fa fa-edit"></i> Edit </a>
</td>
</tr>
{{/let}}
{{/each}}
</tbody>
However, if you want counter to be 1 based instead of zero, you will need a helper function for +1. I also removed javascript:; from links.
Related
The data from records comes as shown (template) :
{"Id":750,"Name":"Juaquin","Nationality":"American"}
I would like to pass the information on Nationality to a function called flagUrl(someData) that gets the Nationality and returns a path of a URL of a Country Flag.
self.flagUrl = ko.computed(function(data){
var obj = data;
var c = countries.filter((country) => country.Nationality === obj)[0].alpha_2_code;
//console.log(c);
var alpha2code = c;
myPath = "https://countryflagsapi.com/png/" + alpha2code;
return myPath;
}, self);
and I would like to insert it throughout the HTML like this:
<tbody data-bind="foreach: records">
<tr>
<td class="align-middle" data-bind="text:DriverId"></td>
<td class="align-middle" data-bind="text:Name"></td>
<td class="align-middle" data-bind="text:Nationality"></td>
<td><img src="" alt="" height=25px width=40px data-bind="attr:{src: $root.flagUrl($Nationality)}"></img></td>
<td class="text-end">
<a class="btn btn-default btn-light btn-sm" data-bind="attr: { href:'./driverDetails.html?id=' + DriverId }"><i class="fa fa-address-card-o" title="Selecione para ver detalhes"></i></a>
</td>
</tr>
</tbody>
I'm using knockout.js for binding. The function in flagUrl is correct and does as it is told, it just doesn't work when the data comes from the HTML.
I'm in desperation. I've been dueling with this for the past few days.
Thank you in advance
This doesn't implement the flags in exactly the way you were thinking (with a function call) but this might be an acceptable alternative.
Here's a working example:
https://jsfiddle.net/galeroy/k9ro26nj/10/
<!DOCTYPE html>
<head>
<title>KnockoutJS Flags</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
type = "text/javascript"></script>
</head>
<body>
<table data-bind="foreach: records">
<tbody>
<tr>
<td class="align-middle" data-bind="text: DriverId"></td>
<td class="align-middle" data-bind="text: Name"></td>
<td class="align-middle" data-bind="text: Nationality"></td>
<td>
<img data-bind="attr: { src: 'https://countryflagsapi.com/png/' + Nationality}" height="25" width="40" />
</td>
<td class="text-end">
<button class="btn btn-default btn-light btn-sm" data-bind="attr: { href:'./driverDetails.html?id=' + DriverId }">
<i class="fa fa-address-card-o" title="Selecione para ver detalhes">Selecione para ver detalhes</i>
</button>
</td>
</tr>
</tbody>
</table>
<script src="knockout-demo.js"></script>
</body>
</html>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I'm trying to add some text to an array that's dynamically outputted by my database. However, with the way my function is set up currently, it adds each value to it's own separate array. I need them to be pushed to the same array because I need to get the sum of all the numbers that are outputted.
This is my function to convert the text to a number and then push them to an array.
$(".sumCosts").each(function(){
let valuesArray = [];
let values = parseInt($(this).text().replace(/,/g, ''));
valuesArray.push(values);
console.log(valuesArray);
})
This is the HTML output. I'm interested in the <td> with class sumCosts, marked with *.
<table class="table text-light">
<thead>
<tr class="text-end">
<th class="text-start" scope="col">Implementation or Annual</th>
<th class="text-start" scope="col">Category</th>
<th scope="col">Cost ($)</th>
<th scope="col">Hours</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
<tr class="text-end">
<td class="text-start">implementation</td>
<td class="text-start">emo</td>
***<td class="text-end sumCosts">4,091</td>***
<td class="text-end">85</td>
<td>
<a href="/find/costs_hours/1">
<button id="1" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/1">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
</tbody>
<tbody><tr class="text-end">
<td class="text-start">implementation</td>
<td class="text-start">analysts</td>
***<td class="text-end sumCosts">6,282</td>***
<td class="text-end">130.5</td>
<td>
<a href="/find/costs_hours/2">
<button id="2" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/2">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
</tbody>
<tbody><tr class="text-end">
<td class="text-start">implementation</td>
<td class="text-start">maintenance</td>
***<td class="text-end sumCosts">2,873</td>***
<td class="text-end">72.5</td>
<td>
<a href="/find/costs_hours/3">
<button id="3" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/3">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
</tbody>
<tbody><tr class="text-end">
<td class="text-start">implementation</td>
<td class="text-start">materials</td>
***<td class="text-end sumCosts">1,185</td>***
<td class="text-end"></td>
<td>
<a href="/find/costs_hours/4">
<button id="4" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/4">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
</tbody>
<tbody><tr class="text-end">
<td class="text-start">annual</td>
<td class="text-start">emo</td>
***<td class="text-end sumCosts">313</td>***
<td class="text-end"></td>
<td>
<a href="/find/costs_hours/5">
<button id="5" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/5">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
</tbody>
</table>
This is what is logged to the console
[4091]
[6282]
[2873]
[1185]
[313]
I need to be able to put them into the same array so that I can get a sum of all the numbers. Any advice on how to achieve this is greatly appreciated! Thanks!
You had to just move valuesArray Outside the function nothing more !
Using vanilla js
JS
let ele = document.querySelectorAll(".sumCosts")
let ar = Array.from(ele)
let valuesArray = [];
ar.forEach(ele => {
let values = parseInt(ele.innerText.replace(/,/g, ''));
valuesArray.push(values);
})
console.log(valuesArray);
jQuery
let valuesArray = [];
$(".sumCosts").each(function() {
let values = parseInt($(this).text().replace(/,/g, ''));
valuesArray.push(values);
})
console.log(valuesArray);
How to iterate through multiple dropdowns in a grid in AngularJS for
selected value.Below is my code.Attached the sample grid UI .I wants to
iterate through each of the row values and form a array of objects.I have separate model for each dropdowns key and value pair.But not sure how to read those through iteration
<table class="filtertable" ng-show="FilterOptions">
<thead>
<th>And/Or</th>
<th>Field</th>
<th>Operator</th>
<th>Value</th>
</thead>
Here iterating through and binding drop downs
<tbody ng-repeat="m in FilterOptions">
<tr>
Here we are biding the drop downs
<td><select ng-model="AndOrmodel" ng-show="m.AndOr" ng-options="option for option in m.AndOr"></select></td>
<td> <select ng-model="Fieldsmodel" ng-options="o as o for o in m.Fields"></select></td>
<td> <select ng-model="Operatorsmodel" ng-options="Operator.OperatorName for Operator in m.Operators track by Operator.OperatorId"></select></td>
<td>
<select ng-model="OperFieldsmodel" ng-if="Operatorsmodel.indexOf('Field') > -1" ng-options="o as o for o in m.Fields"></select>
<input type="text" ng-if="Operatorsmodel.indexOf('Field') == -1 || Operatorsmodel==undefined" ng-model="m.SearchValue" />
</td>
<td>
<p>
<a href="#" ng-click="Add($index)" title="Add">
<span class="glyphicon glyphicon-plus"
style="color:green;"></span>
</a>
</p>
</td>
<td>
<a href="#" ng-click="Remove($index)" title="Remove
this filter line">
<span class="glyphicon glyphicon-minus"
style="color:red"></span>
</a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<p>
<a href="#" ng-click="Add()" title="Add">
<span class="glyphicon glyphicon-plus" style="color:green"></span>Add new clasue
</a>
</p>
</td>
<td>
<input type="button" value="Save" ng-
click="SaveMasterSearch()" />
</td>
</tr>
</tfoot>
</table>
I'm currently using AngularJS, this is my HTML:
<tbody>
<tr dir-paginate="tdata in tableData | orderBy:predicate:reverse | filter:searchFilter | itemsPerPage:10 track by $index ">
<td class="table-data-edit-all">
<input type="checkbox" ng-model="tdata.selectedCell">
</td>
<td class="align-left">
{{ tdata.companyName }}
</td>
<td class="align-left">
{{ tdata.department }}
</td>
<td>
<a ng-click="editCompany({{ tdata.id }})"><i class="fa fa-edit"></i></a>
<a ng-click="removeCompany({{ tdata.id }})"><i class="fa fa-remove"></i></a>
</td>
</tr>
</tbody>
and here is Angular:
$scope.editCompany = function(index) {
console.log(index);
// my stuffs
}
When the page is loaded:
first time, tdata.id show the number id 1 in HTML view and
editCompany(index) also print out to the console number 1.
second time, after I did a sort using Angular orderBy,
tdata.id show the number id 10 corresponding with
tdata.companyName. However, at this time, editCompany(index) still
print out to the console number 1, not 10.
How can I fix it?
Use ng-click="editCompany(tdata.id) instead of ng-click="editCompany({{tdata.id}})
<tbody>
<tr dir-paginate="tdata in tableData | orderBy:predicate:reverse | filter:searchFilter | itemsPerPage:10 track by $index ">
<td class="table-data-edit-all">
<input type="checkbox" ng-model="tdata.selectedCell">
</td>
<td class="align-left">
{{ tdata.companyName }}
</td>
<td class="align-left">
{{ tdata.department }}
</td>
<td>
<a ng-click="editCompany(tdata.id)"><i class="fa fa-edit"></i></a>
<a ng-click="removeCompany(tdata.id)"><i class="fa fa-remove"></i></a>
</td>
</tr>
</tbody>
You have to remove {{ }} from your code
IN HTML
<tbody>
<tr dir-paginate="tdata in tableData | orderBy:predicate:reverse | filter:searchFilter | itemsPerPage:10 track by $index ">
<td class="table-data-edit-all">
<input type="checkbox" ng-model="tdata.selectedCell">
</td>
<td class="align-left">
{{ tdata.companyName }}
</td>
<td class="align-left">
{{ tdata.department }}
</td>
<td>
<a ng-click="editCompany(tdata.id)"><i class="fa fa-edit"></i></a>
<a ng-click="removeCompany(tdata.id)"><i class="fa fa-remove"></i></a>
</td>
</tr>
</tbody>
I am wondering about one thing.
Have a UI html table with two records and would like to click on a record only with exact value.
Something like for instance:
SELECT record WHERE tr data-user LIKE "testuser1"
Is it possible to do that in some simple way ?
<table class="table table-striped">
<thead>
<tr>
<th>
<input type="checkbox" disabled="">
</th>
<th data-sort="status">Status
<i class="fa fa-sort-"></i>
</th>
<th data-sort="name">Name
<i class="fa fa-sort-"></i>
</th>
<th data-sort="position">Position
<i class="fa fa-sort-"></i>
</th>
<th data-sort="userCode">ID
<i class="fa fa-sort-asc"></i>
</th>
<th data-sort="email">e-mail
<i class="fa fa-sort-"></i>
</th>
</tr>
</thead>
<tbody>
<tr data-user="testuser1">
<td>
<input type="checkbox" disabled="">
</td>
<td>
<div class="toggle btn btn-default off btn-sm" data-toggle="toggle" style="width: 76px; height: 30px;">
<input data-user-code="a.anpilov" class="status-toggle" type="checkbox" data-toggle="toggle" data-on="Active" data-off="Inactive" data-size="small">
<div class="toggle-group">
<label class="btn btn-primary btn-sm toggle-on">Active</label>
<label class="btn btn-default btn-sm active toggle-off">Inactive</label><span class="toggle-handle btn btn-default btn-sm"></span></div>
</div>
</td>
<td class="plain">
testuser1
</td>
<td class="plain">
testuser1
</td>
<td class="plain">
testuser1
</td>
<td class="plain">
testuser1
</td>
</tr>
<tr data-user="testuser2">
<td>
<input type="checkbox" disabled="">
</td>
<td>
<div class="toggle btn btn-default off btn-sm" data-toggle="toggle" style="width: 76px; height: 30px;">
<input data-user-code="a.puchaujara" class="status-toggle" type="checkbox" data-toggle="toggle" data-on="Active" data-off="Inactive" data-size="small">
<div class="toggle-group">
<label class="btn btn-primary btn-sm toggle-on">Active</label>
<label class="btn btn-default btn-sm active toggle-off">Inactive</label><span class="toggle-handle btn btn-default btn-sm"></span></div>
</div>
</td>
<td class="plain">
testuser2
</td>
<td class="plain">
testuser2
</td>
<td class="plain">
testuser2
</td>
<td class="plain">
testuser2
</td>
</tr>
</tbody>
</table>
Tried to do it like that:
getDriver().findElement(By.xpath("//div[#id='content'//div[#class='container'//table[#class='table table-striped'//following::tbody//tr[#data-user='testuser1']")).click();
but did not work ... :(
Maybe you can use xpath expression using value attribute. For example, to select certain element with id and value and click on it:
driver.findElement(By.xpath("//*[#id='" + yourId + "' and #value='" + yourValue + "']")).click();
Or a td whith a text inside (be aware that td tag has no value, it has a text inside):
driver.findElement(By.xpath("//td[text()='" + yourTdText + "']")).click();
If you can build an unique xpath to identify what you are looking for this should be your best option even if you don't know the id or the tag type.
Subject to close.
Final solution:
getDriver().findElement(By.xpath("//tr[#data-user='testuser1']")).click();