We Keep Coding

Weird decimals behaviour javascript Laravel

I am running across this weird issue,
So on the first input everything works correctly, but after I add the second line, when I go back and edit the first one, I cannot enter 2 decimals, it keeps bouncing.
This is how I am generating the rows on the table:
$('#postrow'+i).html("<td><input type='hidden' name='pd_id[]' value='" + (pd.id == null ? "" : pd.id) + "'><input style='text-align: right;' name='amount[]' type='text' class='number form-control amount " + numberFormat +"' id='amount" + i + "' value='" + amount + "'/></td><td><select name='pdtype[]' class='form-control pdtype' id='pdtype" + i + "'>" + htmlTypes + "</select></td><td><select name='accountcode[]' class='form-control' id='accountcode'" + i + "><option value=''>N/A</option>" + htmlCodes + "</select></td>" + applyfor + "<td>" + htmlCharges + "</td><td><input name='note[]' type='text' class='form-control' id='note" + i + "' value='" + (pd.note == null ? "" : pd.note) + "'/></td>" + removemiddle);
$('#tblpost').append('<tr id="postrow'+ (i+1) +'"></tr>');
$('input.number').number(true, 2);
// $("#services"+i).focus();
i++;

append html text from JavaScript

I have a JavaScript function that takes Id and source and alignment... and append to html element due to the input parameter.
"<TR id='" + localMessageId + "' onmouseover='visiblepointmenu(\"" + localMessageId + "\");' onmouseout='hidepointmenu(\"" + localMessageId + "\");'>" +
"<TD class='td_left noselect' nowrap='nowrap' align='right'>" + Image + "</td>" +
"<TD class='td_center' style='table-layout:fixed; direction: " + direction + ";'>" +
"<TABLE cellSpacing=0 cellPadding=0>" +
"<TR style='HEIGHT:10px; " + VisibleHiddenTime + "'>" +
"<TD><div class='noselect' style='color:DarkGray;text-align:" + float_Timer + ";font-size: 11px;'>" + Name + dateMessage.ToString("hh:mm tt") + "</div></TD>" +
"</TR > " +
"<TR>" +
"<TD id = 'menu" + localMessageId + "' oncontextmenu='window.external.Menu(\"pointMenu#3\",\"" + message + "\", \"" + localMessageId + "\");'>" +
"<TABLE cellSpacing=0 cellPadding=0 style='background-image: url(data:image/png;base64," + previewLink.image_Base64 + ");" +
"background-position: center center;width:" + previewLink.width.ToString() + "px;height:" + previewLink.height.ToString() + "px; background-repeat: no-repeat; " +
"background-size: 100% 100%; float:" + float_Timer + ";'>" +
"<TBODY>" +
"<TR style='height: 83%;'>" +
"<TD class='description' onclick=openURL('" + url + "') style='cursor:pointer;padding-left:10px;' valign='bottom' align='left'>" +
"<font color='white' style='font-size: 110%'> " + previewLink.description + "</font>" +
"</TD>" +
"</TR>" +
"<TR style='vertical-align:top;'>" +
"<TD align='left' onclick=openURL('" + url + "') style='cursor:pointer; padding-left:10px;' >" +
"<font color='white' style='font-size: 100%' >" + homelink + "</font>" +
"</TD>" +
"</TR>" +
"</TBODY>" +
"</TABLE>" +
"</TD>" +
"<TD style='vertical-align:top;'>" +
"<div style='float:" + afloat + ";'>" +
"<img id='pnt" + localMessageId + "' class='noselect' draggable='false' src='data:image/png;base64," + SharedData.PointMenu + "' style='visibility:hidden;display:none;' onclick='window.external.Menu(\"pointMenu#3\", \"" + message + "\", \"" + localMessageId + "\");' />" +
"</div>" +
"</TD>" +
"</TR>" +
"</TABLE>" +
"</TD>" +
"<TD style='width:17px;' valign='top' align='left'>" +
"<img style='margin-top: 3px;" + visibility + "' id='read" + localMessageId + "' draggable='false' class='noselect' src='data:image/png;base64," + SharedData.getMessageStatusFromEnum(messageStatus, SendingMethode == SharedData.NotificationSendingMethod.AutoReply) + "'/>" +
"</TD>" +
"</TR>";
}
else
{
new_row = "<TR id='" + localMessageId + "' onmouseover='visiblepointmenu(\"" + localMessageId + "\");' onmouseout='hidepointmenu(\"" + localMessageId + "\");'>" +
"<TD class='td_left noselect' nowrap='nowrap' align='right'>" + Image + "</td>" +
"<TD class='td_center' id='Forward" + localMessageId + "' style='table-layout:fixed;direction:" + direction + ";'>" +
"<TABLE cellSpacing=0 cellPadding=0>" +
"<TR style='HEIGHT:10px; " + VisibleHiddenTime + "'>" +
"<TD><div class='noselect' style='color:DarkGray;text-align:" + float_Timer + "; font-size: 11px;'>" + Name + dateMessage.ToString("hh:mm tt") + "</div></TD>" +
"</TR>" +
"<TR>" +
"<TD id ='link" + localMessageId + "'>" +
"<div id='menu" + localMessageId + "' class='" + classname + "' oncontextmenu='window.external.Menu(\"pointMenu#3\",\"" + message + "\", \"" + localMessageId + "\");'>" +
" <P style='table-layout:fixed;'>" + text + "</p>" +
"</div>" +
"</TD>" +
"<TD style='vertical-align:top;'>" +
"<DIV style='float:" + afloat + ";'>" +
"<img id='pnt" + localMessageId + "' class='noselect' draggable='false' src='data:image/png;base64," + SharedData.PointMenu + "' style='visibility:hidden;display:none;');' onclick='window.external.Menu(\"pointMenu#3\", \"" + message + "\", \"" + localMessageId + "\");' />" +
"</DIV>" +
"</TD>" +
"</TR>" +
"</TABLE>" +
"</TD>" +
"<TD style='width:17px;' valign='top' align='left'>" +
"<img style='margin-top: 3px;" + visibility + "' id='read" + localMessageId + "' draggable='false' class='noselect' src='data:image/png;base64," + SharedData.getMessageStatusFromEnum(messageStatus, SendingMethode == SharedData.NotificationSendingMethod.AutoReply) + "'/>" +
"</TD>" +
"</TR>"
my problem is that id and all image sources and even some classes should be added at runtime from the function
I need a way better then concatenation because my code will be ugly if I type + every time
or want to know what is the best Practice

AngularJS: function not defined error when html is generated from Javascript

I amd dynamically generating my edit table from javaScript. But function mentioned via it are not recognaizeable from AngularJS, for that, I am not able to remove and edit my rows.
Here HvacStandards() and checkemail() and showInvite() are only working. for other's i am getting following exception in chorom console:
Errors:
Uncaught ReferenceError: editRow is not defined
Uncaught ReferenceError: deleteRow is not defined
AngularJs code
$scope.HvacStandards = function () {
var rowID = $scope.newRow;
if ($scope.currentRow > 0) {
saveEdits();
} else {
var teamName = $("#teamName").val();
var email = $("#email").val();
var sHtml = "<tr id='row"+rowID+"'>"
+ "<td id=\"tno" + rowID + "\">" + rowID
+ "</td>"
+ "<td id=\"tName" + rowID + "\">" + teamName
+ "</td>" + "<td id=\"mail" + rowID + "\">" + email
+ "</td>" + "<td><button onclick='editRow(" + rowID
+ ")'>Edit</button> " + "<button onclick='deleteRow("
+ rowID + ")'>Delete</button>" + "</tr>";
$("#inviteTable").append(sHtml);
$scope.newRow++;
$("#teamName,#email").val("");
$scope.emails[$scope.number]=$scope.formData.email;
}
};
$scope.editRow = function(rowID) {
$('#teamName').val($('#tName' + rowID).html());
$('#email').val($('#mail' + rowID).html());
$scope.currentRow = rowID;
};
$scope.saveEdits = function (){
$('#teamName' + currentRow).html($('#tName').val());
$('#email' + currentRow).html($('#mail').val());
$("#teamName,#email").val("");
$scope.currentRow = -1;
};
$scope.deleteRow = function (rowID) {
$('#row' + rowID).remove();
};
$scope.showInvite = function(){
$scope.show = true;
$scope.formData = {};
};
and my html is like following:
<div name="showInviteDiv" id="showInviteDiv">
<a ng-click="showInvite()" ng-show="!show">Invite a Team</a>
</div>
<div class="invite-form" name="inviteTeamDiv" id="inviteTeamDiv" ng-show="show">
<form ng-submit="HvacStandards()" novalidate class="css-form"
name='inviteTeamsForm'>
<div>
<input type="text" name="teamName" ng-model="formData.teamName" id="teamName"
placeholder="Team Name" style="width: 38%;" required="required"
ng-minlength="6" ng-maxlength="30">
<input
type="text" name="email" ng-model="formData.email" id="email"
placeholder="Email" style="width: 38%;" required="required"
ng-pattern="/^[a-z]+[a-z0-9._]+#[a-z]+\.[a-z.]{2,5}$/" ng-change="checkEmail(form Data.email)" ng-blur="checkEmail(formData.email)">
</div>
<div>
<input type="submit" value="Invite Team"
ng-disabled="inviteTeamsForm.$invalid || isEmailExists"> or <a ng-click="hideInvite()">I'm done sending invites</a>
</div>

In the Table that you are creating, you used onclick instead of ng-click. You need to use ng-click in order to use scope function.
So your HvacStandards function will look like this:
$scope.HvacStandards = function () {
var rowID = $scope.newRow;
if ($scope.currentRow > 0) {
saveEdits();
} else {
var teamName = $("#teamName").val();
var email = $("#email").val();
var sHtml = "<tr id='row"+rowID+"'>"
+ "<td id=\"tno" + rowID + "\">" + rowID
+ "</td>"
+ "<td id=\"tName" + rowID + "\">" + teamName
+ "</td>" + "<td id=\"mail" + rowID + "\">" + email
+ "</td>" + "<td><button ng-click='editRow(" + rowID
+ ")'>Edit</button> " + "<button ng-click='deleteRow("
+ rowID + ")'>Delete</button>" + "</tr>";
$("#inviteTable").append(sHtml);
$scope.newRow++;
$("#teamName,#email").val("");
$scope.emails[$scope.number]=$scope.formData.email;
}
};

$scope.HvacStandards = function () {
var rowID = $scope.newRow;
if ($scope.currentRow > 0) {
saveEdits();
} else {
var teamName = $("#teamName").val();
var email = $("#email").val();
var sHtml = "<tr id='row"+rowID+"'>"
+ "<td id=\"tno" + rowID + "\">" + rowID
+ "</td>"
+ "<td id=\"tName" + rowID + "\">" + teamName
+ "</td>" + "<td id=\"mail" + rowID + "\">" + email
+ "</td>" + "<td><button ng-click='editRow(" + rowID
+ ")'>Edit</button> " + "<button ng-click='deleteRow("
+ rowID + ")'>Delete</button>" + "</tr>";
//$("#inviteTable").append(sHtml); // don't do this
// use compile in following manner
$("#inviteTable").append(
$compile(sHtml)($scope)
);
$scope.newRow++;
$("#teamName,#email").val("");
$scope.emails[$scope.number]=$scope.formData.email;
}
};

try this
$scope.HvacStandards = function () {
var rowID = $scope.newRow;
if ($scope.currentRow > 0) {
saveEdits();
} else {
var teamName = $("#teamName").val();
var email = $("#email").val();
var sHtml = "<tr id='row"+rowID+"'>"
+ "<td id=\"tno" + rowID + "\">" + rowID
+ "</td>"
+ "<td id=\"tName" + rowID + "\">" + teamName
+ "</td>" + "<td id=\"mail" + rowID + "\">" + email
+ "</td>" + "<td><button ng-click='editRow(" + rowID
+ ")'>Edit</button> " + "<button ng-click='deleteRow("
+ rowID + ")'>Delete</button>" + "</tr>";
// $compile(sHtml)($scope) aissign to variable:
let shown = $compile(sHtml)($scope);
$("#inviteTable").append(
shown;
);
$scope.newRow++;
$("#teamName,#email").val("");
$scope.emails[$scope.number]=$scope.formData.email;
}
};

How to put a string in input type="text" with jQuery?

I don't understand why my code doesn't work: I try to put a string into input type="text" with jQuery and it doesn't work. It separates different elements of the string when there are space in properties for the input.
My jQuery Code:
<script type="text/javascript">
$(document).ready(function() {
$(".btnEditSerie").click(function (e) {
e.preventDefault();
var tr = $(this).closest('tr');
var $GroupingId = tr.find('#item_GroupingId').val()
localStorage['GroupingId'] = $GroupingId;
var $Title = tr.find('#item_Title').val();
var $Description = tr.find('#item_Description').val();
var $Image = tr.find('#item_Image').val();
$("#b").hide("slow");
$("#btnretour").show();
$('#SerieEdit').append("<label id=" + 'test2' + ">" + "Modification de :" + " " + $Title+ "</label>");
$('#TextEdit').html("<label>" + "Titre :" + " " + "</label>" + "<input type=" + 'text' + " value=" + $Title + " id=" + 'SerieNewName' + " />"
+ "<label>" + "Description :" + " " + "</label>" + "<input type=" + 'text' + " value=" + $Description.toString() + " id=" + 'SerieNewDescription' + "/>"
+ "<label>" + "Image :" + " " + "</label>" + "<input type="+'file'+" value="+$Image.toString()+ " id=" +'SerieNewImage'+"/>");
$("#SerieEdit").show();
$("#TextEdit").show();
})
$('#btnRet').click(function() {
$("#b").show("slow");
$("#SerieEdit").hide();
$("#TextEdit").hide();
$("#SerieEdit").empty();
$("#TextEdit").empty();
$("#btnretour").hide();
})
});
</script>
With val(), for instance $Title must be a string, and when i put $Title in the .Append() it returns a thing like that:
My sad html code:
<h2>EditRefSerie</h2>
<div id="SerieEdit">
<div id="TextEdit">
<label>Titre : </label>
<input id="SerieNewName" type="text" thrones="" of="" value="Games">
<label>Description : </label>
<input id="SerieNewDescription/" type="text" thrones="" of="" value="games">
<label>Image : </label>
<input id="SerieNewImage/" type="file" value="Dessin1.jpg">
</div>
<div id="btnretour" style="">
For the string "Games of thrones" it returns:
<input id="SerieNewName" type="text" thrones="" of="" value="Games">
Have you ideas how to fix it? Do I use jQuery correctly?

You're forgetting quotes:
Your JS:
$('#TextEdit').html("<label>" + "Titre :" + " " + "</label>" + "<input type=" + 'text' + " value=" + $Title + " id=" + 'SerieNewName' + " />"
+ "<label>" + "Description :" + " " + "</label>" + "<input type=" + 'text' + " value=" + $Description.toString() + " id=" + 'SerieNewDescription' + "/>"
+ "<label>" + "Image :" + " " + "</label>" + "<input type="+'file'+" value="+$Image.toString()+ " id=" +'SerieNewImage'+"/>");
Should be:
$('#TextEdit').html("<label>" + "Titre :" + " " + "</label>" + "<input type=" + 'text' + " value='" + $Title + "' id=" + 'SerieNewName' + " />"
+ "<label>" + "Description :" + " " + "</label>" + "<input type=" + 'text' + " value='" + $Description.toString() + "' id=" + 'SerieNewDescription' + "/>"
+ "<label>" + "Image :" + " " + "</label>" + "<input type="+'file'+" value='"+$Image.toString()+ "' id=" +'SerieNewImage'+"/>");
Note the added quotes for the value attributes.
Bonus tip: there's no need to put input types in a concatenated string. It's much more readable if you do:
"<input type='text' value='" + val + "' />"
instead of:
"<input type='" + 'text' + "' value='" + val + "' />"
like you're doing.

You aren't using quotes around your attributes properly e.g.
$('#SerieEdit').append("<label id='" + test2 + "'>" + "Modification de :" + " " + $Title+ "</label>");

ID is unique in HTML page. So you don't need to "find" for retrieve your value.
Also, the variable don't need a "$"
Do something like:
$(document).ready(function () {
$(".btnEditSerie").click(function (e) {
e.preventDefault();
var GroupingId = $('#item_GroupingId').val(); // not need to find if you have a id.. id is unique in the HTML page.
localStorage['GroupingId'] = $GroupingId;
var Title = $('#item_Title').val();
var Description = $('#item_Description').val();
var Image = $('#item_Image').val();
$("#b").hide("slow");
$("#btnretour").show();
$('#SerieEdit').append("<label id='test2'>Modification de : " + Title + "</label>");
$('#TextEdit').html("<label>Titre : </label> <input type='text' value=" + Title + " id='SerieNewName' /> <label> Description : </label><input type='text' value=" + Description + " id='SerieNewDescription'/><label>Image : </label><input type='file' value="+ Image + " id='SerieNewImage'/>");
$("#SerieEdit").show();
$("#TextEdit").show();
});
$('#btnRet').click(function(){
$("#b").show("slow");
$("#SerieEdit").hide();
$("#TextEdit").hide();
$("#SerieEdit").empty();
$("#TextEdit").empty();
$("#btnretour").hide();
})
});

why this javascript function is not executing, no error in console

This function is a problem:
function addInvoiceItemValue(name,pkwiu,netto,unit,qty,vat) {
if(vat == '23') v23 = " selected='selected'";
if(vat == '22') v22 = " selected='selected'";
if(vat == '8') v8 = " selected='selected'";
if(vat == '7') v7 = " selected='selected'";
if(vat == '5') v5 = " selected='selected'";
if(vat == '3') v3 = " selected='selected'";
if(vat == '0') v0 = " selected='selected'";
if(vat == 'zw') vzw = " selected='selected'";
var vatSelect = "<option value='23'"+v23+">23%</option><option value='22'"+v22+">22%</option><option value='8'"+v8+">8%</option><option value='7'"+v7+">7%</option><option value='5'"+v5+">5%</option><option value='3'"+v3+">3%</option><option value='0'"+v0+">0%</option><option value='zw'"+vzw+">zw.</option>";
var row = "<tr id='item" + itemID + "'><td><input size='30' maxlength='300' id='ii-name-" + itemID + "' name='ii-name-" + itemID + "' value='" + name + "'></td>";
row += "<td><input size='6' maxlength='50' id='ii-pkwiu-" + itemID + "' name='ii-pkwiu-" + itemID + "' value='"+pkwiu+"'></td>";
row += "<td><input size='6' maxlength='16' id='ii-netto-" + itemID + "' name='ii-netto-" + itemID + "' value='"+netto+"'></td>";
row += "<td><input size='5' maxlength='128' id='ii-unit-" + itemID + "' name='ii-unit-" + itemID + "' value='"+unit+"'></td>";
row += "<td><input size='5' maxlength='6' id='ii-qty-" + itemID + "' name='ii-qty-" + itemID + "' value='"+qty+"'></td>";
row += "<td><select id='ii-vat-" + itemID + "' name='ii-vat-" + itemID + "'>" + vatSelect + "</select></td>";
row += "<td><a onclick='delInvoiceItem(\"item" + itemID + "\")'><b>-</b> Usuń</a></td></tr>";
$('#invoiceItems tr:last').after(row);
itemID++;
}
Example execution:
addInvoiceItemValue('yyy','','676.76','','1','23');
addInvoiceItemValue('fgh','','777.00','','1','8');
And here is function that work's fine:
function addInvoiceItem() {
var vatSelect = "<option value='23'>23%</option><option value='22'>22%</option><option value='8'>8%</option><option value='7'>7%</option><option value='5'>5%</option><option value='3'>3%</option><option value='0'>0%</option><option value='zw'>zw.</option>";
var row = "<tr id='item" + itemID + "'><td><input size='30' maxlength='300' id='ii-name-" + itemID + "' name='ii-name-" + itemID + "' value=''></td>";
row += "<td><input size='6' maxlength='50' id='ii-pkwiu-" + itemID + "' name='ii-pkwiu-" + itemID + "' value=''></td>";
row += "<td><input size='6' maxlength='16' id='ii-netto-" + itemID + "' name='ii-netto-" + itemID + "' value='0'></td>";
row += "<td><input size='5' maxlength='128' id='ii-unit-" + itemID + "' name='ii-unit-" + itemID + "' value=''></td>";
row += "<td><input size='5' maxlength='6' id='ii-qty-" + itemID + "' name='ii-qty-" + itemID + "' value='1'></td>";
row += "<td><select id='ii-vat-" + itemID + "' name='ii-vat-" + itemID + "'>" + vatSelect + "</select></td>";
row += "<td><a onclick='delInvoiceItem(\"item" + itemID + "\")'><b>-</b> Usuń</a></td></tr>";
$('#invoiceItems tr:last').after(row);
itemID++;
}

The v23, v22, v8, v7, v5, v3, v0, vzw and itemdID are not always defined in all code paths.
This causes the script to fail.
You should change your function to
function addInvoiceItemValue(name,pkwiu,netto,unit,qty,vat) {
var vats = ['23','22','8','7','5','3','0','zw'];
var vatSelect = '';
for (var i = 0; i < vats.length; i++)
{
vatSelect += '<option value="'+vats[i]+'"';
if (vat == vats[i])
vatSelect += ' selected="selected"';
vatSelect += '>'+vats[i] + '%</option>';
}
var row = "<tr id='item" + itemID + "'><td><input size='30' maxlength='300' id='ii-name-" + itemID + "' name='ii-name-" + itemID + "' value='" + name + "'></td>";
row += "<td><input size='6' maxlength='50' id='ii-pkwiu-" + itemID + "' name='ii-pkwiu-" + itemID + "' value='"+pkwiu+"'></td>";
row += "<td><input size='6' maxlength='16' id='ii-netto-" + itemID + "' name='ii-netto-" + itemID + "' value='"+netto+"'></td>";
row += "<td><input size='5' maxlength='128' id='ii-unit-" + itemID + "' name='ii-unit-" + itemID + "' value='"+unit+"'></td>";
row += "<td><input size='5' maxlength='6' id='ii-qty-" + itemID + "' name='ii-qty-" + itemID + "' value='"+qty+"'></td>";
row += "<td><select id='ii-vat-" + itemID + "' name='ii-vat-" + itemID + "'>" + vatSelect + "</select></td>";
row += "<td><a onclick='delInvoiceItem(\"item" + itemID + "\")'><b>-</b> Usuń</a></td></tr>";
$('#invoiceItems tr:last').after(row);
itemID++;
}
but the itemID also has to be defined.

When is it SUPPOSED to be executing?
While this technically bad coding practice, test with this:
<a href='#' onClick="javascript: function('value');" > Click Me </a>
If you click, and it still doesn't work, it is an issue with your function. If you click and it works, the function is never being called in the first place.

You should also check your selector.
$('#invoiceItems tr:last').after(row);
Try adding it in a simpler place. Make another div,...
Then use the selector $('#result');
In any case, if your selector is bad, it will never execute and it won't throw an error b/c it never had cause to do what you told it. Now that I think about it, I think this is the issue.
Do me a favor and try
$('#invoiceItems tr:last').each(alert('exist???'));
If it doesn't alert, your selector is most likely not working. (For each thing that meets the criteria , do an alert)