Develop Reference

how to apply a mask to an item coming from an API with Javascript

I have a basic CRUD situation, where in the form, when I send the data, it inserts the mask normally, and when sending it to my local API, I format it and leave it in numeric format. But how am I going to apply the mask again on the item being displayed in a grid?
in my form, is like this
and on the grid, it displays like this
now, I need to apply the mask again, but on the grid that is showing. How to make?
to show the items on the grid, I am doing this via Javascript:
const exibirEmpresas = (u) => {
Array.from(u).forEach((lista) => {
dadosEmpresa += `
<tr>
<td class="idEmp" id="idEmp">${lista.idEmpresa}</td>
<td class="nomeEmp">${lista.nomeEmpresa}</td>
<td class="emailCad">${lista.email}</td>
<td class="cnpjCad" id="cnpjList">${lista.cnpj}</td>
<td class="dataCadastroCad">${lista.dataCadastro}</td>
<td class="dataAtualizacaoCad">${lista.dataAtualizacao}</td>
<td>
<button id="atualiza-empresa" onclick="editItem(${lista.idEmpresa})">Editar</button>
</td>
<td>
<button class="deletebtn" onclick="removeItem(${lista.idEmpresa})">Excluir</button>
</td>
</tr>
`;
});
listaEmpresa.innerHTML = dadosEmpresa;
};
// GET
fetch(urlAPI)
.then((s) => s.json())
.then((dados) => exibirEmpresas(dados));

I understand that you are essentially looking for a way to turn a 14-digit string like "19879847984784" to "19.879.847/9847-84".
You can add this JavaScript code to your script. The HTML is just an example with hard coded values.
function formatCnpj() {
for (let td of document.querySelectorAll(".cnpjCad")) {
td.textContent = td.textContent
.replace(/\D/g, "")
.replace(/(..)(...)(...)(....)/, "$1.$2.$3/$4-");
}
}
formatCnpj();
table { border-collapse: collapse }
td, th { border: 1px solid }
<table>
<tr>
<td class="idEmp" id="idEmp">28</td>
<td class="nomeEmp">John Larkin</td>
<td class="emailCad">john.larkin#x.com</td>
<td class="cnpjCad" id="cnpjList">19961423596110</td>
<td class="dataCadastroCad">2000-09-09</td>
<td class="dataAtualizacaoCad">2020-09-09</td>
<td>
<button id="atualiza-empresa" onclick="editItem(${lista.idEmpresa})">Editar</button>
</td>
<td>
<button class="deletebtn" onclick="removeItem(${lista.idEmpresa})">Excluir</button>
</td>
</tr>
<tr>
<td class="idEmp" id="idEmp">12</td>
<td class="nomeEmp">Helene Park</td>
<td class="emailCad">helene.park#n.com</td>
<td class="cnpjCad" id="cnpjList">19879847984784</td>
<td class="dataCadastroCad">2000-01-01</td>
<td class="dataAtualizacaoCad">2020-01-01</td>
<td>
<button id="atualiza-empresa" onclick="editItem(${lista.idEmpresa})">Editar</button>
</td>
<td>
<button class="deletebtn" onclick="removeItem(${lista.idEmpresa})">Excluir</button>
</td>
</tr>
</table>

Wrong Result Calculate value with checkbox use Jquery

Now im doing some Calculate Checkbox Value Using JQuery and PHP code. The mechanism is, when User checked the checkbox, it will sum the price. I implemented a formula for JQuery but the result it not correct. here is my code
JQUERY
<script>
$(function() {
$('.dealprice').on('input', function(){
const getItemPrice = $(this).closest("tr").find('input[name=itemprice]').val();
var eachPrice = 0;
$('.dealprice:checkbox:checked').each(function(){
eachPrice += isNaN(parseInt(getItemPrice)) ? 0 : parseInt(getItemPrice);
});
$("#totalDeal").text(eachPrice.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));
});
});
</script>
for more detail. i made a sample on this site https://repl.it/#ferdinandgush/Sum-Calculate-checkbox just click "run" button and you can able to test it. i need to display correct calculate following that table format
Please help.

