We Keep Coding

How to multiply value of column A with Value of column B To get value of column c in javascript

Kindly assist sort this issue,i would like to multiply value to column A let say quantity with value of column B lets say Cost to get value of Column C Total.
With Just parsing one row to the table am able to achieve this but am stuck if Column A quantity which is editable value is changed.i Total does not change.So how can i achieve like maybe after user editing is complete or after enter key press.
$table.append(
'<tr class="dynamic">' +
'<td> <input type = "hidden" class= "txtStockID" name =
"StockID" ' +
'value = "' +id + '" /> ' +id+ '</td>' +
'<td>' +
item +
'</td>' +
'<td id="qty" class= "qty" type="number" contenteditable>' +
qty +
'</td>' +
'<td>' +
retail +
'</td>' +
'<td>' +
cost +
'</td> ' +
'<td>' +
this.cells[5].innerHTML +
'</td>' +
'<td>' +
tax +
'</td>' +
'<td>' +
vat +
'</td>' +
'<td id="total">' +
total +
'</td>' +
'<td><a data-itemId="0" href="#" class="deleteItem btn btn-
danger btn-flat btn-xs ' +
'glyphicon glyphicon-trash"></a>' +
'</td>' +
'</tr>'
);
$(document).on('change, keyup',
$('.qty'),
function () {
var rows = $('.dynamicRows');
$.each(rows,
function (index, item) {
var quantity =
Number($(this).children('td').eq(2).text());
var cost =
Number($(this).children('td').eq(4).text());
var amount = (quantity * cost).toFixed(2);
$(this).children('td').eq(8).val(amount);
});
});
update_total();
}
});

Make sure the second argument of your on() event binder is a string selector (e.g. '.qty'), not a jQuery object => http://api.jquery.com/on/.
$(document).on('keyup', '.qty', function () {
var rows = $('.dynamic');
$.each(rows, function (index, item) {
var quantity =
Number($(this).children('td').eq(2).text());
var cost =
Number($(this).children('td').eq(4).text());
var amount = (quantity * cost).toFixed(2);
$(this).children('td').eq(8).text(amount);
});
update_total();
});

Depend on the popup's table data, parent's table data showing item is different

I have a popup modal like this one.
When I click 'ADD' button, all the data from popup's table is shown at the table of the parent's. Like this one.
The problem is that I don't want to show the plus sign "+", if there is no data in textbox2s.
Here is the code at popup.js
function add_to_prent_table(){
var popupTable = [];
var i = 0;
$('#testing > tbody > tr').each(function () {
popupTable[i] = [
$(this).find("#test_number").val(),
$(this).find("#type_1").val(),
$(this).find("#type_2").val(),
$(this).find("#place_1").val(),
$(this).find("#place_2").val(),
];
i++;
var newRow = '<tr>'+
'<td id ="td_center">'+
$(this).find("#test_piece_number").val() +
'</td>'+
'<td id ="td_center">'+
$(this).find("#type_1").val() + ' + ' +
$(this).find("#type_2").val() +
'</td>'+
'<td id ="td_center">'+
$(this).find("#place_1").val() + ' + ' +
$(this).find("#place_2").val() +
'</td>'+
'</tr>';
$('#testing_parent tbody').append(newRow);
});
}
How can I fix this?

It's messy but you can replace the first ' + ' with this:
$(this).find("#type_2").val() ? ' + ' : ''
And replace the second ' + ' with
$(this).find("#place_2").val() ? ' + ' : ''
Basically you're looking to see if #type_2 and #place_2 have values. If they do, add a ' + '. If not, add nothing.

Try this;
function add_to_prent_table() {
var popupTable = [];
var i = 0;
$('#testing > tbody > tr').each(function () {
var testNumber = $(this).find("#test_number").val();
var firstType = $(this).find("#type_1").val();
var secondType = $(this).find("#type_2").val();
var firstPlace = $(this).find("#place_1").val();
var secondPlace = $(this).find("#place_2").val();
popupTable[i] = [
testNumber,
firstType,
secondType,
firstPlace,
secondPlace,
];
i++;
var newRow = '<tr>' +
'<td id ="td_center">' +
$(this).find("#test_piece_number").val() +
'</td>' +
'<td id ="td_center">' +
firstType + secondType ? (' + ' + secondType) : '' +
'</td>' +
'<td id ="td_center">' +
firstPlace + secondPlace ? (' + ' + secondPlace) : '' +
'</td>' +
'</tr>';
$('#testing_parent tbody').append(newRow);
});
}

Simply you can add condition before adding plus sign like below,
var newRow = '<tr>'+
'<td id ="td_center">'+
$(this).find("#test_piece_number").val() +
'</td>'+
'<td id ="td_center">'+
$(this).find("#type_1").val()
if($(this).find("#type_2").val() != "")
{
' + ' + $(this).find("#type_2").val()
}
'</td>'+
'<td id ="td_center">'+
$(this).find("#place_1").val()
if($(this).find("#place_2").val() != "")
{
' + ' + $(this).find("#place_2").val()
}
'</td>'+
'</tr>';

