When using the api and javascript to display the description of an event, how can i preserve the line breaks?
query.wait(function(rows) {
document.getElementById('debug').innerHTML =
new Date(rows[0].start_time * 1000) + "<br />" +
rows[0].start_time + "<br />" +
rows[0].end_time + "<br />" +
rows[0].location + ", " +
rows[0].venue['street'] +
rows[0].venue['city'] + ", " +
rows[0].venue['state'] + "<br />" +
rows[0].description;
;
});
You can use a <pre> element to preserve white space characters, such as \t and \n.
Related
I have a leaflet map running on a server whose popups are automatically filled with images. Some popups contain three images. The problem is that the broken image icon appears on those that contain fewer images. I've already tried to remove them with alt="", but it doesn't work.
Attached is a link to the app/code.
function forEachFeatureCC(feature, layer) {
var popUp =
"<h2>" + feature.properties.Name + "</h2>" +
"<img src='" + feature.properties.Bildlink + "'width='300'</img>" +
"<br>" + "<br>" +
"<h4>" + feature.properties.Beschreibung +
"<br>" + "<br>" +
"<img src='" + feature.properties.Bildlink_2 + "'width='300'</img>" +
"<br>" + "<br>" +
"<img src='" + feature.properties.Bildlink_3 + "' width='300' alt=''</img>" +
"<br>" + "<br>";
layer.bindPopup(popUp).update();
}
https://wasserwiki.eu/Wasserwiki_App_Mobile
OK, I see, you simply don't want to show the absent images. In that case you can do:
function getImageHtml(imagelink)
{
return "<img src='"+ imagelink + "' width='300'</img>" + "<br>" + "<br>";
}
function forEachFeatureCC(feature, layer)
{
var popUp = "<h2>" + feature.properties.Name + "</h2>";
if (feature.properties.Bildlink) {
popUp = popUp + getImageHtml(feature.properties.Bildlink);
}
if (feature.properties.Bildlink_2) {
popUp = popUp + getImageHtml(feature.properties.Bildlink_2);
}
if (feature.properties.Bildlink_3) {
popUp = popUp + getImageHtml(feature.properties.Bildlink_3);
}
layer.bindPopup(popUp).update();
}
I didn't test the code, so some debugging might be needed, but I think the general idea is clear?
I have this
let data =
"BEGIN:VCALENDAR\n" +
"CALSCALE:GREGORIAN\n" +
"METHOD:PUBLISH\n" +
"PRODID:-//Send project Invite//EN\n" +
"VERSION:2.0\n" +
"BEGIN:VEVENT\n" +
"UID:gestionprojectCalendarInvite\n" +
"DTSTART;VALUE=DATE-TIME:" +
convertDate(startDate) +
"\n" +
"DTEND;VALUE=DATE-TIME:" +
convertDate(endDate) +
"\n" +
"SUMMARY:" +
subject +
"\n" +
"DESCRIPTION:" +
description +
"\n" +
"LOCATION:" +
location +
"\n" +
"END:VEVENT\n" +
"END:VCALENDAR";
How can I add attendees to the data that is sent to the calendar event that i'm creating.
Here is the place where I need my info in :
I added
ATTENDEE;PARTSTAT=ACCEPTED;CN=NAME_OF_ATTENDEE:mailto:EMAIL_OF_ATTENDEE
Replace NAME_OF_ATTENDEE and EMAIL_OF_ATTENDEE with what you need.
This will put the correct information in the TO: box
I have an issue with the following code.
I am trying to change the content of a variable if a button is clicked and then output the corresponding content as part of a larger output. The output varies depending on if the inner button within the form is clicked.
Can anyone suggest a fix for this code or improvements?
In the output I should see a longer version as the extra block would be appended on to the newly created block and grab new id values generated. Any help would be great.
Here is my code:
<script>
$(document).ready(function() {
var currentID = 1;
$(':button#add').on('click',function() {
currentID++;
var clone = $('#content').clone();
clone.children('.content_title').attr('id', 'title_content-' + currentID);
clone.children('.content_more').attr('id', 'more_content-' + currentID);
clone.attr("id", "content_1");
clone.insertAfter('#content');
if(currentID >= 2) {
document.getElementById("add").style.display = "none";
}
});
});
</script>
</head>
<body>
<div>
<div>
<form action="" method="post">
<h1>Create Code</h1>
<fieldset>
<legend><span class="number"></span>Header</legend>
<label for="name">Title:</label>
<input type = "text" id = "title" />
</fieldset>
<fieldset id = "content">
<legend><span class="number"></span>Content</legend>
<label for="name">Title:</label>
<input class = "content_title" type = "text" id = "title_content" />
<label for="mail">Content:</label>
<input class = "content_more" type = "text" id = "more_content" />
</fieldset>
<input id = "add" type = "button" value = "Add" /> </form>
<button onClick="tryTest()">Code</button>
</div>
<div style = "float:left; width:48%; padding-left:10px;">
<p id="new_block"></p>
</div>
</div>
<script>
function tryTest() {
var quote = '"';
var start = "<pre><div class=" + quote + "newest" + quote + "></pre>";
var title = "title=" + quote + document.getElementById("title").value + quote;
var end = "<pre></div></pre>";
var start_1 = "{{widget type=" + quote + "new_version" + quote;
var title_1 = "title=" + quote + document.getElementById("title_content").value + quote;
var content_1 = "content=" + quote + document.getElementById("more_content").value + quote;
var end_1 = "template=" + quote + "other" + quote + "}}";
var title_2 = "title=" + quote + document.getElementById("title_content-2").value + quote;
var content_2 = "content=" + quote + document.getElementById("more_content-2").value + quote;
var widget = start_1 + "<br />" + title_1 + "<br />" + content_1 + "<br />" + end_1;
var widget_1 = start_1 + "<br />" + title_1 + "<br />" + content_1 + "<br />" + end_1 + start_1 + "<br />" + title_2 + "<br />" + content_2 + "<br />" + end_1;
if(add.clicked == false) {
document.getElementById("new_block").innerHTML = start + "<br />" + title + "<br />" + end + "<br /><br />" widget + "<br /><br />";
} else {
document.getElementById("new_block").innerHTML = start + "<br />" + title + "<br />" + end + "<br /><br />" widget_1 + "<br /><br />"";
}
</script>
This code is a strange mix of jQuery and vanilla JavaScript syntaxes...
But it would work if there was no parse error.
Those error were quite easy to find in a code editor like CodePen, by the way.
if(add.clicked == false) {
document.getElementById("new_block").innerHTML = start + "<br />" + title + "<br />" + end + "<br /><br />" + widget + "<br /><br />";
// Added a missing + sign ---> ---> ---> ---> here -------^
} else {
document.getElementById("new_block").innerHTML = start + "<br />" + title + "<br />" + end + "<br /><br />" + widget_1 + "<br /><br />";
// Added a missing + sign ---> ---> ---> ---> here -------^
}
} // Added this curly bracket to close the tryTest() function.
Just above this code block, is a condition to choose which string to append to new_block.
The if(add.clicked == false) { condition always evaluates to false, because add is not defined. So the property .clicked of undefined, obviously also is undefined...
Then "undefined" == false is false... And makes the else block to always execute.
This condition fixed will avoid the Cannot read property 'value' of null error on "Code" click if the "Add" has not been clicked.
There is a couple ways to determine if the "Add" button has been clicked.
Check if the element title_content-2 exist
Use a boolean "flag" turned to true on "add" click
Adding a class to the "Add" button on click
I will let you think about the solution you would prefer and try it.
Here is your code freed of the mentionned syntax errors in CodePen.
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
Hi I'm trying to insert specific images on specific pages when each pages loads and i just cant seem to get it, my code looks like this
function display() {
coursetitle = (x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue);
coursecode = (x[i].getElementsByTagName("code")[0].childNodes[0].nodeValue);
enrolledyear = (x[i].getElementsByTagName("year")[0].childNodes[0].nodeValue);
semester = (x[i].getElementsByTagName("semester")[0].childNodes[0].nodeValue);
labday = (x[i].getElementsByTagName("labday")[0].childNodes[0].nodeValue);
lectureday = (x[i].getElementsByTagName("lectureday")[0].childNodes[0].nodeValue);
description = (x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue);
graphic = (x[i].getElementsByTagName("graphic")[0].childNodes[0].nodeValue);
document.getElementById("show").innerHTML = "Title: " + coursetitle + "<br />Code: " +
+ coursecode + "<br />Year: " + enrolledyear + "<br />Semester:" + semester +
"<br />Lab Day:" + labday + "<br />Lecture Day:" + lectureday +
"<br />Course Description:<br/>" + description;
What should i do?
If graphic value has the image path
document.getElementById("show").innerHTML = "Title: " + coursetitle + "<br />Code: " +
+ coursecode + "<br />Year: " + enrolledyear + "<br />Semester:" + semester +
"<br />Lab Day:" + labday + "<br />Lecture Day:" + lectureday +
"<br />Course Description:<br/>" + description + "</br> <img src=\""+graphic +"\" /> ";