You just have to define getItemPrice inside the loop, otherwise you are calculating it only once for the item that was clicked, instead of doing it for every item.
$(function() {
$('.dealprice').on('input', function(){
var eachPrice = 0;
$('.dealprice:checkbox:checked').each(function(){
const getItemPrice = $(this).closest("tr").find('input[name=itemprice]').val();
eachPrice += isNaN(parseInt(getItemPrice)) ? 0 : parseInt(getItemPrice);
});
$("#totalDeal").text(eachPrice.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));
});
});
<table class="tg">
<thead>
<tr>
<th class="tg-qh0q">Item</th>
<th class="tg-qh0q">Price</th>
<th class="tg-qh0q">Deal</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-0lax">Book</td>
<td class="tg-0lax">$ 10 <input type="hidden" name="itemprice" value="10"></td>
<td class="tg-0lax"><input type="checkbox" class="dealprice" name="deal[12][0]"></td>
</tr>
<tr>
<td class="tg-0lax">Pencil</td>
<td class="tg-0lax">$ 5 <input type="hidden" name="itemprice" value="5"></td>
<td class="tg-0lax"><input type="checkbox" class="dealprice" name="deal[12][1]"></td>
</tr>
<tr>
<td class="tg-0lax">Pen</td>
<td class="tg-0lax">$ 8 <input type="hidden" name="itemprice" value="8"></td>
<td class="tg-0lax"><input type="checkbox" class="dealprice" name="deal[12][2]"></td>
</tr>
<tr>
<td class="tg-amwm" colspan="2">Total</td>
<td class="tg-0lax"><span id="totalDeal">0</span></td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

You have to put the getItemPrice inside of the function of where you get its checked. Please check the following code:
$(function() {
$('.dealprice').on('input', function(){
var eachPrice = 0;
$('.dealprice:checkbox:checked').each(function(){
const getItemPrice = $(this).closest("tr").find('input[name=itemprice]').val();
eachPrice += isNaN(parseInt(getItemPrice)) ? 0 : parseInt(getItemPrice);
});
$("#totalDeal").text(eachPrice.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));
});
});
Also check this repl https://repl.it/repls/LavenderAgonizingRoot

when I am changing the status in dropdown , its changing the value in actual scope in angular js

