KnockoutOut JS - why are these values not binding correctly? - javascript

I have this knockout observable array and I am trying to bind some of its values to my view. Where I am having difficulties is because its nested. I am not sure what the correct data-bind syntax is.
This is my observable array data:
I want to bind advertiserName within advertiser.
This is my HTML
<table id="tblBrand">
<thead>
<tr>
<th>Brand Name</th>
<th>
<button data-bind='click: $root.addBrand'>Add Brand</button></th>
</tr>
</thead>
<tbody data-bind="foreach: brands">
<tr>
<td>
<input data-bind="value: brandName" readonly="true" />
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<input data-bind="value: advertiser.advertiserName" />
</td>
<td>
<input data-bind="value: advertiser.advertiserRank" />
</td>
</tr>
</table>
<td>
Remove
</td>
</tr>
</tbody>
</table>
The way my binding works is I am looking within each brand. Each brand has an advertiser object and I want to drill into that. The second screenshot shows my syntax and what the page renders.

Because your advertiser is ko.observable you need to get its value with advertiser() if you are using it inside an expression:
<table>
<tr>
<td>
<input data-bind="value: advertiser().advertiserName" />
</td>
<td>
<input data-bind="value: advertiser().advertiserRank" />
</td>
</tr>
</table>
Or you can use the with binding:
<table data-bind="with: advertiser">
<tr>
<td>
<input data-bind="value: advertiserName" />
</td>
<td>
<input data-bind="value: advertiserRank" />
</td>
</tr>
</table>

Related

jQuery check all checkboxes in table

