Displaying an image dynamically in a html table in JavaScript - javascript

I am trying to display an image in a table. This is what I have tried:
imgv = "/img/koala.jpg";
dcontent = "<table style='background-color:purple;'><tr><td style='width: 100px; color: red;'> Date </td>";
dcontent += "<tr><td style='width: 100px;'><img src="' + imgv + '"/></td>";
I am getting a compile time error in the second line:
"; expected".
I tried many syntax like:
<img src=" + imgv + "/></td>
but nothing is getting compiled.

Correct answer is replacing "' + imgv + '" with '" + imgv + "'
imgv = "/img/koala.jpg";
dcontent = '<table style="background-color:purple;"><tr><td style="width: 100px; color: red;"> Date </td>';
dcontent += "<tr><td style='width: 100px;'><img src='" + imgv + "'/></td>";

You need to replace "' + imgv + '" with '" + imgv + "',
because ' is stronger than ".
For example, when you create variable named foo:
var foo = "write sentence 'like' that";
in html
you will get just "write sentence that".
SOLUTION is to replace them, then
var foo = 'write sentence "like" that'
will output exactly
write sentence "like" that - nothing wrong :-)

Related

converting html code to java script string format

I am having html code for hyperlink as below:
<td> {{ book.code }}</td>
<td>{{book.name}}</td>
it is directing to the correct page.
In Script from the response I update the page as below It is not giving error (of course link page is empty because of 1 as parameter):
html += "<tr> <td> <a href= '{% url 'select_stock_report' 1 %}'>"+item1.code+"</a></td>"+
"<td>" + item1.name + "</td>" + "<td>" + item1.open_qty + " </td>"
But I want to replace 1 (one) with item1.id.
html += "<tr><td><a href='{% url 'select_stock_report' item1.id %}'>"+item1.code+"</a></td>"+
"<td>" + item1.name + "</td>" + "<td>" + item1.open_qty + " </td>"
But I am getting error.
How to build the line with this replacement. I tried all "",'',+ with this item.id without success.
Thanks for your help.
String content="<h1>Heading 1</h1>\n" +
" <h2>Heading 2</h2>\n" +
" <p>This is some html. Look, here\\'s an <u>underline</u>.</p>\n" +
" <p>Look, this is <em>emphasized.</em> And here\\'s some <b>bold</b>.</p>\n" +
" <p>Here are UL list items:\n" +
" <ul>\n" +
" <li>One</li>\n" +
" <li>Two</li>\n" +
" <li>Three</li>\n" +
" </ul>\n" +
" <p>Here are OL list items:\n" +
" <ol>\n" +
" <li>One</li>\n" +
" <li>Two</li>\n" +
" <li>Three</li>\n" +
" </ol>";
Its use html inside of java

Best Way to make one section of a LI editable

What is the best way to make JUST card.price editable? I've futzed around with several different ways that seemed stupid simple, but it just isn't producing the right results. Does anyone out there have some suggestions?
html += "<li class='list-item ui-state-default' id=" + i + ">" +
card.card_name + ' - ' + card.price +
"<button class='removeThis'>" +
"X" + "</button>" + "</li>";
Here's a simple way to do that with input elements. Simplified example to illustrate it:
var card = {};
card.card_name = "Card Name";
card.price = "4.00";
var inputBeg = "<input size=8 style='border: none;' value='$";
var inputEnd = "'>";
var html = "";
for (var i = 0; i < 3; i++) {
html += "<li class='list-item ui-state-default' id=" + i + ">" +
card.card_name + ' - ' + inputBeg + card.price + inputEnd + "<button class='removeThis'>" +
"X" + "</button>" + "</li>";
}
document.body.innerHTML = html;
You could get much fancier with the styling if you wanted to.

How to get the label value in javascript