I have 4 (ALL,PAID,UNPAID,PARTIALLY_PAID) payment statuses and i have to apply filter on these payment statuses based upon the payment status i needs to show the list of invoices.
Case 1:
When current payment status is ALL and i am going to change the
payment status to some other status its working fine.
Case 2:
When current status is others than ALL and i am going the change the
payement status to some other status its not working fine its changing
the changed value in the actual scope object without save.
I wants the change should happen after save.
same is happening for cancel button.
Code HTML part:
<tbody ng-repeat="clientPayment in clientPaymentDetails">
<tr
style="text-align: center">
<td colspan="3" ng-click="showContent(clientPayment.project.name);showData= !showData">{{clientPayment.project.name}}({{clientPayment.project.projectType}})</td>
<td colspan="3">{{clientPayment.project.currency}}</td>
<td colspan="3">
<!-- <select ng-model="selectedStatus" ng-options="payStatusType.code as payStatusType.type for payStatusType in payStatus"
ng-change= "fetchPaymentStatus(selectedStatus, clientPayment.project.name)"></select> -->
<select ng-model="selectedStatus" ng-required="true">
<option value="">ALL</option>
<option ng-repeat="payStatusType in payStatus" value="{{payStatusType.code}}">{{payStatusType.type}}</option>
</select>
</td>
</tr>
<tr
ng-show="model.activeRow == clientPayment.project.name && showData" style="text-align: center;
background-color: #5dbbb0 !important; height: 45px; color: white">
<th>Invoice ID</th>
<th>Invoice Number</th>
<th>Invoice Date</th>
<th>Invoice Amount</th>
<th>Accrual Date</th>
<th>Due Date</th>
<th>Payment Status</th>
<th>Amount Received</th>
<th>Action</th>
</tr>
<tr
ng-show="model.activeRow == clientPayment.project.name && showData"
style="text-align: center; height: 45px"
ng-repeat="invoice in clientPayment.invoiceList |filter: (!!selectedStatus || undefined) && {paymentStatus: selectedStatus}: true">
<td ng-show="!isEdit">{{invoice.invoiceId}}</td>
<td ng-show="!isEdit">{{invoice.invoiceNo}}</td>
<td ng-show="!isEdit">{{invoice.invoiceDate}}</td>
<td ng-show="!isEdit">{{invoice.invoiceAmount}}</td>
<td ng-show="!isEdit">{{invoice.accrualDate}}</td>
<td ng-show="!isEdit">{{invoice.dueDate}}</td>
<td ng-show="!isEdit">{{invoice.paymentStatus}}</td>
<td ng-show="!isEdit">{{invoice.amountReceived}}</td>
<td ng-show="!isEdit">
<button class="btn btn-success" ng-click="isEdit= !isEdit"> <i class="fa fa-pencil-square-o" aria-hidden="true" ></i></button>
</td>
<td ng-show="isEdit">{{invoice.invoiceId}}</td>
<td ng-show="isEdit">{{invoice.invoiceNo}}</td>
<td ng-show="isEdit">{{invoice.invoiceDate}}</td>
<td ng-show="isEdit">{{invoice.invoiceAmount}}</td>
<td ng-show="isEdit">{{invoice.accrualDate}}</td>
<td ng-show="isEdit">{{invoice.dueDate}}</td>
<td ng-show="isEdit"><select ng-model="invoice.paymentStatus">
<option ng-repeat="payStatusType in payStatus" value="{{payStatusType.code}}">{{payStatusType.type}}</option>
</select></td>
<td ng-show="isEdit"><input type="text" ng-model="invoice.amountReceived"></td>
<td colspan="2" ng-show="isEdit">
<button class="btn btn-primary" ng-click="updateInvoiceDetails(invoice);isEdit= !isEdit"> <i class="fa fa-save" aria-hidden="true" ></i></button>
<button class="btn btn-danger" ng-click="isEdit= !isEdit"><i class="fa fa-remove" ></i></button>
</td>
</tr>
</tbody>
</table>
Controller code:
$scope.getClients = function() {
rpmDashboardService.getAllClientsByBusinessUnitId($scope.bu_id)
.then(function(response) {
console.log(response.data);
$scope.Client_List = response.data;
});
};
}
$scope.onClientChange = function(clientId) {
rpmDashboardService.getAllInvoicesList(clientId).then(
function(response) {
$scope.clientProjects = response.data;
var data = angular.copy($scope.clientProjects);
$scope.clientPaymentDetails = data;
console.log($scope.clientPaymentDetails);
});
}
$scope.showContent = function(name) {
$scope.model = {
activeRow : name
};
}
$scope.updateInvoiceDetails=function(invoice){
if(invoice.amountReceived == null || invoice.amountReceived == "" || invoice.paymentStatus==="" || invoice.paymentStatus==null){
noty({type:'error',
text:'Please enter some amount into Amount Received...'});
}
else{
rpmDashboardService.updateInvoiceDetails(invoice).then(function (response) {
if (response.status!=200) {
noty({type:'error',
text:'Some error occured'});
}
else if(!response.data){
noty({type:'error',
text:'Invoice can\'t be added'});
}
else{
noty({type:'success',
text:'New Invoice Details Updated Successfully'});
}
});
}
}
Please find the below screen shots:[for case 1][1]

