Unterminated String Literal Error Message - javascript

I know its been asked hundreds of times, but in this specific case, after an hour of searching, i cant spot the reason behind the erro "untermiated string literal". Heres my code..
newRow.innerHTML = '<td>1</td><td><input type="text" name="quantity' + (num) + '" size="5" /></td><td><input type="text" name="description' + (num) + '" size="50"/></td><td>$<input type="text" name="price' + (num) + '" size="5" /></td><td><input type="text" name="catalognum' + (num) + '" onChange="addRow()"/></td><a class="removelink" onclick=\'removeElement(' + rowIdName + ')\'>Remove This File<

Try to add :
/a>';
at the end of your code

Related

Replace characters with javascript at onkeyup [duplicate]

This question already has answers here:
How to convert a number with comma as string into float number in Javascript
(2 answers)
Closed 2 years ago.
When i type in the price to the input, i want to change "," to ".", because i enter decimal numbers.
What am i doing wrong? Whit this function, i always get NaN.
If i try alert or something for test, that works fine.
function change_characters(where)
{
return where.replace(",", ".");
//return min_.replace(/,/g, ".");
}
function szorzas( sor_id )
{
termek_netto_egyseg_ar = $('#termek_netto_egyseg_ar-'+sor_id).val();
ajanlat_termek_mennyiseg = $('#ajanlat_termek_mennyiseg-'+sor_id).val();
rosszeg = ajanlat_termek_mennyiseg * termek_netto_egyseg_ar;
$("#termek_netto_reszosszeg-"+sor_id).val(rosszeg);
termek_netto_egyseg_ar = change_characters(termek_netto_egyseg_ar);
count_ossz_netto();
}
I add the html with javascript, and on the inputs, i call the szorzas() function.
function addsav_melleklet()
{
html = '<tr id="sav_row_melleklet' + sav_row_melleklet + '">';
html += '<td class="left"><div class="bc-wrapper"><input type="hidden" id="termek_id-'+sav_row_melleklet+'" name="ajanlat_termek_id[' + sav_row_melleklet + ']" value="" /> <input required type="text" autocomplete="off" class="form-control" name="ajanlat_termek_nev[' + sav_row_melleklet + ']" id="ajanlat_termek_nev-' + sav_row_melleklet + '" onKeyUp="autocomplet_search(' + sav_row_melleklet + ');" /><div class="bc-menu list-group country_list_id" id="country_list_id' + sav_row_melleklet + '"></div></div></td>';
html += '<td class="left"><input required type="text" class="form-control csere" id="ajanlat_termek_mennyiseg-'+sav_row_melleklet+'" onKeyUp="szorzas(' + sav_row_melleklet + ')" onchange="szorzas(' + sav_row_melleklet + ')" name="ajanlat_termek_mennyiseg[' + sav_row_melleklet + ']" /></td>';
html += '<td class="left"><input required type="text" class="form-control csere termek_netto_egyseg_ar" id="termek_netto_egyseg_ar-'+sav_row_melleklet+'" onKeyUp="szorzas(' + sav_row_melleklet + ')" onchange="szorzas(' + sav_row_melleklet + ')" name="ajanlat_termek_netto_egyseg_ar[' + sav_row_melleklet + ']" /></td>';
html += '<td class="left"><input required type="text" class="form-control termek_netto_reszosszeg" id="termek_netto_reszosszeg-'+sav_row_melleklet+'" name="ajanlat_termek_netto_ertek[' + sav_row_melleklet + ']" /></td>';
html += '<td class="right"><a class="btn btn-sm btn-danger" onclick="remove_sor('+sav_row_melleklet+');"><span class="glyphicon glyphicon-trash"></span></a></td>';
html += '</tr>';
$('#sav_melleklet_tbody').append(html);
sav_row_melleklet++;
}
your replace function, replaces only the first occurences, if you want to replace all occurence you have to use regexp:
function change_characters(where)
{
return where.replace(/,/g, ".");
//return where.replace(",", "."); <-- replace only first occurence
}

How to check whether the input name contains specific value using if loop in jquery

