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.
Related
function ReceiveServerData(retValue) {
var val = retValue.split('#')
var ch1= val[1].split(',');
if (val[0] == 1) {
var tab = "";
//codes
var row = ch1.split("¥");
for (n = 0; n <= row.length - 1; n++) {
var col = row[n].split("µ");
tab += "<td style='width:5%;text-align:left'><a href onclick ='Documents(" + col[0] + "," + i + ")' style='text-align:left;'>Download Attachment </td>";
//codes
}
}
function Documents(ID,i) {
//codes
}
it doesn't seem to work correctly though. Is there a better way to do this?
change this:
tab += "<td style='width:5%;text-align:left'><a href onclick ='Documents(" + col[0] + "," + i + ")' style='text-align:left;'>Download Attachment </td>";
to this:
tab += "<td style='width:5%;text-align:left'><a href='#' onclick='Documents(" + col[0] + "," + i + ")' style='text-align:left;'>Download Attachment </td>";
tips:
1. You should give a "#" to href else it will go refresh your page.
You should connect the string between "onclick" and "=" to make html template reasonable.
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.
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();
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 :-)
I have a function to generate data-content for bootstrap popover from Json .
The problem with the function is that, if I pass json object in which a member contains a single quote then the popover content is not set.
function setupopoverContent(content) {
var json = JSON.parse(content);
var contents = '<div style="">'
contents += '<div id="hellobar" class="large right remains_at_top row-fluid" style="background-color: ' + json.BarColor + '; color: ' + json.TextColor + '; border-radius: 5px;font-family: Helvetica,Arial,sans-serif;"> ';
contents += '<div id="hb_msg_container" class="span11"> <span id = "topbar_message" style="padding-bottom:14px;"> ';
contents += HtmlEncode(json.Message);
contents += '</span> ';
contents += '<a id = "topbar_linktext" class="hellobar_cta hb-button" href= "' + json.LinkURL + '" target="_blank" style="color: ' + json.ButtonTextColor + '; background-color: ' + json.ButtonColor + '; border-color: #000000"> ';
contents += HtmlEncode(json.LinkText);
contents += '</a></div> ';
contents += '</div></div>';
return contents;
}
Suppose that json.Message=All go'es here, then the popover content is not set.
How can i solve this problem?
Have you tried omitting HtmlEncode?
http://jsfiddle.net/z6gnpnr5/