I have some simple code. The problem im facing is that how you can see the code is not very clean because in every line where a string gets added to var text i would like to check if the data i want to add really is defined. Now i would like to know how i can write this more cleaner? Thanks
var text = '<br><address><strong>' + data.vorname + ' ' + data.name + '</strong><br>';
if(data.strasse != null && data.strasse != ''){
text += data.strasse + '<br>' + data.plz + ', ' + data.wohnort ;
}if(data.telefon != null && data.telefon != ''){
text += '<br><strong>Tel: ' + data.telefon + '</strong>';
}
text += '<br><strong>Handy: ' + data.handy + '</strong><br>';
text += '<a href="mailto:#">' + data.mail;
text += '</a></address><address><strong>GEB: </strong>';
text += Data.datum(data.geburtsdatum) + '<br>';
text += data.gewicht + '<strong> GK';
........
You could rewrite your lines like this:
text += (data.handy)? '<br><strong>Handy: ' + data.handy + '</strong><br>' : '';
This is shorthand for this:
if (data.handy) {
text += '<br><strong>Handy: ' + data.handy + '</strong><br>';
} else {
text += '';
}
That way, if data.handy isn't defined or is null then nothing gets added to text.
Related
The line in question is...
if(listContent[Source].properties === ""
I need it to check if the "Source" key has any value. It's currently not outputting anything. What is proper syntax for this?
Here is the full code:
if (visibleFeatures) {
var uniqueFeatures = getUniqueFeatures(visibleFeatures, "arrayIndex");
for (var i = 0; i < uniqueFeatures.length; i++) {
if (listContent[Source].properties === "") {
listContent += '<div class="dealer"><h3>' + uniqueFeatures[i].properties.Name + '</h3><p class="address">' + uniqueFeatures[i].properties.Address + '<br>' + uniqueFeatures[i].properties.City + ', ' + uniqueFeatures[i].properties.State + ' ' + uniqueFeatures[i].properties.Zip + '</p><p class="phone">' + uniqueFeatures[i].properties.Phone + '</p></div>';
} else {
listContent += '<div class="dealer"><h3>' + uniqueFeatures[i].properties.Name + '</h3><p class="address">' + uniqueFeatures[i].properties.Address + '<br>' + uniqueFeatures[i].properties.City + ', ' + uniqueFeatures[i].properties.State + ' ' + uniqueFeatures[i].properties.Zip + '</p><p class="phone">' + uniqueFeatures[i].properties.Phone + '</p><p class="bl-map-link">' + uniqueFeatures[i].properties.Source + '</p></div>';
}
}
Thank you guys so much for all the help. I was able to figure out my error.
!!uniqueFeatures[i].properties.Source
The !! is what made the difference. I'm still researching why this works and why this doesn't if (strValue === "").
So my script creates a element and changes it's innerHTML.
My problem is inside my script you can see this:
CurrentLine.innerHTML = '<p>' + user + " ⦙ " + size + " ⦙ "+ line + '<span id="LogColor" style="">' + color + '</span> </p>';
I'm needing help with this part of the innerHTML:
'<span id="LogColor" style="">' + obj.lineColor + '</span> </p>'
As you can see in my full script below after the child gets append. You see where I tried to change the span's style using a variable. It doesn't seem to change it's color though.
Full Script:
nvtSource.onmessage = function(e) {
var obj = JSON.parse(e.data);
var line = JSON.stringify(obj.line)
var size = JSON.stringify(obj.lineWidth)
var color = JSON.stringify(obj.lineColor) // Not needed, but defined anyways.
if (line == null)
{
//Do nothing..
}
else
{
var CurrentLine = document.createElement('p');
CurrentLine.innerHTML = '<p>' + user + " ⦙ " + size + " ⦙ "+ line + '<span
id="LogColor" style="">' + color + '</span> </p>';
document.getElementById("LineConsole").appendChild(CurrentLine);
document.getElementById("LogColor").style.color = obj.lineColor;
}
The part I tried to change it's style.
document.getElementById("LogColor").style.color = obj.lineColor;
I even tried to do something like:
document.getElementById("LogColor").style = "color:" + color + ";"
I don't exactly know what you are trying to do here but if you want the line you are adding to have the textcolor you could try:
'<span style="color:' + obj.lineColor + '">' + obj.lineColor + '</span> </p>'
provided your lineColor is a valid css color string like "red", "#ffffff" or "rgb(255,255,255)"
you would no longer need the id.
Hey all this is the first time I've ran into this problem with javascript/jquery. Below I have a part of code that I am trying to place an IF/Than else statement in order order to decide what type of class I need to place into the DIV it creates:
Select3.Templates = {
dropdown: function (options) {
var extraClass = (options.dropdownCssClass ? ' ' + options.dropdownCssClass : ''),
searchInput = '';
if (options.showSearchInput) {
extraClass += ' has-search-input';
var placeholder = options.searchInputPlaceholder;
searchInput = (
'<div class="select3-search-input-container">' +
'<input class="select3-search-input"' + (placeholder ? ' placeholder="' + escape placeholder) + '"'
: '') + '>' +
'</div>'
);
}
return (
'<div class="select3-dropdown' + extraClass + '">' + searchInput + '<div class="select3-results-container"></div>' +
'</div>'
);
},
loading: function () {
return '<div class="select3-loading">' + Select3.Locale.loading + '</div>';
},
loadMore: function () {
return '<div class="select3-load-more">' + Select3.Locale.loadMore + '</div>';
},
multipleSelectInput: (
'<div class="select3-multiple-input-container">' +
'<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="select3-multiple-input">' +
'<span class="select3-multiple-input select3-width-detector"></span><div class="clearfix"></div>' +
'</div>'
),
[ect...ect..]
I'm trying to insert my if than else statement into the multipleSelectInput area but I am unsure how to go about doing that since it seems to be some type of array (or object array) or something I don't know what it's called :)?
If I place my if than else statement above the if (options.showSearchInput) { will that work within the multipleSelectInput area?
What I need to changed within the multipleSelectInput is:
'<div class="select3-multiple-input-container">' +
to
'<div class="select3-multiple-input-containerADMIN">' +
depending on the if statement else path.
So how can I insert the if than else statement where I need to?
You're defining an object literal (Select3.Templates), and multipleSelectInput seems to be a string property. You can't put statements into an object literal directly, but you can calculate a variable ahead of time and then set the property value to the value of that variable.
Example:
var multiSelectClass = "select3-multiple-input-container";
if (something == "admin")
multiSelectClass += "ADMIN";
Select3.Templates = {
// stuff
multipleSelectInput: '<div class="' + multiSelectClass + '"....."
}
Well, I have a table with multiple text nodes I'm getting through the .text() function and linking to another table with one row that I'm using as a timeline.
I tried to input in a single td of the text values that corresponds to the correct data, but I only managed to grab the last value I in my loop, instead of getting them all. Here is my code:
var tHold, divLine, id, dataTitle, dataDescription;
$(".class1").each(function(){
tHold = $(this);
$(".class2").each(function(){
if ($(this).text() == tHold.attr("value")){
if($('#1').children("div#" + tHold.attr("name")).length == 0){
dataTitle = '<div class="r">' + $(this).text() + '</div><br/>';
dataDescription = '<div class="t">' + $(this).parent().children(".x").text() + ': ' + $(this).parent().children(".y").text() + ' (' + $(this).parent().children(".z").text() + ')' + '</div>';
divLine = $('<div id="' + tHold.attr("name") + '" class="b" value="' + tHold.attr("value") + '"></div>');
divLine.append(dataTitle);
divLine.append(dataDescription);
$("#1").append(divLine);
}
if($('#2').children("div#id" + tHold.attr("name")).length == 0){
dataTitle = '<div class="r">' + $(this).text() + '</div><br/>';
dataDescription = '<div class="t">' + $(this).parent().children(".x").text() + ': ' + $(this).parent().children(".y").text() + ' (' + $(this).parent().children(".z").text() + ')' + '</div>';
divLine = $('<div id="des' + tHold.attr("name") + '" class="c" value="' + tHold.attr("value") + '"></div>');
divLine.append(dataTitle);
divLine.append(dataDescription);
$("#2").append(divLine);
}
}
});
});
It's been simplified and cut out of a whole context , but all that matters is there. How can I set dataDescription to be multiple divs with diferent values instead of just the last I loop through?
What I thought should have been easy has now taken great amount of my time.
I'm simply trying to edit some text in the /plugins/advlink/js/advlink.js file.
Consider this function:
function getTargetListHTML(elm_id, target_form_element) {
var targets = tinyMCEPopup.getParam('theme_advanced_link_targets', '').split(';');
var html = '';
html += '<select id="' + elm_id + '" name="' + elm_id + '" onchange="this.form.' + target_form_element + '.value=';
html += 'this.options[this.selectedIndex].value;">';
html += '<option value="_self">' + tinyMCEPopup.getLang('advlink_dlg.target_same') + '</option>';
html += '<option value="_blank">' + tinyMCEPopup.getLang('advlink_dlg.target_blank') + ' (_blank)</option>';
html += '<option value="_parent">' + tinyMCEPopup.getLang('advlink_dlg.target_parent') + ' (_parent)</option>';
html += '<option value="_top">' + tinyMCEPopup.getLang('advlink_dlg.target_top') + ' (_top)</option>';
for (var i=0; i<targets.length; i++) {
var key, value;
if (targets[i] == "")
continue;
key = targets[i].split('=')[0];
value = targets[i].split('=')[1];
html += '<option value="' + key + '">' + value + ' (' + key + ')</option>';
}
html += '</select>';
return html;
}
If I make changes to for example advlink_dlg.target_blank in the appropriate language file, the changes seems to show up ok.
But if I try to change the ' (_blank)' on the same line to whatever, eg. ' (__blank)', nothing happens.
Why is that?
What you did should work!
I changed the line (in /plugins/advlink/js/advlink.js) to
html += '<option value="_blank">' + tinyMCEPopup.getLang('advlink_dlg.target_blank') + ' (XXXXXXXXXXXX_blank)</option>';
and see what i got after selecting some text + pushing the link-button: