Hi together I've got a problem with the ' and " in my js code.
$(".searchResultsMember table").append("<tr>" +
"<td>" +
"<a href='#' title='Statistik' data-container='body'
data-toggle='tooltip' data-placement='bottom' onclick='open_statistic('/memberships/statistik/', '"+
data.results[i].firstname +" "+
data.results[i].lastname +"','"+ data.results[i].id +
"');return false; '><img src='/images/iconpack/table.png' alt='Statistic'/></a> "+
[....]
The Problem is in the onclick part .. can someone help me with this ?
In JavaScript, you can mix and match ' and " as long as you use them in pairs, eg:
var x = "a";
var y = 'b';
You can also combine these on the same line, eg:
var z = "a" + 'b';
so you pick the one you need depending on the content (unless you have some nefarious coding standards written by someone that doesn't understand this (which I've seen..))
to concat a single quote, surround in doubles and the other way, eg:
var x = "'" + '"'; x == '"
this also applies to attributes:
<a href="#" title='double quote (")'>
<a href="#" title="single quote (')">
so you can fix your code by changing the quotes:
$(".searchResultsMember table").append(
"<tr>"
+ "<td>"
+ "<a href='#' title='Statistik'"
+ " data-container='body' data-toggle='tooltip' data-placement='bottom'"
+ ' onclick="open_statistic('
+ "'/memberships/statistik/', '"
+ data.results[i].firstname
+ " "
+ data.results[i].lastname
+ "','"
+ data.results[i].id
+ "');return false; "
+ '">'
+ "<img src='/images/iconpack/table.png' alt='Statistic'/></a> "+
[....]
But, having done this for you above - it's really confusing! (and therefore prone to errors)
So break it up into steps with variables, and break out just the double quotes, eg:
var onclick = "open_statistic('/memberships/statistik/', '" + ... + "');return false;";
$(".searchResultsMember table").append(
"<tr>"
+ "<td>"
+ "<a href='#' title='Statistik'"
+ " data-container='body' data-toggle='tooltip' data-placement='bottom'"
+ " onclick=" + '"' + onclick + '"' + ">"
....
Related
I've below code
issuesList.innerHTML += "<div class=\"well\">" +
"<h6> Issue Id:" + id + "</h6" +
"<p><span class=\"label label-info\">" + status + "</span></p>" +
"<h3>" + desc + "</h3>" +
"<p><span class=\"glyphicon glyphicon-time\">" + severity + "</span></p>" +
"<p><span class=\"glyphicon glyphicon-user\">" + assignedTo + "</span></p>" +
"Close" +
"<a href=\"#\ onclick=\"deleteIssue( \"" + id + "\")\" class=\"btn btn-danger\>Delete</a>" +
"</div>";
I wish to validate if this is correct format of HTML as it contains many variable and it's hard to debug if something goes wrong.
To make it one degree less complicated, you can use single quotes to wrap class or style declarations and double quotes to wrap the overall html (or vice versa).
In this piece of html, I observed issued at closing of </h6> and in the class declaration of last anchor tag.
issuesList.innerHTML += "<div class='well'>" +
"<h6> Issue Id:" + id + "</h6>" +
"<p><span class='label label-info'>" + status + "</span></p>" +
"<h3>" + desc + "</h3>" +
"<p><span class='glyphicon glyphicon-time'>" + severity + "</span></p>" +
"<p><span class='glyphicon glyphicon-user'>" + assignedTo + "</span></p>" +
"<a href='#' onclick= 'setStatusClosed(\"" + id + "\")' class='btn btn-warning'>Close</a>" +
"<a href='#' onclick='deleteIssue( \"" + id + "\")' class='btn btn-danger'>Delete</a>" +
"</div>";
You may use following function to validate the html so created:
function validator(createdhtml) {
var tempdiv = document.createElement('div');
tempdiv.innerHTML = createdhtml;
return tempdiv.innerHTML;
}
Further I recommend reading:
check-if-html-snippet-is-valid
I am facing to problem with Elasticsearch result which is using # in attribute name. Snippet of json result:
{"_index":"logs-2015.12.31","_type":"log","_id":"AVH4eA4QKV0mbJuiIHO1","_score":null,"_source":{"#timestamp":"2015-12-31T14:36:35.378Z","beat":{"hostname":"
I need to interpret its value into jquery code. See the code snippet:
case item._index.startsWith('logs-'):
$('#results-list').append( '<a href="details.jsp?id=' + item._id + '" target="_blank" class="list-group-item">'
+ '<span class="label label-info">' + item._type + '</span>'
+ '<h4 class="list-group-item-heading">' + item._source.source + '</h4>'
+ '<p class="list-group-item-text">' + item._source.#timestamp + ' - ' + item._source.beat.name + '</p>'
+ '<p class="list-group-item-text">' + item._source.message + '</p>'
+ '</a>'
How to handle the attribute if I cannot change the source?
The # character cannot be used in a literal property name, hence you need to use array notation to access it:
item._source['#timestamp']
$("#searchresult").append("<tr><td id=''>" + data[i].landarp + "</td>" + "<td id=''>" + data[i].landarp + "</td>" + "<td id=''>" + data[i].landpin + "</td>" + "<td id=''>" + (data[i].landlot ? "Lot " + data[i].landlot : "") + "/" + (data[i].landblock ? "Block " + data[i].landblock : "") + "</td>" + "<td id=''>" + data[i].landfirstname + " " + data[i].landmiddlename + " " + data[i].landlastname + ", " + data[i].landsuffix + "</td>"
for (var land = 0; land < landaddress.length; land++) {
landownercontactflag = landaddress[land].landownercontactflag;
landownercontactflag === "1" ? (contactaddress = landaddress[land].landownerprovince + " " + landaddress[land].landownermunicipality + " " + landaddress[land].landownerbarangay + ", " + landaddress[land].landownerstreet) : (homeaddress = landaddress[land].landownerprovince + " " + landaddress[land].landownermunicipality + " " + landaddress[land].landownerbarangay + ", " + landaddress[land].landownerstreet) + "<td id=''>" + landownercontactflag === "1" ? contactaddress : homeaddress + "</td>"
} + "<td id=''>" + data[i].landyear + "</td>" + "<td id=''>" + "<a class=\"af_rpta_treasuryall_specificpin\" id=" + data[i].landpin + " href='#' >View Details</a>" + "</td></tr>");
Trying to append data from database using this code but then i get Uncaught SyntaxError: missing ) after argument list in this line +"<td id=''>" + data[i].landfirstname + " " + data[i].landmiddlename + " " + data[i].landlastname + ", " + data[i].landsuffix + "</td>" what is the cause of this and how to fix it
If you remove all the data specific parts, this is what you have:
$("#searchresult").append("text"
for (var land = 0; land < landaddress.length; land++) {
landownercontactflag = "text";
}
+ "text");
I am not missing a ")" i checked it thoroughly i think its because of for loop inside append just like comment above
There's a missing ")" at the end of the append("text"
(you'll also notice I've changed the indentation to how it's interpreted)
Javascript does not require the use of ";" to end statements and you can use a newline to mean the same, ie these are equivalent:
$("#").append()
and
$("#").append();
because there's a newline at the end of the append(, it looks to see what the next statement is. If this was a '+' it would continue to append the next text, but in this case, it's a new statement for - so javascript attempts to close off the .append( and gives an error that there's a missing ")".
This is the equivalent of:
$("#searchresult").append("text";
for ...
see the ";" at the end now? As there's no ")" before the implied ";", it gives you the warning that there's a ")" missing.
If you did add the ');' at the end of the line then you'll get an error later on about the + .. as there's nothing for the + to be +ed to.
As you've established, this is because of trying to put a command inside the brackets of another - but I wanted to explain why the interpreter thinks this way with the implied end-of-statement at a newline.
You can't put a for statement inside a $("#searchresult").append(
My suggestion is to create a variable and to populate it... then to use it inside append.
For example:
var myVar = "<tr><td id=''>" + data[i].landarp + "</td>" + "<td id=''>" + data[i].landarp
...
for (var land = 0; land < landaddress.length; land++) {
landownercontactflag = landaddress[land].landownercontactflag;
....
myVar = myVar + ......
.....
}
....
$("#searchresult").append(myVar);
But... are you sure you really know what your "for" loop is doing?
UPDATE: as alternative (without a variable):
$("#searchresult").append("<tr><td id=''>" + data[i].landarp + "</td>" + "<td id=''>" + data[i].landarp ....);
...
for (var land = 0; land < landaddress.length; land++) {
landownercontactflag = landaddress[land].landownercontactflag;
....
$("#searchresult").append(".....");
}
....
$("#searchresult").append("....");
Fiddle
I want to put the names of all record in my array into a table my array isn't index correctly so i used $.each instead of iterating over the using for loop. My problem is I only get to show the last element but if i try to show a value that is existing to both the array it is showing correctly.
What am i missing in this code.
Any idea is appreciated
This is my javascript
for (var i = 0; i < name.length; i++) {
var names = name[i].Names;
$.each(names, function (item, names) {
tr = $('<tr class=""/>');
//console.log(complainant[obj]);
//var names = complainant[obj];
//if(names.hasOwnProperty('fname')){
console.log(names.suffix);
var acronymc;
var upper = names.mname.toUpperCase();
if (upper) {
var matches = upper.match(/\b(\w)/g);
//var matches = upper.replace(/^(\S+)\s+(\S).*/, '$1 $2.');
//acronym = upper.slice(0,1);
var acronym1 = matches.join('');
acronymc = acronym1.slice(-1);
} else {
acronymc = '';
}
tr.append("<td id=''>" + "<span id='fname'>" + names.fname + "</span>" + " " + "<span id='mname'>" + acronymc + "</span>" + " " + "<span id='lname'>" + names.lname + "</span>" + " " + "<span id='suffix'>" + names.suffix + "</span>" + "</td>");
tr.append("<td id=''>" + '<span id="street">' + names.street + '</span>' + " " + '<span id="brgy">' + names.brgy + '</span>' + " " + '<span id="town">' + names.town + '</span>' + " " + '<span id="city">' + names.city + '</span>' + "</td>");
tr.append("<td id=''>" + names.contactnum + "</td>");
tr.append("<td id=''>" + "<a href='#' class='editcomplainant'>Edit</a>" + "/" + "<a href='#' class='delete'>Delete</a>" + "</td>");
//}
});
$("#nameslist").append(tr);
}
Put the $('#nameslist').append(tr); call inside the $.each block.
Here is a way of improving the creation of tds:
var html =
"<td>" +
"<span id='fname'/> " +
"<span id='mname'/> " +
"<span id='lname'/> " +
"<span id='suffix'/>" +
"</td>";
var td = $(html);
td.find('#fname').text(names.fname);
td.find('#mname').text(acronymc);
td.find('#lname').text(names.lname);
td.find('#suffix').text(names.suffix);
tr.apppend(td);
Why is this better (imho)?
You will not create unintentional html tags by having < and > inside the variables.
Appropriate escaping (auml codes) will be automatically generated
It is easier to read
Ok, so I'm not sure what it is that I'm missing here, but I'm having a strange issue with this bug.
Card.prototype.toLink = function()
{
var txt = "";
if (this.promo == 'false')
{
var image = this.set.replace(/ /g, "_") + '/' + this.number;
txt = txt + "<a id='" + this.node + "' onmouseover=changeImage('" + image + "')>" + this.toString() + "</a>";
}
else
{
var image = this.set.replace(/ /g, "_") + '/' + this.rarity + this.number;
txt = txt + "<a id='" + this.node + "' onmouseover=changeImage('" + image + "')>" + this.toString() + "</a>";
}
return txt;
}
The above code produces a link to a card with the proper structure
<a id='node' onmouseover='changeImage('set/number')> this.toString() </a>
But if I add in some extra text, as part of an existing string in the additions, I get a seriously borked tag
If I change the function to
Card.prototype.toLink = function()
{
var txt = "";
if (this.promo == 'false')
{
var image = this.set.replace(/ /g, "_") + '/' + this.number;
txt = txt + "<a id='" + this.node + "' onmouseover=changeImage('" + image + "' , this)>" + this.toString() + "</a>";
}
else
{
var image = this.set.replace(/ /g, "_") + '/' + this.rarity + this.number;
txt = txt + "<a id='" + this.node + "' onmouseover=changeImage('" + image + "' , this)>" + this.toString() + "</a>";
}
return txt;
}
I end up with a tag that looks like this.
<a id='node' this)="" ,="" onmouseover="changeImage("set/number"> this.toString() </a>
Maybe I just need an extra pair of eyes on this to see what might be breaking it, but something is not jiving with me. If anyone has any idea why adding part of an expression like this may be breaking it, please let me know.
What I want the output to look like is, where the only variables in the final code are represented by anything in []
<a id='[node]' onmouseover="changeImage([image], this)"> [this.toString()] </a>
Edit: I am currently trying to view the html file that's created with Firefox, if that could help to answer anything.
Adding part of an expression? You don't seem to be adding part of an expression.
onmouseover=changeImage('" + image + "' , this)>"
This code is adding, as can be seen by the highlighting on your question, a string to your code.
"' , this)>"
I presume this is your issue. Have you tried:
txt = txt + "<a id='" + this.node +
"' onmouseover=changeImage('" + image + "' ,'"+ this + "')>" +
this.toString() + "</a>";