I have a list of users from a web api which i've supplied the user with a search box to filter to make searching easy.
On the top side of the table too i've provided the total number of users returned by the api.
What i have to do is when the user starts typing and results are being filtered, the total number of displayed should also be updated
<div class="col-sm-9">
<table width="100%" border="0" cellspacing="2" cellpadding="2" class="table">
<tr>
<td width="6%"><strong>Filter By</strong></td>
<td width="94%"> <select ng-model="queryBy">
<option value="$"></option>
<option value="Customer_Name">Name</option>
<option value="Address">Adddress</option>
<option value="Region">Region</option>
<option value="District">District</option>
</select> </td>
</tr>
<tr>
<td><strong>Search</strong></td>
<td> <div class="form-group">
<input type="text" class="form-control" id="search" placeholder="Search Customers" ng-model="query[queryBy]"/>
</div></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<img src="img/loader.gif" width="100" height="13" border="0" />
</div>
<table class="table table-striped table-hover">
<tr>
<td> </td>
<td> </td>
<td>Total Customers: {{users_list.length}}</td>
</tr>
<tr class="success">
<td><strong><a style="color: black; text-decoration: none" href="#/home" ng-click="clikme('Customer_Name')">Customer Name</a></strong></td>
<td><strong>Phone Number</strong></td>
<td><strong>Address</strong></td>
</tr>
<tr ng-repeat="item in users_list | filter: query ">
<td>{{item.Customer_Name}}</td>
<td>{{item.Phone_Number}}</td>
<td>{{item.Address}}</td>
</tr>
</table>
</div>
JS
.controller('app_users_ctrl',function($scope,$http,$location){
$scope.query = {};
$scope.queryBy = '$';
$http.post('http://websource.com/calls/app_users.php').success(function(data){
$scope.users_list=data
//console.log(JSON.stringify(data));
$scope.loading=false;
})
$scope.clikme= function(field){
$scope.myvar= order ? '-' + field : '+' + field;
order=!order;
}
})
Yo need to use lenght for the filtered result so try this.
change {{users_list.length}} for {{ (users_list | filter: query).length }}
Related
I'm new to JS. I have a dynamic table (I didn't add the code for add and delete rows) which I want to show in another table. I try to clone every row. Everything is working but td tag with select element doesn't cloned properly. It shows the selected value or the first value if there is no selected. The idea of this clone is to show the table in modal form and the cloned table will be like a preview. Cloning happened when the modal foem is show. In code below I add the button for cloning table. I think, it doesn't matter in this case.
This is the Fiddle link.
Here is my code HTML:
<table class="table table-bordered" id="table" >
<thead>
<tr>
<td >#</td>
<td >Description</td>
<td >Qty</td>
<td >Units</td>
<td >Price without vat</td>
<td >Vat %</td>
<td >Total</td>
<td >Del</td>
</tr>
</thead>
<tr class="product">
<td class="cloned" width="4%" >
<input type="number" class="enumer" style="width:100%; border: none; padding: 0" disabled="disabled">
</td>
<td class="cloned" width="34%">
<input type="text" class="item_product" style="width:100%;" name="product[]">
</td>
<td class="cloned" width="18">
<input style="width:100%;" class="qty" id="qty" name="qty[]" pattern="[+-]?([0-9]+[.,]?[0-9]*)" type="text" value="0" required>
</td>
<td class="cloned" width="7%">
<input id="item_units[]" class="units" style="width:100%;" name="item_units[]" type="text" value="ks">
</td>
<td class="cloned" width="10%">
<input class="price" style="width:100%;" id='price' name="price_unit[]" pattern="[+-]?([0-9]+[.,]?[0-9]*)" value="0" type="text" required>
</td>
<td class="cloned" width="7%" id="vat_td">
<select class="vat" id="vat" name="vat[]" type="text">
<option value="0">0</option>
<option value="10">10</option>
<option value="20">20</option>
</select>
</td>
<input class="hidden" hidden value="1" id="payer_vat_hidden">
<td class="cloned" width="17%">
<input type="number" style="width:100%; background: #dddddd;" class="amount" id="amount" name="amounts[]" readonly>
</td>
<td class="delTD" width="5%">
<button type="button" style="width:100%;" id="deleteRow" class="btn btn-danger btn-sm">Delete</button>
</td>
</tr>
</table>
<button onclick="copyTable()">copy table</button>
<table class="table table-bordered" id="second_table" >
<thead>
<tr>
<th>#</th>
<th>DESCRIPTION</th>
<th class="text-center">QUANTITY</th>
<th class="text-center">UNITS</th>
<th class="text-right">PRICE</th>
<th class="text-right">Total</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Here is my code Javascript:
function copyTable(){
$("#second_table tr").remove();
$("#table tr").each(function() {
var $target = $("#second_table");
var $tds = $(this).children(),
$row = $("<tr></tr>");
$row.append($tds.eq(0).clone())
.append($tds.eq(1).clone())
.append($tds.eq(2).clone())
.append($tds.eq(3).clone())
.append($tds.eq(4).clone())
.append($tds.eq(5).clone())
.append($tds.eq(6).clone())
.appendTo($target);
});
}
I have table in HTML form, and I want to get the value of <td> for that special row input,
<table class="table table-bordered">
<thead>
<tr>
<th class="font-weight-bold" style="width: 10%">ID</th>
<th class="text-left font-weight-bold" style="width: 20%">Invoice No.</th>
<th class="text-left font-weight-bold" style="width: 20%">Amount</th>
<th class="text-left font-weight-bold" style="width: 15%">Unpaid</th>
<th class="text-left font-weight-bold" style="width: 25%">Payment</th>
</tr>
</thead>
<tbody>
#foreach ( $invoices as $i )
<tr>
<td>
{{ $i->invoice_id }}
</td>
<td>
{{ $i->invoice_number }}
</td>
<td>
{{ $i->invoice_amount }}
</td>
<td>
{{ $i->pending_amount }}
</td>
<td>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
{{ $currencySymbol }}
</span></a>
</div>
<input type="text" class="form-control payment_amount" name="payment_amount_invoice[]" id="payment_amount_invoice" value=""/>
</div>
</td>
</tr>
#endforeach
</tbody>
</table>
here is js...
jQuery.ajax({
type: "POST",
url: '/sales/payments/save',
data: $("#paymentForm").serialize(),
success: function(data)
{....
How can I get invoice_id for that specific input of payment_amount_invoice?
Thank you,
So here is way,
Added hidden input field as invoice_id and used same array for checking in server-side,
<td>
{{ $i->invoice_id }}
<input type="hidden" name="invoice_id[]" value="{{ $i->invoice_id }}">
</td>
I re-wrote the HTML part of your script to replace the laravel templating with a short JavaScript script.
After the user clicks the "save" button the important stuff happens here:
Object.values(frm)
.map(e=> ({id:e.closest("tr").children[0].innerText, amnt:e.value}) )
The input objects of form frm are put into an array and are then processed through a .map() call: the id for each input is taken from the .textContent of the first <td> in the current line and the amnt is taken from the input element's .value.
const tb=document.querySelector("tbody"), currencySymbol="€",
na="invoice_id,invoice_number,invoice_amount,pending_amount".split(","),
data=[[101,202101,200,200],[102,202103,50,50],[103,202104,300,100],
[104,202107,123,123],[105,202108,20,0],[106,202109,93,43]];
data.forEach((e,i,ar)=>ar[i]=(e.reduce((a,c,j)=>(a[na[j]]=c,a),{} )));
tb.innerHTML=data.map(i=>
`<tr><td>${i.invoice_id}</td>
<td>${i.invoice_number}</td>
<td>${i.invoice_amount}</td>
<td>${i.pending_amount}</td>
<td><label><input type="text" name="payment_amount_invoice[]"
value="${i.pending_amount}"/>${currencySymbol}</label></td>
</tr>`).join("\n");
console.log(data); // show the data array
document.querySelector("button").onclick=ev=>
// show data for AJAX post:
console.log(Object.values(frm).map(e=>
({id:e.closest("tr").children[0].innerText, amnt:e.value})
));
td,th {text-align:right}
input[type=text] {width:50px}
<form name="frm"><table class="table table-bordered">
<thead><tr>
<th style="width: 10%">ID</th>
<th style="width: 20%">Invoice No.</th>
<th style="width: 20%">Amount</th>
<th style="width: 15%">Unpaid</th>
<th style="width: 25%">Payment</th>
</tr></thead>
<tbody></tbody>
</table></form><button>save</button>
I am writing an .html page which is to be used to perform a system checkout and verify functionality of various aspects of that system. The .html page features a table encapsulated in a form with each row of that table being a step to verify an aspect of the system (e.g. Step 1: Do something) while each column is different criteria for that checkout process (e.g. Step #, Step Instruction, Expected Result, Actual Result, and Comments).
For the Actual Result column, I have a selection for blank (Incomplete), Pass, Fail, and N/A. The Comments column features a disabled textarea box with a placeholder reading "No Comments".
HTML:
<form method="post" action="">
<table>
<thead>
<tr>
<th align="center"><strong>Step</strong></th>
<th align="left"><strong>Instruction</strong></th>
<th align="left"><strong>Expected Result</strong></th>
<th align="left"><strong>Actual Result</strong></th>
<th align="left"><strong>Comments</strong></th>
</tr>
</thead>
<tr>
<td align="center" valign="top">1.</td>
<td align="left" valign="top">Do something.</td>
<td align="left" valign="top">Something happens.</td>
<td align="center" valign="top"><select id="testResult" name="testResult">
<option value="Incomplete" selected></option>
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td align="center" valign="top"><textarea rows="4" cols="25" id="userComments" name="userComments" placeholder="No comments" disabled="disabled"></textarea></td>
</tr>
<tr>
<td align="center" valign="top">2.</td>
<td align="left" valign="top">Do something else.</td>
<td align="left" valign="top">Something else happens.</td>
<td align="center" valign="top"><select id="testResult" name="testResult">
<option value="Incomplete" selected></option>
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td align="center" valign="top"><textarea rows="4" cols="25" id="userComments" name="userComments" placeholder="No comments" disabled="disabled"></textarea></td>
</tr>
</tbody>
</table>
<input type="submit" value="Submit" id="systemCheckout" name="systemCheckout">
</form>
Through JavaScript, I would like to set the textarea box in the "Comments" column to enabled and to be required should a "Fail" or "N/A" be selected in the preceding "Actual Results" column.
How would I scale this to support numerous rows each featuring a selection and textarea with similar functionality?
this code can help you.
let trc = document.getElementsByClassName("testResultClass")
for(let i = 0;i < trc.length;i++) {
let elem = trc[i]
elem.onchange = (e) => {
let txbx = elem.parentElement.parentElement.getElementsByClassName("testResultBoxClass")[0]
if(elem.value == "Fail" || elem.value == "N/A"){
txbx.disabled = false
txbx.required = true
} else
txbx.disabled = true
txbx.required = false
}
}
<form method="post" action="">
<table>
<thead>
<tr>
<th align="center"><strong>Step</strong></th>
<th align="left"><strong>Instruction</strong></th>
<th align="left"><strong>Expected Result</strong></th>
<th align="left"><strong>Actual Result</strong></th>
<th align="left"><strong>Comments</strong></th>
</tr>
</thead>
<tr>
<td align="center" valign="top">1.</td>
<td align="left" valign="top">Do something.</td>
<td align="left" valign="top">Something happens.</td>
<td align="center" valign="top"><select id="testResult" name="testResult" class="testResultClass">
<option value="Incomplete" selected></option>
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td align="center" valign="top"><textarea rows="4" cols="25" id="userComments" name="userComments" class="testResultBoxClass" placeholder="No comments" disabled="disabled"></textarea></td>
</tr>
<tr>
<td align="center" valign="top">2.</td>
<td align="left" valign="top">Do something else.</td>
<td align="left" valign="top">Something else happens.</td>
<td align="center" valign="top"><select id="testResult" name="testResult" class="testResultClass">
<option value="Incomplete" selected></option>
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td align="center" valign="top"><textarea rows="4" cols="25" id="userComments" name="userComments" class="testResultBoxClass" placeholder="No comments" disabled="disabled"></textarea></td>
</tr>
</tbody>
</table>
<input type="submit" value="Submit" id="systemCheckout" name="systemCheckout">
</form>
You can follow this code.
function checkComment()
{
var select = document.getElementById('testResult').options[document.getElementById('testResult').selectedIndex].text
var comment = document.getElementById("userComments");
if(select === "Fail" || select === "N/A")
{
comment.disabled = false;
} else {
comment.value = "";
comment.disabled = true;
}
}
<form method="post" action="">
<table>
<thead>
<tr>
<th align="center"><strong>Step</strong></th>
<th align="left"><strong>Instruction</strong></th>
<th align="left"><strong>Expected Result</strong></th>
<th align="left"><strong>Actual Result</strong></th>
<th align="left"><strong>Comments</strong></th>
</tr>
</thead>
<tr>
<td align="center" valign="top">1.</td>
<td align="left" valign="top">Do something.</td>
<td align="left" valign="top">Something happens.</td>
<td align="center" valign="top">
<select id="testResult" name="testResult" onChange="checkComment()">
<option value="Incomplete" selected></option>
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td align="center" valign="top"><textarea rows="4" cols="25" id="userComments" name="userComments" placeholder="No comments" disabled="disabled"></textarea></td>
</tr>
</tbody>
</table>
<input type="submit" value="Submit" id="systemCheckout" name="systemCheckout">
</form>
I've been struggling on the solution to the following problem.
I have a table in which every row is build dynamically by ngRepeat.
Every row has four columns and in every column there is an input element.
My question is - how can I validate these four input fields and show the row in red if at least one of this four inputs is invalid.
I've tried to accomplish it with the help of this answer - AngularJS dynamic form field validation. But maybe because I'm doing something wrong it didn't help
<form novalidate name="feedInputSpecificForm" ng-submit="save()">
<table class="table table-condensed cf-table">
<thead>
<tr>
<th class="text-center">{{ 'Feed input' | translate }}</th>
<th class="text-center">{{ 'Calcium' | translate }}</th>
<th class="text-center">{{ '(g/Kg)' | translate }}</th>
<th class="text-center">{{ 'DM/FM factor' | translate }}</th>
</tr>
</thead>
<tbody>
<tr ng-class="{'danger': feedInputSpecificForm.$invalid}"
ng-repeat="item in items">
<td width="20%" class="text-right">
<input ng-model="item.name" type="text" dynamic-name="{{ 'name_' + $index }}" required/>
</td>
<td width="30%" class="text-center">
<input ng-model="item.calcium" type="text" ng-pattern="/^[\d,\.]+$/i" dynamic-name="{{ 'ca_' + $index }}"
class="form-control" required/>
</td>
<td width="20%" class="text-center">
<select ng-model="item.ca_dm" class="form-control input-sm" dynamic-name="{{ 'ca_dm_' + $index }}" required>
<option value="dm">DM</option>
<option value="fm">FM</option>
</select>
</td>
<td width="30%" class="text-center">
<input ng-model="item.dm_fm_factor" type="text" ng-pattern="/^[\d,\.]+$/i"
dynamic-name="{{ 'dm_fm_factor_' + $index }}" class="form-control" required/>
</td>
</tr>
</tbody>
<tfoot class="feed-inputs-control">
<tr ng-if="type === 'specific'">
<td colspan="2" width="50%">
<button ng-click="onAdd()" type="button" class="btn btn-primary btn-sm">Add new feed</button>
</td>
<td colspan="2" width="50%">
<button type="submit" class="btn btn-primary btn-sm">Save</button>
</td>
</tr>
</tfoot>
</table>
</form>
I've found the answer and it was very simple.
Everything worked after me added ng-form in the "tr" tag there I was doing ng-repeat:
<tr ng-class="{'danger': item.id.$invalid}"
ng-repeat="item in items" ng-form="item.id">...</tr>
I'm using list.js (http://listjs.com/) to create a filter from a dropdown.
<div id="viewList">
<input class="search" placeholder="Search" />
<form id="filter">
<select id ="gname" name="gname">
<option value="0">css</option>
<option value="1">tf2</option>
<option value="2" >teamspeak3</option>
<option value="3" >csgo</option>
<option value="3" >gmod</option>
</select>
<select id ="sloc" name="sloc">
<option value="0">US</option>
<option value="1" >EU</option>
</select>
</form>
<button id="filter-results" type="button">Filter Results</button>
<table width="891" align="center" cellspacing='0'>
<thead> <!-- cellspacing='0' is important, must stay -->
<tr>
<th class="sort" data-sort="sname" width="350" >Server Name</th>
<th class="sort" data-sort="gname" style="padding:0px 0px 0px 0px">Game</th>
<th class="sort" data-sort="sloc" style="padding:0px 0px 0px 0px">Loc</th>
<th class="sort" data-sort="ipadd" width="204">IP Address</th>
<th class="sort" data-sort="numply" width="91">Players</th>
<th width="258">Map</th>
<th></th>
</tr>
</thead>
<!-- Table Header -->
<tbody class="list">
<tr>
<td class='sname'>[GFLClan.com]Minigames :: FastDL, Store, and more!</td>
<td class='gname'><a title='css'><img src='Flags/css.png'/></a></td>
<td class='sloc'><img src='Country/US.png'/></td>
<td class='ipadd'>74.91.119.32:27015</td>
<td class='numply'>14/40</td>
<td class='mapn'>mg_ski_mountain_dev</td>
<td><a href='steam://connect/74.91.119.32:27015' title='Join!'><img src='button/join.gif'/>
</td>
<tr>
<td class='sname'>[GFLClan.com] *MarioKart* 2+3 | Instant Respawn | No Lag</td>
<td class='gname'><a title='tf2'><img src='Flags/tf2.png'/></a></td>
<td class='sloc'><img src='Country/US.png'/></td>
<td class='ipadd'>74.91.115.139:27015</td>
<td class='numply'>15/32</td>
<td class='mapn'>dm_mariokart2_b3</td>
<td><a href='steam://connect/74.91.115.139:27015' title='Join!'><img src='button/join.gif'/></td>
</tr>
</tbody>
Using this javascript
var options = {
valueNames: [ 'sname', 'gname', 'sloc', 'ipadd', 'numply', 'mapn' ]
};
var featureList = new List('viewList', options);
$('#filter-results').click(function() {
featureList.filter(function(item) {
var gname = $("#gname").text();
var sloc = $("#sloc").text();
if (item.values().gname == gname && item.values().sloc == sloc) {
return true;
} else {
return false;
}
});
return false;
});
The filter doesn't work. What I want to do is for users to use drop down menu to show only results they need. So if they select css and US, it should only show gname tds with 'css' in and sloc tds with 'US' in. I don't know if the reason it doesn't work is because I am using images in gname and sloc classes. Does anyone know how to get this to work?
Instead of,
$("#gname").text();
you should be using
$("#gname option:selected").text();