I have an Array which is like:
var Arr = [
{ forname: 'John', surname: 'Doe', email: 'johndoe#gmail.com', website: 'www.johndoe.com', phone: '0123456789', img: 'img/johndoe.jpg' },
{ forname: 'Jane', surname: 'Doe', email: '', website: 'www.janedoe.com', phone: '0123456789', img: 'img/janedoe.jpg' },
]
what I do is filling a div with id="#caption"
$('#caption').html(e[f].forname + ' ' + e[f].surname + '<br>' + e[f].email + '<br>' + e[f].website + '<br>' + e[f].phone);
e and f are parameter passed through a function and they select each array object. The problem I have now is, when I get the data of both in the caption div it looks like:
because Jane Doe has no E-Mail adress. I don't know who and which fields are having a value or not. What I want to do is, that fields with no value get the double <br> removed.
Thanks!
Try instead of using <br> blocks (denote where the line breaks are) use <div>s (denote where the lines are). Like <p>aragraphs, they use a line each because of the default display: block property, but have fewer default-formatting properties.
You could use some trickery
[
e[f].forname+" "+e[f].surname,
e[f].email,
e[f].website,
e[f].phone
].filter(function(n){ return n != undefined && n != ''; }).join('<br/>');
Any empty values will be skipped and no double will be added
If it is an empty string:
$('#caption').html(e[f].forname + ' ' + e[f].surname + '<br>' + e[f].email + (( e[f].email=="")?"":'<br>') + e[f].website + '<br>' + e[f].phone);
(and if it's null you can check four null)
just check if it's empty and if it's empty -> don't put <br>
Just use the tenary operator.
insted of
+ e[f].email + '<br>' +
try
+ (e[f].email ? e[f].email + '<br>' : '') +
This will insert email + '<br>' only if there is an email.
Do this for all fields.
EDIT
$('#caption').html(
e[f].forname + ' ' + (e[f].surname ? e[f].surname + '<br>' : '') +
(e[f].email ? e[f].email + '<br>' : '') +
(e[f].website ? e[f].website + '<br>' : '')
(e[f].phone ? e[f].phone + '<br>' : ''
);
Related
In this case i want to null check by using column IS NULL..here column specify uniquename.
Uniquename is a integer column.
filterExpression = objColumnSettings.UniqueName + ' <> ' + objColumnSettings.FilterValue + ' AND ';
Here i have done like this.
This works but i want to use column IS NULL rather than ISNULL(column, value)
filterExpression = " ISNULL( " + objColumnSettings.UniqueName + " , 0 ) " + ' <> ' + objColumnSettings.FilterValue + ' AND ';
Please suggest
Thanks in advance;
should be
filterExpression = objColumnSettings.UniqueName + " IS NUL OR " + objColumnSettings.UniqueName + ' <> ' + objColumnSettings.FilterValue + ' AND ';
I am trying to append an HTML div with multiple parameters in the onclick function. Even though I am using escape quotes, the HTML is not rendered properly.
This is my HTML:
$("#city-list").append("<div class='user-panel' id='" + user.id + 'onclick=\'openChat(\'' + user.id + '\',\'' + user.username + '\',\'' + user.sex + "\'\")><b>" + user.username + ", " + "(" + user.sex + ", " + user.age + ")</div>");
This is what is rendered:
<div class="user-panel" id="A61o-ko0zVVJaxTbAAAHonclick=" openchat('a61o-ko0zvvjaxtbaaah','adamlee','male'")=""><b>adamlee, (male, 17)</b></div>
You missed closing quote for id attribute and function in onclick should have double quote because single quotes are used in it.
const user ={id: 'a61o-ko0zvvjaxtbaaah', username: 'henryzhu', sex: 'male', age: 17 }
$("#city-list").append("<div class='user-panel' id='" + user.id + '\' onclick="openChat(\'' + user.id + '\',\'' + user.username + '\',\'' + user.sex + "')\"><b>" + user.username + ", " + "(" + user.sex + ", " + user.age + ")</div>");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="city-list"></div>
You can use this code to work on all browsers, just need to use quotations properly as used in below code:
$("#city-list").append("<div class='user-panel' id='" + user.id + "' onclick='openChat(\"" + user.id + "\", \"" + user.username + "\", \"" + user.sex + "\")'><b>" + user.username + ", (" + user.sex + ", " + user.age + ")</b></div>");
If you are already using jQuery why not use a jQuery on click function?
Not saying it is wrong to use onclick inline but if you were curious this is another way you could achieve what you are going for.
// Add some data
var user = ({
"id":"a61o-ko0zvvjaxtbaaah",
"username":"henryzhu",
"sex":"male",
"age":"17"
});
var content = "";
// Set up your data in data-attributes
content += "<div class='user-panel' \
data-id='" + user.id + "' \
data-username='" + user.username + "' \
data-sex='" + user.sex + "' \
data-age='" + user.age + "'>";
// viewable text
content += "<b>" + user.username + ", (" + user.sex + ", " + user.age + ")";
content += "</div>";
$("#city-list").append(content);
//---------------------------------------------------------------------
// jQuery on click function to call the openChat
// putting the data you need in data attributes let you grab what you need on the clicked name and
// submit it to the chat funciton.
$("body").on("click", ".user-panel", function(){
var userid = $(this).attr("data-id");
var username = $(this).attr("data-username");
var sex = $(this).attr("data-sex");
var age = $(this).attr("data-age");
openChat(userid , username , sex);
});
// Your chat function
function openChat(id, name, sex){
console.log(id + " | " + name + " | " + sex);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="city-list"></div>
If you do not need to support IE you might want to consider using back-ticks (`) in this case. They provide functionality, a more readable experience and are less error prone. More information here MDN documentation for template literals.
Your example with back-ticks would be:
$("#city-list").append(`
<div class="user-panel"
id="${user.id}"
onclick="openChat('${user.id}', ${user.username}, ${user.sex})">
<b>${user.username}, (${user.sex}, ${user.age})
</div>
`)
When using UNION or UNION ALL in a GROUP BY query using alasql (https://github.com/agershun/alasql), only results from table1 are retrieved.
Running separate queries outputs correct results instead.
See this jfiddle http://jsfiddle.net/L8471bnk/116/
var data= [
{"label":"transport - car","value":800},
{"label":"airplane","value":234},
{"label":"train","value":500},
{"label":"glider","value":123},
{"label":"transport - motorbike","value":50},
{"label":"transport - bike","value":150}
];
var query1 = alasql('' +
'SELECT \'transport\' AS label, SUM(CAST([value] AS INT)) AS [value] ' +
'FROM ? ' +
'WHERE label LIKE \'%transport%\' ' +
'GROUP BY \'transport\' ' +
'',
[data]);
var query2 = alasql('' +
'SELECT label, SUM(CAST([value] AS INT)) AS [value] ' +
'FROM ? ' +
'WHERE label NOT LIKE \'%transport%\' ' +
'GROUP BY label' +
'',
[data]);
var queryUnion = alasql('' +
'SELECT \'transport\' AS label, SUM(CAST([value] AS INT)) AS [value] ' +
'FROM ? ' +
'WHERE label LIKE \'%transport%\' ' +
'GROUP BY \'transport\' ' +
'UNION ALL ' + //or UNION, same result!
'SELECT label, SUM(CAST([value] AS INT)) AS [value] ' +
'FROM ? ' +
'WHERE label NOT LIKE \'%transport%\' ' +
'GROUP BY label' +
'',
[data, data]);
$("#res").html("<br/>UNION IS WRONG (length is correct, but query2 results are missing!!!)!<br/>" + JSON.stringify(queryUnion) + " LENGTH: " + queryUnion.length);
$("#info").html("<br/>Query1 is correct:<br/>"
+ JSON.stringify(query1)
+ " LENGTH: " + query1.length
+ "<br/><br/>Query2 is correct<br/>" + JSON.stringify(query2)
+ " LENGTH: " + query2.length);
Just found out: it seems like it's a bug?
See https://github.com/agershun/alasql/issues/485
:(((
I am using jQchart to display a graph. However, the title property seems to display only a single line of text. Currently, the graph displays the following title:
text: chartTypeText + ': ' + chartTitle + ", " + $('#baselineResidentialLocationCity option:selected').text() + ', ' + $("#baselineResidentialLocationState option:selected").val() + ' ' + $('#baselineResidentialStandardYear option:selected').text() + ' ' + baselinePeriod + ' year'
However, I basically need to display each variable on a different line (hopefully use linebreaks to separate each piece of information). I tried using "" but it displays the string literal.
Is there any way I could display each variable under the title of the graph with different fonts etc?
If you are looking for series title customization, it can be customized with tooltipFormat event.
[Use some separator(I use ; as a separator) and format with html, css]
In below statement, I changed separator to ;
text: chartTypeText + ': ' + chartTitle + ";" + $('#baselineResidentialLocationCity option:selected').text() + ', ' + $("#baselineResidentialLocationState option:selected").val() + ';' + $('#baselineResidentialStandardYear option:selected').text() + ' ' + baselinePeriod + ' year'
<script lang="javascript" type="text/javascript">
$(function () {
$('#ChartClientID').bind('tooltipFormat', function (e, data) {
var t=data.series.title.split(";");
//OR here you can dynamically build here it self
return "<b>" + t[0] + "</b><br />"
+ (t[1] || "") + "<br />"
+ (t[2] || "");
});
});
</script>
see this link for reference: http://www.jqchart.com/aspnet/chart/ChartFeatures/Tooltips
how to call javascript function from anchor tag which is part of a javascript string?
var htmlVar = '<span> Name: ' + arNames[j] + '</span></br><span> Last: ' + arLast[j] + '</span><br/><a javascript:setProfile(\\"+ dob[j]+\\",\\"+state[j]+\\") >View</a>';
If I'm understanding your intention correctly (having a string that contains the HTML for a link that is a Javascript link), you could do it thus:
var htmlVar = '<span> Name: ' + arNames[j] + '</span></br><span> Last: ' + arLast[j] + '</span><br /><a onclick="javascript:setProfile(\\"' + dob[j] + '\\",\\"' + state[j] + '\\")">View</a>';