How to get ajax response on a button click

I am getting table data from ajax response as json.Some json datas am not displaying but I want it on a button click for other purpose.How can I get it?Please help me.
function leaveTable() {
for (var i = 0; i < leaveList.length; i++) {
var tab = '<tr id="' + i + '"><td>' + (i + 1) + '</td><td class="appliedOn">' + leaveList[i].appliedOn + '</td><td class="levType" >' + leaveList[i].levType + '</td><td class="leaveOn" >' + leaveList[i].leaveOn + '</td><td class="duration">' + leaveList[i].duration + '</td><td class="status">' + leaveList[i].status + '</td><td class="approvedOn">' + leaveList[i].approvedOn + '</td><td class="approvedBy">' + leaveList[i].approvedBy + '</td><td><i class="btn dltLev fa fa-times" onclick="cancelLeave(this)" data-dismiss="modal" value="Cancelled"></i></td><tr>';
$('#levListTable').append(tab)
}
}
from ajax response I want leaveTypeId and pass it into sendCancelReq() function.
Complete code :https://jsfiddle.net/tytzuckz/18/

It is complicated to know exactly what you want. I hope that helps you:
The first, I would change, is not to produce the JavaScript events in your html code var tab = .... I think, it is more clear and readable, when you add your event after the creation of the new dom elements. For example:
var tab = $('<tr id="' + i + '">' +
'<td>' + (i + 1) + '</td>' +
'<td class="appliedOn">' + leaveList[i].appliedOn + '</td>' +
'<td class="levType" >' + leaveList[i].levType + '</td>' +
'<td class="leaveOn" >' + leaveList[i].leaveOn + '</td>' +
'<td class="duration">' + leaveList[i].duration + '</td>' +
'<td class="status">' + leaveList[i].status + '</td>' +
'<td class="approvedOn">' + leaveList[i].approvedOn + '</td>' +
'<td class="approvedBy">' + leaveList[i].approvedBy + '</td>' +
'<td><i class="btn dltLev fa fa-times" data-dismiss="modal" value="Cancelled"></i></td>' +
'<tr>');
$(tab).find('.btn.dltLev').click(function () { cancelLeave(this); });
Then, you are able to send your necessary information more clearly, e.g.:
Instead of the last code
$(tab).find('.btn.dltLev').click(function () { cancelLeave(this); });
you can write
$(tab).find('.btn.dltLev').click(function () { cancelLeave(this, leaveList[i].leaveTypeId); });
and extend your method cancelLeave to:
function cancelLeave(elem, leaveTypeId) {
var id = $(elem).closest('tr').attr('id')
alert(id)
$("#cancelLeave").modal("show");
$('.sendCancelReq').val(id);
sendCancelReq(leaveTypeId);
}

Got solutionPlease check this:https://jsfiddle.net/tytzuckz/19/
function cancelLeave(elem) {
var levTypeId = $(elem).attr('id')
var id = $(elem).closest('tr').attr('id')
$('.currentLevTypeId').val(levTypeId);
$("#cancelLeave").modal("show");
$('.sendCancelReq').val(id);
}
function sendCancelReq() {
var a= $('.currentLevTypeId').val();
alert(a)
}

Can't get value from table td with quotes

Here I am creating dynamic table
function addToMLContainer(id, mlName, mlAddress) {
return '<td><s:text>' + mlName + ' ' + mlAddress + '</s:text></td>' +
'<td hidden="hidden">' + id + '<input name="mlId" type="hidden" value = "' + id + '" /></td>' +
'<td hidden="hidden"><input name="mlFullName" type="hidden" value = "' + mlName + ' ' + mlAddress + '" /></td>' +
'<td align="center"><img src="/delete.png" class="remove" onclick="this.closest(\'tr\').remove()"/></td>'
}
And here I am getting value of tr:
var t = document.getElementById("AddedMlsContainer");
for (var i = 1, row; row = t.rows[i]; i++) {
selectedMerchants = selectedMerchants + " " + row.cells[2].children[0].value + "\n";
}
The problem is I can't get value with double or single quotes like <I'm "blabla">

Finally I did it by removing input field and unnesessary td:
'<td>' + mlName + ' ' + mlAddress + '</td>' +
'<td hidden="hidden">' + id + '<input name="mlId" type="hidden" value = "' + id + '" /></td>' +
'<td align="center"><img src="/delete.png" class="remove" onclick="this.closest(\'tr\').remove()"/></td>'
Then I used innerHtml
var t = document.getElementById("AddedMlsContainer");
for (var i = 1, row; row = t.rows[i]; i++) {
selectedMerchants = selectedMerchants + " " + row.cells[0].innerHTML.replace(/ /g,'') + "\n";
}

Too many character literals in MVC View