I have a table with a checkbox in the table head which I want to use to check/uncheck all the checkboxes in my table. This is my code, but it doesn't work.
$(document).on('change', '#select_products_checkbox', function() {
$('.form-control').toggleClass('selected');
var selectAllProductsIsChecked = $('#select_products_checkbox').prop('checked');
$('.form-control .form-control').each(function(i, v) {
$(v).prop('checked', selectAllProductsIsChecked);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<td class="col-md-1">
<input class="form-control" type="checkbox" id="select_products_checkbox">
</td>
<td class="col-md-1 text-center">{t}Product ID{/t}</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
</tbody>
</table>
if you pass your event into the change function you can just use the currentTarget checked to set your checked prop on your other checkboxes:
$(document).on('change', '#select_products_checkbox', function(e) {
$('.form-control')
.toggleClass('selected', e.currentTarget.checked)
.prop('checked', e.currentTarget.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<td class="col-md-1">
<input class="form-control" type="checkbox" id="select_products_checkbox">
</td>
<td class="col-md-1 text-center">{t}Product ID{/t}</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
</tbody>
</table>
To do what you require you can use the closest() and find() methods to find the checkboxes in the tbody of the table related to the 'All' checkbox. Then you can use prop() to set their checked state to match. Similarly you can provide a boolean to toggleClass() to add or remove the class based on whether or not the 'All' was checked.
$(document).on('change', '#select_products_checkbox', function() {
$(this).closest('table').find('tbody :checkbox')
.prop('checked', this.checked)
.toggleClass('selected', this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<td class="col-md-1">
<input class="form-control" type="checkbox" id="select_products_checkbox">
</td>
<td class="col-md-1 text-center">{t}Product ID{/t} - SELECT ALL</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
</tbody>
</table>

get parent element in a table

I'm trying to get the parent element in a table. I have a checkbox and I want to check the checkbox parent element.
For example
<td> $125.55 </td>
<td> <input type="checkbox" onChange="getValue(this);" /> </td>
In my getValue function, I would like to get the value 125.55. It will have multiples checkbox in the table inside a loop. Does anyone know how can I get this value? I can use JQuery or just JS.
Thanks
Try this snippet
function getValue(checkbox){
return checkbox.parentElement.parentElement.cells[0]
.getElementsByTagName("a")[0].innerHTML;
}
Here you go with the solution https://jsfiddle.net/21vdgoou/1/
getValue = function(e){
console.log($($(e).parent().prev().children()[0]).text());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td> $125.55 </td>
<td> <input type="checkbox" onChange="getValue(this);" /> </td>
</tr>
<tr>
<td> $195 </td>
<td> <input type="checkbox" onChange="getValue(this);" /> </td>
</tr>
<tr>
<td> $155 </td>
<td> <input type="checkbox" onChange="getValue(this);" /> </td>
</tr>
</tbody>
</table>

Bulk selecting of checkboxes per table using javascript & PHP

I'm trying to make a bulk action function.
What I want:
- Bulk selection in multiple tables, but one <form>
- At every table one select box to select all items inside that table
Example of my code
<form method="post">
<table class="list1">
<tbody>
<tr>
<td class="bulkCheckbox nummer">
<input type="checkbox"
name="checkProducts" onclick="checkAll('list1, this')" />
</td>
</tr>
<tr>
<td>
<input class="bulkCheckbox" type="checkbox"
name="bulkCheckProduct[]" value="2810" />
</td>
<td>
<input class="bulkCheckbox" type="checkbox"
name="bulkCheckProduct[]" value="2811" />
</td>
</tr>
</tbody>
</table>
<table class="list2">
<tbody>
<tr>
<td class="bulkCheckbox nummer">
<input type="checkbox"
name="checkProducts" onclick="checkAll('list2, this')" />
</td>
</tr>
<tr>
<td>
<input class="bulkCheckbox" type="checkbox"
name="bulkCheckProduct[]" value="2812" />
</td>
<td>
<input class="bulkCheckbox" type="checkbox"
name="bulkCheckProduct[]" value="2813" />
</td>
</tr>
</tbody>
</table>
</form>
<script>
function checkAll(table, bx) {
var checkname = document.table.getElementsByClassName("bulkCheckbox");
for (i = checkname.length; i--; ) {
checkname[i].checked = bx.checked;
}
}
</script>
Now I got the php part worked, so when I select multiple select boxes, the $_POST returns my values.
Also the Javascript part worked for me, so select all checkboxes per table.
But Javascript and PHP together won't work for me..
How can I fix this to let the JS and PHP work together?
I've tried multiple scripts but none of them worked for me.
The error I get from JS:
Uncaught TypeError: Cannot read property 'getElementsByName' of undefined
What I try, nothing works..
Try the below code
function checkAll(table, bx) {
var checkname = document.getElementsByClassName("bulkCheckbox");
for (i = checkname.length; i--; ) {
console.log(checkname[i]);
console.log(bx);
checkname[i].checked = bx.checked;
}
}
<form method="post">
<table class="list1">
<tbody>
<tr>
<td class="bulkCheckbox nummer">
<input type="checkbox"
name="checkProducts" onclick="checkAll('list1', this)" />
</td>
</tr>
<tr>
<td>
<input class="bulkCheckbox" type="checkbox"
name="bulkCheckProduct[]" value="2810" />
</td>
<td>
<input class="bulkCheckbox" type="checkbox"
name="bulkCheckProduct[]" value="2811" />
</td>
</tr>
</tbody>
</table>
<table class="list2">
<tbody>
<tr>
<td class="bulkCheckbox nummer">
<input type="checkbox"
name="checkProducts" onclick="checkAll('list2', this)" />
</td>
</tr>
<tr>
<td>
<input class="bulkCheckbox" type="checkbox"
name="bulkCheckProduct[]" value="2812" />
</td>
<td>
<input class="bulkCheckbox" type="checkbox"
name="bulkCheckProduct[]" value="2813" />
</td>
</tr>
</tbody>
</table>
</form>
'this' the parameter you are passing in checkAll() is passed as a string.

How to output elements in a JavaScript object?

Object defined in scope:
$scope.products = [
{
name: 'custom',
category: {
name:'custom',
templateAttribute: [
{attribute: 'material'},
{attribute: 'soles'},
{attribute: 'size'}
]
}
}
];
HTML:
<table class="table" ng-repeat="attr in products.category.templateAttribute">
<tbody>
<tr>
<td>
<input value="{{attr.attribute}}" />
</td>
<td>
<input placeholder="name" ng-model="product.attributes[attr.attribute].name" />
</td>
<td rowspan="2">
<button type="button" ng-click="addItem(product.category.templateAttribute, attr)">
add
</button>
</td>
</tr>
</tbody>
</table>
What I want output to look every attribute has input form
How it seems like it should work:
<table class="table" ng-repeat="attr in products.category.templateAttribute">
How to fix its?
As $scope.product is an array
$scope.product.category itself is undefined
it must be like
<table class="table" ng-repeat="attr in products[0].category.templateAttribute">
if products is dynamic
<table class="table" ng-repeat="product in products">
<tr>
<td ng-repeat="attribute in product.category.templateAttribute">
<td><input value="{{attr.attribute}}" /></td>
<td>
<input placeholder="name" ng-model="product.attributes[attr.attribute].name" />
</td>
<td rowspan="2">
<button type="button" ng-click="addItem(product.category.templateAttribute, attr)">
add
</button>
</td>
</td>
</tr>
</table>
so table will be repeating according to the objects in $scope.products array
If provided HTML code is your whole template, there is an error in assuming that
ng-repeat="attr in products.category.templateAttribute" iterates over "templateAttribute" array in products[0].category object.
You actually need two ng-repeats, one to iterate over products array, and another to iterate over category.templateAttribute in each product:
<table class="table" ng-repeat="product in products">
<tr>
<td ng-repeat="attr in product.category.templateAttribute">
<input value="{{attr.attribute}}" />
.....
</td>
</tr>
</table>

Insert data in to the table and submit like a form

I need to create a table with two rows and three columns.
<table border="1">
<tr>
<td>Male</td>
<td>Female</td>
<td>Total</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Here I need the second row table data's as a input field like a form. I need to fill them by my own and submit it. How can this be done.
Thank You
if your sending your form to serverside then there is no need to take hidden field. Instead give name attribute to your fields. It will be available on the serverside page.
<form id="FormName" action="server.php">
<table border = "1">
<tr>
<td> Male </td>
<td> Female </td>
<td> Total </td>
</tr>
<tr>
<td> <input type="text" id="name" name="name" /></td>
<td> </td>
<td> </td>
</tr>
</table>
<input type="button" value="Submit Data" onclick="submitForm()" />
</form>
function submitForm(){
if(false)//check for errors
{
}else{
$('#FormName').submit();
}
}
Create a form
<form name="myform" action="xxx.php">
//create 3 hidden fields here
</form>
HTML
<table border = "1" id="mytable">
<tr>
<td> Male </td>
<td> Female </td>
<td> Total </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<input type="button" value="Submit Data" onclick="submitTableData()" />
On your button click, get the values of each td and assign it to the hidden fields and then call submit
function submitTableData()
{
$('#hidden1').val('value of td1'); //$('#mytable tr:nth-child(2)').find('td:nth-child(1)').text()
$('#hidden2').val('value of td2'); //$('#mytable tr:nth-child(2)').find('td:nth-child(2)').text()
$('#hidden3').val('value of td3'); //$('#mytable tr:nth-child(2)').find('td:nth-child(3)').text()
$('#myform').submit();
}
<form action="submit.php" method="post">
<table width="100%">
<tr>
<td>Male</td>
<td>Female</td>
<td>Total</td>
</tr>
<tr>
<td><input type="text" name="textnamehere" /></td>
<td><input type="text" name="textnamehere" /></td>
<td><input type="text" name="textnamehere" /></td>
</tr>
</table>
<input type="submit" value="submit" />
</form>
function addForm {
if{
somecodes here if true
}else{
$('variablenamehere') .submit();
}
}
In the cells of the second row just put some inputs:
<tr>
<td><input type="text" name="male"></td>
<td><input type="text" name="female"></td>
<td><input type="text" name="total"></td>
</tr>
When submitting the form, you will have 3 additional parameters: male, female and total in your request which will contain the values.
You can go on even further and - if i understood it right - since you have only numbers, you can specify the input type as being number and, with a small javascript function, you can make the total be calculated automatically.

Categories