You are using ng-model to update in same scope and it is immediately gets reflected in your complete clientPaymentDetails variable.
use below
<select ng-model="paymentSt" ng-change="updateData(paymentSt,invoice)">
<option ng-repeat="payStatusType in payStatus" value="{{payStatusType.code}}">{{payStatusType.type}}</option>
</select>
instead of
<select ng-model="invoice.paymentStatus">
<option ng-repeat="payStatusType in payStatus" value="{{payStatusType.code}}">{{payStatusType.type}}</option>
</select>
Use ng-change method to update paymentSt in copy of invoice and put it into scope. When you are saving at that time fetch this invoice (that is copied from original invoice and updated payment status into it) and get paymentStatus and use it to save.

Hide a tr only if td contains no content AFTER a specific html tag

Is it possible to examine the content within a tr, AFTER an html element (br) to see if any exists? If there is no content after the br element, I'd like to hide the parent td. Please note that the html code is system generated and I cannot edit it.
I'm just not sure where to begin with this. Any help is greatly appreciated.
<table class="tabledefault">
<tbody>
<tr>
<td id="customfields">
<table class="tabledefault">
<tbody>
<tr><!-- this TR should be hidden -->
<td id="CAT_Custom_451068"><strong>Laser Tag</strong>
<br>
</td>
</tr>
<tr>
<td id="CAT_Custom_451069"><strong>Arcade</strong>
<br>Selected
</td>
</tr>
<tr>
<td id="CAT_Custom_450908"><strong>Bounce House (45 minutes) $100</strong>
<br>False
</td>
</tr>
<tr>
<td id="CAT_Custom_451307"><strong>Party Room Rental (per hour) $75</strong>
<br>True</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