Question Background:
I pass to my MVC view a ViewBag object which contain a list of items. These items are then added through the use of a For loop to a Javascript method called 'AddRows' which creates and adds a new HTML row to a table in the view.
The issue:
This code has worked before but I have run into an issue where I'm getting the following error:
The code:
#foreach (var cartItem in (List<LoginTest.Models.CartItem>)ViewBag.Data)
{
var cartItemId = '#cartItem.CartItemId';
var cartImage = '#cartItem.CartItemImage';
var cartItemName = '#cartItem.CartItemName';
var cartBrand = '#cartItem.CartItemBrand';
var cartItemPrice = '#cartItem.CartItemPrice';
var cartItemCartItemQty = '#cartItem.CartItemQty';
AddRows(cartItemId, cartImage, cartItemName, cartBrand, cartItemPrice, cartItemCartItemQty);
}
<script type="text/javascript">
var AddRows = function (productId, productImage, productName, productBrand, productPrice, productQty) {
var button = '<input class="btn btn-primary btn-block deleteItem" type="button" value="Remove"/>';
var image = '<img src="/Images/' + productImage + '" class="productCartImage"/>';
var selectors = '<input id="demo1" class="touchSpin" type="text" value="' + productQty + '" name="demo1">';
var $html = $('<tr class="item">' +
'<td class="prodId" style="display:none;">' + productId + '</td>' +
'<td class="prodImage hidden-xs">' + image + '</td>' +
'<td class="prodName">' + productName + '</td>' +
'<td class="prodBrand">' + productBrand + '</td>' +
'<td class="prodPrice"> £' + productPrice + '</td>' +
'<td class="prodQty TableCell">' + selectors + '</td>' +
'<td>' + button + '</td>' +
'</tr>');
$html.find("input[name='demo1']").TouchSpin({
min: 1,
max: 100,
step: 1,
});
$('#Table1 > tbody:last').append($html);
};
</script>
What I have tried so far:
Tried changing the single quote around each property of the item in the list from a single quote to a double. This will sort the string literal issue but then creates an error saying that the AddRows methed cannot be found.

Instead of
#foreach (var cartItem in (List<LoginTest.Models.CartItem>)ViewBag.Data)
{
var cartItemId = '#cartItem.CartItemId';
var cartImage = '#cartItem.CartItemImage';
var cartItemName = '#cartItem.CartItemName';
var cartBrand = '#cartItem.CartItemBrand';
var cartItemPrice = '#cartItem.CartItemPrice';
var cartItemCartItemQty = '#cartItem.CartItemQty';
AddRows(cartItemId, cartImage, cartItemName, cartBrand, cartItemPrice, cartItemCartItemQty);
}
Use this
#foreach (var cartItem in (List<LoginTest.Models.CartItem>)ViewBag.Data)
{
<text>
var cartItemId = '#cartItem.CartItemId';
var cartImage = '#cartItem.CartItemImage';
var cartItemName = '#cartItem.CartItemName';
var cartBrand = '#cartItem.CartItemBrand';
var cartItemPrice = '#cartItem.CartItemPrice';
var cartItemCartItemQty = '#cartItem.CartItemQty';
AddRows(cartItemId, cartImage, cartItemName, cartBrand, cartItemPrice, cartItemCartItemQty);
</text>
}
the <text> element tell Razor that the code shouldn't be considered as C#

Relocate this js variable declaration block inside script and force Razor interprite it as text with <text> tag. Like this:
<script type="text/javascript">
#foreach (var cartItem in (List<LoginTest.Models.CartItem>)ViewBag.Data)
{
<text>
var cartItemId = '#cartItem.CartItemId';
var cartImage = '#cartItem.CartItemImage';
var cartItemName = '#cartItem.CartItemName';
var cartBrand = '#cartItem.CartItemBrand';
var cartItemPrice = '#cartItem.CartItemPrice';
var cartItemCartItemQty = '#cartItem.CartItemQty';
AddRows(cartItemId, cartImage, cartItemName, cartBrand, cartItemPrice, cartItemCartItemQty);
</text>
}
var AddRows = function (productId, productImage, productName, productBrand, productPrice, productQty) {
var button = '<input class="btn btn-primary btn-block deleteItem" type="button" value="Remove"/>';
var image = '<img src="/Images/' + productImage + '" class="productCartImage"/>';
var selectors = '<input id="demo1" class="touchSpin" type="text" value="' + productQty + '" name="demo1">';
var $html = $('<tr class="item">' +
'<td class="prodId" style="display:none;">' + productId + '</td>' +
'<td class="prodImage hidden-xs">' + image + '</td>' +
'<td class="prodName">' + productName + '</td>' +
'<td class="prodBrand">' + productBrand + '</td>' +
'<td class="prodPrice"> £' + productPrice + '</td>' +
'<td class="prodQty TableCell">' + selectors + '</td>' +
'<td>' + button + '</td>' +
'</tr>');
$html.find("input[name='demo1']").TouchSpin({
min: 1,
max: 100,
step: 1,
});
$('#Table1 > tbody:last').append($html);
};
</script>