i have a table with values. some of values ends with specific string so i want to check whether input name attribute contains specific string using if loop.
i have tried using below code but it is not working:
$("#tabTax tbody tr").each(function () {
if (this.name.endswith('taxtype')) {
$(this).replaceWith('<tr id="rowTax' + $(this).find("input[name$='taxtype']").val() + '><td hidden="hidden"></td><td> ' + $(this).find("input[name$='taxtype']").val() + '(' + parseFloat($(this).find("input[name$='Taxperce']").val()) + '%)</td><td><input type="text" name= Bookingtax[' + rowcount + '].TaxAmount disabled="disabled" class="form-control chargesinputfield" value=' + ($(this).find("input[name$='Taxperce']").val() * sum / 100).toFixed(2) + '></input></td><td hidden="hidden"><input name=Bookingtax[' + rowcount + '].TaxID id=' + $(this).find("input[name$='TaxID']").val() + ' type="text" class="form-control" value=' + $(this).find("input[name$='TaxID']").val() + ' ></input></td><td hidden="hidden"><input name=Bookingtax[' + rowcount + '].taxtype id=' + $(this).find("input[name$='taxtype']").val() + ' type="text" class="form-control" value=' + $(this).find("input[name$='taxtype']").val() + ' ></input></td><td hidden="hidden"><input name=Bookingtax[' + rowcount + '].Taxperce id=' + $(this).find("input[name$='Taxperce']").val() + ' type="text" class="form-control" value=' + $(this).find("input[name$='Taxperce']").val() + ' ></input></td><td hidden="hidden"><input name=Bookingtax[' + rowcount + '].TaxAmount id=' + $(this).find("input[name$='TaxAmount']").val() + ' type="text" class="form-control" value=' + ($(this).find("input[name$='Taxperce']").val() * sum / 100).toFixed(2) + ' ></input></td></tr>')
rowcount++;
} else {
$("#discountrate").replaceWith('<tr id="discountrate"><td> Discount</td><td hidden="hidden"></td><td><input type="text" name="Discountrate" id="txtDiscountrate" class="form-control chargesinputfield" value="' + $("#txtDiscountrate").val() + '"></input></td><td hidden="hidden"><input name=Bookingtax[' + rowcount + '].Taxperce id=' + $(this).find("input[name$='Taxperce']").val() + ' type="text" class="form-control" value=' + $(this).find("input[name$='Taxperce']").val() + ' ></input></td><td hidden="hidden"><input name=Bookingtax[' + rowcount + '].TaxAmount id=' + $(this).find("input[name$='TaxAmount']").val() + ' type="text" class="form-control" value=' + ($(this).find("input[name$='Taxperce']").val() * sum / 100).toFixed(2) + ' ></input></td></tr>')
}
})
I tried with this if (this.name.endswith('taxtype')), but it is not working.
Please help. Thanks in advance...
Try use $(this).is("[name$=taxtype]")
This will check if the name ends with the string taxtype ( $= means ends with)
Demo
$("#tabTax tr").each(function() {
if ($(this).is("[name$=taxtype]")) {
console.log("name ends with taxtype")
if ($(this).is("[name=taxtype]")) {
console.log("this only match taxtype")
}
} else {
console.log("name does not ends with taxtype")
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tabTax">
<tr></tr>
<tr name="taxtype"></tr>
<tr></tr>
<tr name="somethingtaxtype"></tr>
</table>

Issue with rendering javascript with javascript

Basically I've had a headache trying to solve this, I want to create a few controls with JS (using jquery) but I also want to add a remove button for them, my attempt is below:
html:
<div class=col-lg-6>
<h1>Pieces</h1>
<form method=post>
<div id=pieces></div>
<button class='btn btn-success' id=addpiece>Add Piece</button>
<button class='btn btn-primary'>Submit</button>
</form>
</div>
And the JS:
$(document).ready(function(){
var counter = 1;
$("#addpiece").click(function (e) {
$("#pieces").append('<label>Piece ' + counter + ': </label><br>' +
'<p id=added'+counter+'><div class=row><div class=col-lg-2><label>Dimensions:</label></div>' +
'<div class=col-lg-10><input min=0 step=0.1 style=width:70px; type="number" name="width' +
counter + '" required>cm x ' +
'<input min=0 step=0.1 style=width:70px; type="number" name="height' +
counter + '" required>cm x ' +
'<input min=0 step=0.1 style=width:70px; type="number" name="length' +
counter + '" required>cm</div></div>' +
'<div class=row><div class=col-lg-2><label>Weight:</label></div>' +
'<div class=col-lg-10><input min=0.001 step=0.001 style=width:70px; type="number" name="weight' +
counter + '" required>KG<br>' +
'<input type=hidden name=counter value=' +
counter + '><button class="btn btn-danger" id="remove' + counter + '">X</button>\<script type="text\/javascript"\>' +
'$("#remove' + counter + '").click(function (e) { $( "#added'+counter+'" ).remove(); return false; } \<\/script\>' +
'</div></div></p><br>');
counter++;
return false;
});
});
Check out my fiddle for clearer view:
http://jsfiddle.net/c1Lv7ska/
Since you are dynamically creating the remove button, use event delegation to register the remove handler.
Also it is better if you have a container element which will contain all the elements for a piece, like the one I added(<div class="piece">) to wrap all the elements.
$(document).ready(function () {
var counter = 1;
$("#addpiece").click(function (e) {
$("#pieces").append('<div class="piece"><label>Piece ' + counter + ': </label><br>' + '<p id=added' + counter + '><div class=row><div class=col-lg-2><label>Dimensions:</label></div>' + '<div class=col-lg-10><input min=0 step=0.1 style=width:70px; type="number" name="width' + counter + '" required>cm x ' + '<input min=0 step=0.1 style=width:70px; type="number" name="height' + counter + '" required>cm x ' + '<input min=0 step=0.1 style=width:70px; type="number" name="length' + counter + '" required>cm</div></div>' + '<div class=row><div class=col-lg-2><label>Weight:</label></div>' + '<div class=col-lg-10><input min=0.001 step=0.001 style=width:70px; type="number" name="weight' + counter + '" required>KG<br>' + '<input type=hidden name=counter value=' + counter + '><button type="button" class="btn btn-danger remove" id="remove' + counter + '">X</button>' + '</div></div></p><br></div>');
counter++;
return false;
});
$("#pieces").on('click', '.remove', function(){
$(this).closest('.piece').remove()
})
});
Also read
Event binding on dynamically created elements?
Demo: Fiddle

getElementById not returning proper value (maybe syntax issue?)

I am using XSL to write this page, and when I hit a checkbox it sends the information to my javascript function. This all works in IE, but Chrome it does not. The problem is, after I hit the checkbox, the field comes back as "undefined" like so
<div id="Part1" value="0-SER-MN">undefined</div>
Where it is initially like
<div id="Part1" value="0-SER-MN">0-SER-MN</div>
My guess would be that the value being returned is "null" but I don't know why? Can anyone help? Thanks.
<td colspan="2">
<div>
<xsl:attribute name="id">Part<xsl:value-of select="position()"/></xsl:attribute>
<xsl:attribute name="value"><xsl:value-of select="Part"/></xsl:attribute>
<xsl:if test="ErrorMessage">
<input type="hidden" name="partNumber">
<xsl:attribute name="value"><xsl:value-of select="Part"/></xsl:attribute>
</input>
<input type="hidden" name="TempKey">
<xsl:attribute name="value"><xsl:value-of select="TempKey"/></xsl:attribute>
</input>
</xsl:if>
<xsl:value-of select="./Part"></xsl:value-of>
</div>
</td>
SO here is the javascript that is selected with the checkbox
function turnOnOrder(index, tempKey)
{
document.getElementById('Part' + index).innerHTML = '<input type="hidden" name="partNumber" value="' + document.getElementById('Part' + index).value + '"></input> <input type="hidden" name="TempKey" value="' + tempKey + '"/>' + document.getElementById('Part' + index).value;
document.getElementById('Location' + index).innerHTML = '<input type="hidden" name="location" value="' + document.getElementById('Location' + index).value + '"></input> ' + document.getElementById('Location' + index).value;
document.getElementById('Site' + index).innerHTML = '<input type="hidden" name="siteCode" value="' + document.getElementById('Site' + index).value + '"></input> ' + document.getElementById('Site' + index).value;
document.getElementById('PONumber' + index).innerHTML = '<input type="hidden" name="origPO" value="' + document.getElementById('PONumber' + index).value + '"></input><input size="20" maxlength="20" type="text" name="PONumber" value="' + document.getElementById('PONumber' + index).value + '"></input>';
document.getElementById('Quantity' + index).innerHTML = '<input type="hidden" name="OrderQty" value="' + document.getElementById('Quantity' + index).value + '"></input> ' + document.getElementById('Quantity' + index).value;
if(document.getElementById('viewPrice') == null)
document.getElementById('Price' + index).innerHTML = '<input type="hidden" name="Price" value="' + document.getElementById('Price' + index).value + '"></input> ';
else
document.getElementById('Price' + index).innerHTML = '<input type="hidden" name="Price" value="' + document.getElementById('Price' + index).value + '"></input> ' + document.getElementById('Price' + index).value;
document.getElementById('UserId' + index).innerHTML = '<input type="hidden" name="UserId" value="' + document.getElementById('UserId' + index).value + '"></input> ';
//document.getElementById('InactiveOverride' + index).innerHTML = '<input type="hidden" name="InactiveOverride" value="' + document.getElementById('InactiveOverride' + index).value + '"/>';
//document.getElementById('MpqMoqOverride' + index).innerHTML = '<input type="hidden" name="MpqMoqOverride" value="' + document.getElementById('MpqMoqOverride' + index).value + '"/>';
document.getElementById('Other' + index).innerHTML = '<input type="hidden" name="Supplier" value="' + document.getElementById('Supplier' + index).value + '"></input><input type="hidden" name="ICST" value="' + document.getElementById('ICST' + index).value + '"></input><input type="hidden" name="backflush" value="' + document.getElementById('backflush' + index).value + '"></input><input type="hidden" name="Billing" value="' + document.getElementById('Billing' + index).value + '"></input><input type="hidden" name="InactiveOverride" value="' + document.getElementById('InactiveOverride' + index).value + '"/><input type="hidden" name="MpqMoqOverride" value="' + document.getElementById('MpqMoqOverride' + index).value + '"/>';
}
This seems to be an javascript DOM access issue. And has nothing to do with xslt.
The problem is based on the difference between DOM property and html attributes and the different handling in browsers.
In most cases using the DOM property (dom-elment.attribute-name) should work. Because the browser synchronize html attribute to DOM property. But this does not happen (in Chrome etc.) for customer attribute (e.g your value attribute at div).
Therefore you should use
document.getElementById('Part' + index).getAttribute('value')
in replacement for document.getElementById('Part' + index).value
This should work in all reasonable modern browsers (e.g IE > 6)

Avoid breaking string when creating new element due to text value

In my web application I have created a form that will allow users to insert stories to an online newspaper.
In order to do this I have created a hidden table which I clone to allow users to create new stories which I later catch on the submit event of my form.
Here I am facing a problem regarding the contents of the story's text.
For example, if the story contains double quotes on it, it will break my string when creating a new element on the submit event, like so;
$("form").submit(function () {
var myForm = $(this);
// begin cover stories process
var stories = $("#newsBlock").find("table");
if (stories != undefined) {
stories.each(function (index) {
var cNew = new CoverNew($(this).find('[name="news_id"]').attr("value"), $(this).find('[name="editionDate"]').attr("value"), $(this).find('[name="newsTitle"]').attr("value"), $(this).find('[name="newsLink"]').attr("value"), $(this).find('[name="newsAuthor"]').attr("value"), $(this).find('[name="newsSource"]').attr("value"), $(this).find('[name="newsDescription"]').attr("value"), $(this).find('[name="newsImageListing"]').attr("value"), $(this).find('[name="newsImageStory"]').attr("value"), $(this).find('[name="newsImageStory_Author"]').attr("value"), $(this).find('[name="newsImageStory_Description"]').attr("value"), $(this).find('[name="newsVideo"]').attr("value"), $(this).find('[name="newsText"]').val(), $(this).find('[name="newsOrder"]').attr("value"));
var ids = '<input name="Cover[' + index + '].id" id="Cover[' + index + '].id" type="text" value ="' + cNew.id + '" style="display:none;" />';
var title = '<input name="Cover[' + index + '].title" id="Cover[' + index + '].title" type="text" value="' + cNew.title + '" style="display:none;" />';
var editionDate = '<input name="Cover[' + index + '].edition_date" id="Cover[' + index + '].edition_date" type="text" value="' + cNew.editionDate + '" style="display:none;" />';
var link = '<input name="Cover[' + index + '].link" id="Cover[' + index + '].link" type="text" value="' + cNew.link + '" style="display:none;" />';
var author = '<input name="Cover[' + index + '].author" id="Cover[' + index + '].author" type="text" value="' + cNew.author + '" style="display:none;" />';
var source = '<input name="Cover[' + index + '].source" id="Cover[' + index + '].source" type="text" value="' + cNew.source + '" style="display:none;" />';
var description = '<input name="Cover[' + index + '].description" id="Cover[' + index + '].description" type="text" value="' + cNew.description + '" style="display:none;" />';
var menuPicture = '<input name="Cover[' + index + '].photo_in_list" id="Cover[' + index + '].photo_in_list" type="text" value="' + cNew.menu_picture + '" style="display:none;" />';
var story_picture = '<input name="Cover[' + index + '].photo_in_news" id="Cover[' + index + '].photo_in_news" type="text" value="' + cNew.story_picture + '" style="display:none;" />';
var story_picture_description = '<input name="Cover[' + index + '].photo_in_news_desc" id="Cover[' + index + '].photo_in_news_desc" type="text" value="' + cNew.story_picture_description + '" style="display:none;" />';
var story_picture_author = '<input name="Cover[' + index + '].photo_in_news_author" id="Cover[' + index + '].photo_in_news_author" type="text" value="' + cNew.story_picture_author + '" style="display:none;" />';
var video = '<input name="Cover[' + index + '].video" id="Cover[' + index + '].video" type="text" value="' + cNew.video + '" style="display:none;" />';
var content = '<input name="Cover[' + index + '].content" id="Cover[' + index + '].content" type="text" value="' + cNew.content + '" style="display:none;" />';
var order = '<input name="Cover[' + index + '].order" id="Cover[' + index + '].order" type="text" value="' + cNew.order + '" style="display:none;" />';
myForm.append(ids);
myForm.append(title);
myForm.append(editionDate);
myForm.append(link);
myForm.append(author);
myForm.append(source);
myForm.append(description);
myForm.append(menuPicture);
myForm.append(story_picture);
myForm.append(story_picture_description);
myForm.append(story_picture_author);
myForm.append(video);
myForm.append(content);
myForm.append(order);
index++;
});
}
});
In the above process, I collect the tables cloned by the user which contain stories.
Inside the variable content I place the text of the story.
But by the way I am concatenating it, if the text contains a double quote, the string will be broken at that point.
Is there anything I could do with javascript (even pure javascript) to fix this problem?
Yes - do var content = '<input name="Cover[' + index + '].content" id="Cover[' + index + '].content" type="text" value="' + cNew.content.replace(/"/g, """) + '" style="display:none;" />';
Use string Replace, for example:
cNew.story_picture_description.replace(/"/g, """);
Another and cleaner way would be to copy the whole table with cloneNode und delete the values in the new table.
use the javascript function to replace the " with "
var content = content.replace(/"/g, "&quot");
You should definetely make use of some template engine. Even simple jquery template or micro-template will work fine.
// Template engine, yea that easy
function templ(str, data) {
for (var p in data)
str = str.replace(new RegExp('{'+p+'}','g'), data[p]);
return str;
}
var cNew = new CoverNew(...);
cNew.index = index;
var story = templ($('#story-content').html(), cNew);
myForm.append(story);
And also place all your html into container:
<script type="text/template" id="story-content">
<input name="Cover[{index}].id" id="Cover[{index}].id" type="text" value ="{id}" style="display:none;" />
<input name="Cover[{index}].title" id="Cover[{index}].title" type="text" value="{title}" style="display:none;" />
...
</script>
Of course it's a little bit more complecated. But your code becomes more maintainable and clean.

Categories