I am creating a dynamic tr/td based on json data using below code.
for (i = 0; i < dataPoolJSON.length; i++) {
html += "<tr id ='row" + i + "' value ='" + dataPoolJSON[i].msisdn + "'><td><div class='group'><label id='label" + i + "' for='numView" + dataPoolJSON[i].msisdn + "' class='ch-control'>";
html += "<input id='numView" + dataPoolJSON[i].msisdn + "' type='radio' class='iradio_minimal' value='" + i + "' name='msisdnSelected'/>" + dataPoolJSON[i].msisdn;
html += "</label></div></td><td class='hidden-xs'><a id='viewUsage" + i + "' class='viewUsage' onclick='viewDataPoolUsage(this," + dataPoolJSON[i].msisdn + ");return false;' href=''>View Usage</a>";
html += "<div class='pool-usage hidden'></div></td>";
html += "<td><span id='dataAllowed" + i + "'><select>";
if (dataPoolJSON[i].userSetting != null) {
html += "<option selected='selected' value='" + dataPoolJSON[i].userSetting.alertPercentageData1 + "'>" + dataPoolJSON[i].userSetting.alertPercentageData1 + "</option>";
}
html += "</select></span></td></tr>";
}
$('#data-pool tbody').html(html);
Now on click on radio button i need to fetch the msisdn value and current option selected value as but it is not giving me required answer. I am getting the current option selected value but not the msisdn.
function submitNewDataUsagealerts() {
var jsonSubmitData = [];
var selectedData = document.getElementsByName("msisdnSelected");
var i = selectedData.length-1;
for ( j=0; j <= i; j++ ) {
if(selectedData[j].checked) {
var valueCurrent = $('#dataAllowed'+selectedData[j].value).find('option:selected').val();
var row = $('#label'+selectedData[j].value).val();
item = {}
item [0] = valueCurrent;
item [1] = selectedData[j].value;
}
}
}
To get the "value" from a label, use .text() rather than .val().
var row = $('#label'+selectedData[j].value).text();
As your label includes an input and the required text, you can put the text inside a container so that it can be referenced without including the input:
The label code is currently (irrelevant code removed) :
html += "<label id='label" + i + "' for='numView" + dataPoolJSON[i].msisdn + "' class='ch-control'>";
html += "<input id='numView" + dataPoolJSON[i].msisdn + "' type='radio' class='iradio_minimal' value='" + i + "' name='msisdnSelected'/>";
html += dataPoolJSON[i].msisdn;
html += "</label>";
change this to:
html += "<label id='label" + i + "' for='numView" + dataPoolJSON[i].msisdn + "' class='ch-control'>";
html += "<input id='numView" + dataPoolJSON[i].msisdn + "' type='radio' class='iradio_minimal' value='" + i + "' name='msisdnSelected'/>" ;
html += "<span>" + dataPoolJSON[i].msisdn + "</span>";
html += "</label>";
Then your selector can be:
var row = $('#label'+selectedData[j].value + ">span").text();
Alternatively, move the input out of the label as you're already using label for=:
html += "<input id='numView" + dataPoolJSON[i].msisdn + "' type='radio' class='iradio_minimal' value='" + i + "' name='msisdnSelected'/>" ;
html += "<label id='label" + i + "' for='numView" + dataPoolJSON[i].msisdn + "' class='ch-control'>";
html += dataPoolJSON[i].msisdn
html += "</label>";
Then your selector can be:
var row = $('#label'+selectedData[j].value).text();
var msg = document.getElementById('lbltxt').innerHTML;
alert(msg);
<label id="lbltxt" style="display:none">Test</label>
HTML Code
<label id="mylabel" />
JS Code
var lavelValue = $("#mylabel").text();

convert a dynamically created table cell to a text box when clicked

I have dynamically generated table using jquery. I want a cell of the table be converted to a textbox when clicked.
$.each(proc_msg, function (i, item) {
trHTML += "<tr><td>" + item.hq_code + "</td><td id='hq_" + item.hq_name + "'>" + item.hq_name + "</td>";
trHTML += "<td><a href='#' id='hq_ed_" + item.hq_name+_"' onClick='dataAction(this.id);'>Edit</span></a></td>";
});
$('#tbl_hqlist').append(trHTML);
function dataAction(dataValue){
var sectionName=dataValue.substr(0,2);
var hq_zone=dataValue.substr(5);
var zone_id ="";
zone_id= zone_id.concat("'#",sectionName, hq_zone,"'");
var tempHTML ="<input type='text' id='" + zone_id + "' value='" + hq_zone + "' />";
$(zone_id).html(tempHTML);
}
This code is throwing up error where "zone_id" is not defined.

SyntaxError: unterminated string literal

Hi I am trying to load some comtent in my html page from js.
js code(relevant)-
for(i=0; i<4 && 4*i+j<data.response.length; i++)
{
html += '<div class="grids_of_4">';
for(j=0; j<4 && 4*i+j<data.response.length; j++)
{
pi1 = data.response[4*i+j].p_image1;
pn = data.response[4*i+j].p_name;
pp = data.response[4*i+j].p_price;
pa = data.response[4*i+j].p_amount;
pid = data.response[4*i+j].p_id;
html += "<div class='grid1_of_4'>";
html += "<div class='content_box'>";
html += "<a href='details.html'>";
html += "<div class='view view-fifth'>";
html += "<img src='/bokaroration/media/" + pi1 + " ' class='img-responsive' alt=''/" + ">";
html += "<div class='mask'>";
html += "<div class='info'>Quick View</div></div></a></div>";
html += "<h4><a href='details.html'> " + pn + "</a></h4>";
html += "<strike>Rs. " + pp + "</strike> Rs." + pa;
html += "<input type='number' id='" + pid + "' min='0' max='100'/" + ">";
html += "<button type='button' style='margin:5px' class='btn btn-sm btn-success' onclick=add(" + pa + ",'" + pid + "','" + pn + "')"
html += ">+</button>";
html += "</div></div>";
}
html += "</div>";
alert(html);
}
and it is alerting correctly but when I click on the button it gives error -
SyntaxError: unterminated string literal
and when I checked inspect element I found problem in button tag -
<button class="btn btn-sm btn-success" rice')="" gate="" onclick="add(180,'qhfghds.;k[','India" style="margin:5px" type="button">
+
</button>
I don't know why it is happening.
Someone please help me.
Thanks in advance.
The short answer is: Because you are constructing HTML by mashing together strings.
You've got an HTML attribute value that is delimited by ' characters. Inside that value you are putting a ' without escaping it (as "). Since it isn't escaped, it terminates the attribute value.
Use DOM (createElement, setAttribute, appendChild, etc.) instead.

Categories