Weird decimals behaviour javascript Laravel - javascript

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++;

Related

Unable to solve this error : Unclosed String

I am unable to solve a syntax error. Unclosed string is the error when i am trying to validate it.
function addNewCultureRow($row, $case, $specimen) {
var $uniqueID = "." + $row + $case + "." + $specimen;
var $tableRows = "<tr><td>" + $row + "<td><input id='localLevel" + $uniqueID + '" type="edit">' +
"<td><input id='colony" + $uniqueID + '" type="edit">' +
"<td><input id='description" + $uniqueID + '" type="edit">' +
"<td><input id='oxidase" + $uniqueID + '" type="edit">' +
"<td><input id='isolation1" + $uniqueID + '" type="edit">' +
"<td><input id='isolation2" + $uniqueID + '" type="edit">' +
"<td><input id='bioChemComments" + $uniqueID + '" type="edit">' +
"<td><input id='IDMALDI" + $uniqueID + '" type="edit">' +
"<td><input id='sensiID" + $uniqueID + '" type="edit">' +
"<td><input id='organism-" + $case + "-" + $specimen + "544' type='select'>" +
"<td><input id='localComments" + $uniqueID + '" type="edit">' +
"<td><input id='comments-" + $case + "-" + $specimen + "-544-new' type='edit'>" +
"<td><input id='result-" + $case + "-" + $specimen + "544-new' type='select'>";
return ($tableRows);
}
I think this is coming from this lines
"<td><input id='colony"
You need to close the inner quote.
Thakur was correct in his response, that you have ' and " mixed up a few times. If you want to avoid this sort of issue in the future, you might want to consider using template strings, for example:
var $tableRows = `<tr><td>${$row}<td><input id='localLevel ${$uniqueID}' type="edit">
<td><input id='colony ${$uniqueID}' type="edit">
<td><input id='description ${$uniqueID}' type="edit">
<td><input id='oxidase ${$uniqueID}' type="edit">
<td><input id='isolation1 ${$uniqueID}' type="edit">
<td><input id='isolation2 ${$uniqueID}' type="edit">
<td><input id='bioChemComments ${$uniqueID}' type="edit">
<td><input id='IDMALDI ${$uniqueID}' type="edit">
<td><input id='sensiID ${$uniqueID}' type="edit">
<td><input id='organism-${$case}-${$specimen}-544' type='select'>
<td><input id='localComments ${$uniqueID}' type="edit">
<td><input id='comments-${$case}-${$specimen}-544-new' type='edit'>
<td><input id='result-${$case}-${$specimen}-544-n' type='edit'>
`;
Reverse all '" to "' and type="edit" should be type='edit' like this:
function addNewCultureRow($row, $case, $specimen) {
var $uniqueID = "." + $row + $case + "." + $specimen;
var $tableRows = "<tr><td>" + $row + "<td><input id='localLevel" + $uniqueID + "' type='edit'>" +
"<td><input id='colony" + $uniqueID + "' type='edit'>" +
"<td><input id='description" + $uniqueID + "' type='edit'>" +
"<td><input id='oxidase" + $uniqueID + "' type='edit'>" +
"<td><input id='isolation1" + $uniqueID + "' type='edit'>" +
"<td><input id='isolation2" + $uniqueID + "' type='edit'>" +
"<td><input id='bioChemComments" + $uniqueID + "' type='edit'>" +
"<td><input id='IDMALDI" + $uniqueID + "' type='edit'>" +
"<td><input id='sensiID" + $uniqueID + "' type='edit'>" +
"<td><input id='organism-" + $case + "-" + $specimen + "544' type='select'>" +
"<td><input id='localComments" + $uniqueID + "' type='edit'>" +
"<td><input id='comments-" + $case + "-" + $specimen + "-544-new' type='edit'>" +
"<td><input id='result-" + $case + "-" + $specimen + "544-new' type='select'>";
return ($tableRows);
}

I am trying to create a dynamic table. i want to get the number of rows equal to the number that user enters in the box

my problem is that i can not set an id for the input or a value. Because the input is inside JavaScript how can i call it ? and i want the values of the input change each time i enter a certain number.
i would like to see the values of the first column change, so if the user enter number four that means there are 4 lights.
function createTable() {
var a;
a = document.getElementById('number1').value;
if (a == 2 || a == 1 || a < 0) {
alert("Please enter a positive number greater than 2");
} else {
var rows = "<th>Light </th><th>Rating(W)</th><th>Span-from prev.light-(m)</th><th>Voltage Drop (v)</th><th>Voltage Drop( % ) </th>";
for (var i = 0; i < a; i++) {
rows += "<tr><td><input type='number' id=frt name='" + "Light".concat(i + 1) + "' id=li></td><td><input type='number' value=250 name='" + "Rating(W)".concat(i + 1) + "'><td><input type='number' value=40 name='" + "Span-from prev.light-(m)".concat(i + 1) + "'></td><td><input type='number' name='" + "Voltage Drop (v)".concat(i + 1) + "'></td><td id='amt'><input type='number' id='sum' onkeyup='myfunction(this.value);' name = '" + "Voltage Drop(%)".concat(i + 1) + "'> </td></tr >";
}
}
document.getElementById("table").innerHTML = rows;
}
<!DOCTYPE html>
<html>
<body>
<table cellpadding="1" cellspacing="1" border="1" id="table" style="font: 20px solid bold;font-weight: bold; background-color:#707B7C;color:black;"></table>
<input type="number" name="Numbers of Lights" id="number1" oninput="createTable()" value="3" style="width:40px; position: absolute;
top:300px; left:800px;">
</div>
</body>
</html>
If change the line to this
rows += "<tr><td><input value='" + (i + 1) + "' type='number' id=frt name='" + "Light".concat(i + 1) + "' id=li></td><td><input type='number' value=250 name='" + "Rating(W)".concat(i + 1) + "'><td><input type='number' value=40 name='" + "Span-from prev.light-(m)".concat(i + 1) + "'></td><td><input type='number' name='" + "Voltage Drop (v)".concat(i + 1) + "'></td><td id='amt'><input type='number' id='sum' onkeyup='myfunction(this.value);' name = '" + "Voltage Drop(%)".concat(i + 1) + "'> </td></tr >";
you can get the iteration as a value in the first column.

Jquery populate list freak error

I'm facing a freak problem in jquery. When I try to populate a list from a table it becomes empty if it contains a special character like sid'ahmed. When I change it to sidi ahmed it works perfectly. This is my code to populate two lists:
$.getJSON("get-data.php?dat=driver", function(data) {
var stringToAppend1 = "<option value='" + day_Shift + "'>" + day_Shift + "</option>";
var stringToAppend2 = "<option value='" + night_Shift + "'>" + night_Shift + "</option>";
$.each(data, function(key, val) {
stringToAppend1 += "<option value='" + val.prenom + " / " + val.nom + " : " + val.telephone + "'>" + val.prenom + " / " + val.nom + " : " + val.telephone + "</option>";
stringToAppend2 += "<option value='" + val.prenom + " / " + val.nom + " : " + val.telephone + "'>" + val.prenom + " / " + val.nom + " : " + val.telephone + "</option>";
});
$("#night_Shift_text" + id).html(stringToAppend2);
$("#day_Shift_text" + id).html(stringToAppend1);
});
You should escape the single quote by using replace function as shown below. Use this replace whereever needed.
day_Shift = day_Shift.replace(/'/g, "\\'");
Hope this helps!!

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)

Categories