Try using .each() , nextSibling , nodeValue , String.prototype.match() , .closest()
$("table tr td br").each(function(i, el) {
// if `br` next sibling does not contain alphanumeric characters,
// hide parent `tr` element
if (el.nextSibling.nodeType === 3
&& el.nextSibling.nodeValue.match(/\w+/) === null
|| $(el).next(":empty").length) {
$(this).closest("tr").hide()
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<table class="tabledefault">
<tbody>
<tr>
<td id="customfields">
<table class="tabledefault">
<tbody>
<tr><!-- this TR should be hidden -->
<td id="CAT_Custom_451068"><strong>Laser Tag</strong>
<br><span></span>
</td>
</tr>
<tr>
<td id="CAT_Custom_451069"><strong>Arcade</strong>
<br>Selected
</td>
</tr>
<tr>
<td id="CAT_Custom_450908"><strong>Bounce House (45 minutes) $100</strong>
<br>False
</td>
</tr>
<tr>
<td id="CAT_Custom_451307"><strong>Party Room Rental (per hour) $75</strong>
<br>True</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

Yes, you just get the trs, then find out if the first <br> element inside the first <td> has any following element siblings (I'm making an assumption there, that you don't want those hidden), or any following text node siblings that aren't blank. jQuery's contents is handy for that, as it includes text nodes. I'd probably loop through them backward:
$("#customfields .tabledefault tr").each(function(index) {
var $tr = $(this);
$tr.find("td:first").contents().get().reverse().some(function(node) {
if (node.nodeName.toUpperCase() === "BR") {
// Hide it, and we're done looping
$tr.hide();
return true;
}
if (node.nodeType != 3 || $.trim(node.nodeValue)) {
// Don't hide it, and we're done looping
return true;
}
});
});
I expect that can be optimized, but you get the idea.
Live Example:
var counter = 3;
tick();
function tick() {
$("#countdown").text(counter--);
if (counter < 0) {
hideIt();
} else {
setTimeout(tick, 500);
}
}
function hideIt() {
$("#customfields .tabledefault tr").each(function(index) {
var $tr = $(this);
$tr.find("td:first").contents().get().reverse().some(function(node) {
if (node.nodeName.toUpperCase() === "BR") {
// Hide it, and we're done looping
$tr.hide();
return true;
}
if (node.nodeType != 3 || $.trim(node.nodeValue)) {
// Don't hide it, and we're done looping
return true;
}
});
});
}
<table class="tabledefault">
<tbody>
<tr>
<td id="customfields">
<table class="tabledefault">
<tbody>
<tr>
<!-- this TR should be hidden -->
<td id="CAT_Custom_451068"><strong>Laser Tag</strong>
<br>
</td>
</tr>
<tr>
<td id="CAT_Custom_451069"><strong>Arcade</strong>
<br>Selected
</td>
</tr>
<tr>
<td id="CAT_Custom_450908"><strong>Bounce House (45 minutes) $100</strong>
<br>False
</td>
</tr>
<tr>
<td id="CAT_Custom_451307"><strong>Party Room Rental (per hour) $75</strong>
<br>True</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="countdown"> </div>

getting the value of a check box

Ok, I am running a javascript that is testing a bunch of to see if they are changed, and if they are changed, I need to see if a check box is checked. I am not using a form to do this, however, for certain reasons. Here is the code for the display of the table:
<table class="db-view-sku-table">
<thead>
<tr>
<th>Merge <br />Callouts</th>
<th>Current Page</th>
<th>Current Callout</th>
<th>New Page</th>
<th>New Callout</th>
<th>MFG SKU</th>
<th>Client SKU</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr class="odd changed_value">
<td class="hidden db-sku-nid">192297</td>
<td class="hidden db-co-nid">212300</td>
<td class="merge"><input type="checkbox" name = "mergeme" class="checked" /></td>
<td class="db-current-page">6</td>
<td class="db-current-co">A</td>
<td class="db-move-page"><input type="text" class="page-select" size="4" value="" /></td>
<td class="db-move-co"><input type="text" class="co-select" size="4" value="A" /></td>
<td class="db-sku">AAG794200</td>
<td class="db-client-sku editable-text">AAG-794200</td>
<td class="db-description">AT-A-GLANCE Sorbet Wkl/Mthly Plnr</td>
</tr>
<tr class="even changed_value">
<td class="hidden db-sku-nid">97160</td>
<td class="hidden db-co-nid">212301</td>
<td class="merge"><input type="checkbox" name = "mergeme" class="checked" /></td>
<td class="db-current-page">6</td>
<td class="db-current-co">A</td>
<td class="db-move-page"><input type="text" class="page-select" size="4" value="" /></td>
<td class="db-move-co"><input type="text" class="co-select" size="4" value="A" /></td>
<td class="db-sku">AAG76PN0105</td>
<td class="db-client-sku editable-text">AAG-76PN0105</td>
<td class="db-description">QUICKNOTES WKLY/MNTH, SPECIAL EDITION</td>
Code when save button is pushed:
function setupMassSave() {
$('.save-button').click(function() {
var merge = getMergeList();
var skus = getSkuList();
var pages = getPageList();
var callouts = getCalloutList();
var currco = getCurrCalloutList();
$.ajax({
url: '/skumove/save_all/' + merge + '/' + skus + '/' + pages + '/' + callouts + '/' + currco,
cache: false,
success: refreshView
});
});
}
function getSkuList() {
var slist = [];
$('.changed_value').each(function(index) {
if(!$(this).children('.merge').children('.checked').checked){
slist.push($(this).children('.db-sku-nid').text());
}
});
return slist;
}
function getMergeList() {
var mlist = [];
$('.changed_value').each(function(index) {
if($(this).children('.merge').children('.checked').checked) {
mlist.push($(this).children('.db-sku-nid').text());
}
});
return mlist;
}
The only ones I'm having a problem with are those two functions. They other 3 functions work fine and return the values I need. I know the problem is somewhere within the ('.merge').clicked area.
Thanks for your help.

.checked is a (Boolean) vanilla JavaScript property, which you're trying to apply to a jQuery object. That's why it's not working.
Replace
$(this).children('.merge').children('.checked').checked
with either
$(this).children('.merge').children('.checked')[0].checked
or
$(this).children('.merge').children('.checked').is(':checked')
or
$(this).children('.merge').children('.checked:checked').length

use the pseudo selector :checked instead of the class selector .checked
if($(this).children('.merge').children(':checked').length) {
mlist.push($(this).children('.db-sku-nid').text());
}