JavaScript inserting images - javascript

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 +"\" /> ";

Related

How can I loop into the objects of a DTO in Ajax?

I'm trying to GET all players from a list, but the whole GetMapping it's constructed around Player DTO. The data I want to loop is a list of "players" stored into a DTO like this:
{
PLAYERS: [
{ player0 {parameters...} },
{ player1 {parameters...} },
...
]
}
Here is my ajax code in JS:
//GET ALL PLAYERS
function getAllPlayers() {
document.getElementById("erase_repeated_results").innerHTML = ""; //to erase info I don't want to store
document.getElementById("fullInfo").innerHTML = "";
document.getElementById("data").innerHTML = "";
document.getElementById("sameRoles").innerHTML = "";
$.ajax({
type: "GET",
url: "http://localhost:8081/dices/players",
contentType: "application/json",
dataType: "json",
success: function (data) {
for (var j = 0; j < data.length; j++) {
document.getElementById("fullInfo").innerHTML += "Complete info of player " + (j+1) + ": " + "<br />" + "<br />" +
"The ID of this player is: " + data[j].id + "<br />" +
"The name of this player is: " + data[j].name + "<br />" +
"The register date of this player is: " + data[j].registerDate + "<br />" +
"The total amount of dice rolls of this player is: " + data[j].totalDiceRolls + "<br />" +
"The total amount of games won of this player is: " + data[j].gamesWon + "<br />" +
"The success rate of this player is: " + data[j].successRate + "<br />";
console.log(data[j]);
}
},
error: function () {
alert("Something went wrong! Maybe you are entering parameters not related to our Database!");
}
});
}
Below I attached a screenshot so you can see how it is working while I debug it, and you'll see in the scope section what I'm talking about.
How can I enter only in the array parameter of the DTO?
In your data structure, it's the PLAYERS property which is an array. data is an object containing a single property called PLAYERS. So looping through that makes no sense. Just loop through the players array instead:
for (var j = 0; j < data.PLAYERS.length; j++) {
document.getElementById("fullInfo").innerHTML += "Complete info of player " + (j+1) + ": " + "<br />" + "<br />" +
"The ID of this player is: " + data.PLAYERS[j].id + "<br />" +
"The name of this player is: " + data.PLAYERS[j].name + "<br />" +
"The register date of this player is: " + data.PLAYERS[j].registerDate + "<br />" +
"The total amount of dice rolls of this player is: " + data.PLAYERS[j].totalDiceRolls + "<br />" +
"The total amount of games won of this player is: " + data.PLAYERS[j].gamesWon + "<br />" +
"The success rate of this player is: " + data.PLAYERS[j].successRate + "<br />";
console.log(data.PLAYERS[j]);
}

Run 2 functions inside a master function

I'm a beginner, sorry if my code might look a bit messy.
I'm trying to write a function to send an email to a specific email address whenever a cell in a column is equal to send_email. The email body needs to include data from the row with the cell equal to send_email.
This is my code:
function warnStatusBeginDay() {
// This function imports house data, every day, between 0am and 1am, and sends an email if the time left to answer the 'acta de observacion' is 3 or 7 days from the deadline
//Check when to send email
var checkValues = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('service_1_2_main').getRange('V2:AQ').getValues();
for (var i in checkValues) {
if (checkValues[i][4] === 'send_email') {
//Send email notification
function sendMail_7() {
// Build email body
var email_head = "https://i.imgur.com/aaa.jpg";
var house_id = checkValues[i][10];
var project = checkValues[i][7];
var name = checkValues[i][14];
var address = checkValues[i][19];
var neigh = checkValues[i][21];
var municipality = checkValues[i][17];
var country = checkValues[i][18];
var acta_date = Utilities.formatDate(checkValues[i][13],"GMT-0500","d MMM yyyy");
var acta_date_limit = Utilities.formatDate(checkValues[i][12],"GMT-0500","EEE, d MMM yyyy");
var record_id = checkValues[i][11];
var lat = checkValues[i][8];
var lng = checkValues[i][9];
var imageURL = checkValues[i][20];
var mapURL = "http://maps.googleapis.com/maps/api/staticmap?center="+lat+","+lng+"&zoom=15&size=300x300&maptype=hybrid&markers=color:red%7C"+lat+","+lng+"&key=myKey";
var mapURL2 = "https://www.google.com/maps/search/?api=1&query="+lat+","+lng;
var body = "<p>" +
"<p><img src='" + email_head + "' width='269' height='70' alt='Build Change - Sistema de notificación'></p>" +
"<i>[Este es un mensaje automatizado, por favor no responda a este correo]</i>" + "<br>" + "<br>" +
"La vivienda a continuación recibió una acta de observación el " + acta_date + ". El plazo limite para responder al acta vence en <b>7 días</b> desde hoy." + "<br>" + "<br>" +
"<b>Código ID vivienda: </b>" + house_id + "<br>" +
"<b>Proyecto: </b>" + project + "<br>" +
"<b>Nombre y apellido propietario: </b>" + name + "<br>" +
"<b>Fecha vencimiento acta de observación: </b>" + acta_date_limit + "<br>" + "<br>" +
"<b>Código ID Fulcrum: </b>" + record_id + "<br>" +
"<b>Latitud y longitud: </b>" + lat + ", " + lng + "<br>" +
"<b>Barrio/Comuna/Localidad/Sector: </b>" + neigh + "<br>" +
"<b>Dirección: </b>" + address + "<br>" +
"<b>Municipalidad: </b>" + municipality + "<br>" +
"<b>País: </b>" + country + "<br>" +
"<p><a href='https://web.fulcrumapp.com/records/" + record_id + "' title='Open in Fulcrum'><img src='" + mapURL + "'></a>" + " " + "<img src='" + imageURL + "' height='300 alt='Imagén fachada vivienda'></p>" +
"</p>";
// Send email
MailApp.sendEmail({
to: "myemail.dev#gmail.com",
subject: house_id + " - Acta de observación en vencimiento (7 días restantes)",
htmlBody: body
});
}
sendMail_7();
}
else {
continue;
}
}
SpreadsheetApp.flush();
for (var j in checkValues) {
if (checkValues[j][6] === 'send_email') {
//Send email notification
function sendMail_3() {
// Build email body
var email_head = "https://i.imgur.com/aaa.jpg";
var house_id = checkValues[j][10];
var project = checkValues[j][7];
var name = checkValues[j][14];
var address = checkValues[j][19];
var neigh = checkValues[j][21];
var municipality = checkValues[j][17];
var country = checkValues[j][18];
var acta_date = Utilities.formatDate(checkValues[j][13],"GMT-0500","d MMM yyyy");
var acta_date_limit = Utilities.formatDate(checkValues[j][12],"GMT-0500","EEE, d MMM yyyy");
var record_id = checkValues[j][11];
var lat = checkValues[j][8];
var lng = checkValues[j][9];
var imageURL = checkValues[j][20];
var mapURL = "http://maps.googleapis.com/maps/api/staticmap?center="+lat+","+lng+"&zoom=15&size=300x300&maptype=hybrid&markers=color:red%7C"+lat+","+lng+"&key=myKey";
var mapURL2 = "https://www.google.com/maps/search/?api=1&query="+lat+","+lng;
var body = "<p>" +
"<p><img src='" + email_head + "' width='269' height='70' alt='Build Change - Sistema de notificación'></p>" +
"<i>[Este es un mensaje automatizado, por favor no responda a este correo]</i>" + "<br>" + "<br>" +
"La vivienda a continuación recibió una acta de observación el " + acta_date + ". El plazo limite para responder al acta vence en <b>3 días</b> desde hoy." + "<br>" + "<br>" +
"<b>Código ID vivienda: </b>" + house_id + "<br>" +
"<b>Proyecto: </b>" + project + "<br>" +
"<b>Nombre y apellido propietario: </b>" + name + "<br>" +
"<b>Fecha vencimiento acta de observación: </b>" + acta_date_limit + "<br>" + "<br>" +
"<b>Código ID Fulcrum: </b>" + record_id + "<br>" +
"<b>Latitud y longitud: </b>" + lat + ", " + lng + "<br>" +
"<b>Barrio/Comuna/Localidad/Sector: </b>" + neigh + "<br>" +
"<b>Dirección: </b>" + address + "<br>" +
"<b>Municipalidad: </b>" + municipality + "<br>" +
"<b>País: </b>" + country + "<br>" +
"<p><a href='https://web.fulcrumapp.com/records/" + record_id + "' title='Open in Fulcrum'><img src='" + mapURL + "'></a>" + " " + "<img src='" + imageURL + "' height='300 alt='Imagén fachada vivienda'></p>" +
"</p>";
// Send email
MailApp.sendEmail({
to: "myemail.dev#gmail.com",
subject: house_id + " - Acta de observación en vencimiento (3 días restantes)",
htmlBody: body
});
}
sendMail_3();
}
else {
return;
}
}
}
Basically, I'm building an array through get.Values and then checking:
which row of the fifth column in the array is equal to send_email (checkValues[i][4] === 'send_email') and then send as many emails as the number of cells equal to send_email in the fifth column of the array, thanks to the function sendMail_7.
which row of the sevent column in the array is equal to send_email (checkValues[j][6] === 'send_email') and then send as many emails as the number of cells equal to send_email in the seventh column of the array, thanks to the function sendMail_3.
The function sendMail_7 works perfectly but I can't understand way the second part of the script, starting from for (var j in checkValues) {... is not working.
Actually the last curly bracket of the script is highlighted in red, so I think something is wrong but I don't know what.
I also tried to place the 2 functions to send emails, sendMail_7 and sendMail_3, outside of the main function warnStatusBeginDay. In this case the last curly bracket of the main function warnStatusBeginDay is green but in this way the variables defined in the email body (i.e. var name = checkValues[i][14] or var municipality = checkValues[i][17]) are not working.
I'm not sure if my explanation was clear but it's my first time with Google App Scripts/javascripts in general I'm a beginner in coding.
Any suggestion?
Thanks a lot,
Stefano
If your first j does not fulfill equation in (checkValues[j][6] === 'send_email') then you go out from the loop because of else{ return; }

next line for a html code on jquery [duplicate]

This question already has answers here:
Can you have multiple lines in an <option> element?
(5 answers)
Closed 8 years ago.
I have here my jquery (coffeescript)
if value.kind != 'Quasi-Judicial'
if value.court_agency !in court_agency_with_branch
if value.court_agency != 'Department of Justice'
#court_agency = "<option value=\"" + value.id + "\"> Branch "+ value.branch_division + ", " + value.court_agency + ", " + #city_or_municipality + ", " + value.province + "</option>"
else
#court_agency = "<option value=\"" + value.id + "\">" + value.court_agency + ", " + #city_or_municipality + ", " + value.province + "</option>"
else
#court_agency = "<option value=\"" + value.id + "\"> Division "+ value.branch_division + ", " + value.court_agency + "</option>"
else
#court_agency = "<option value=\"" + value.id + "\">" + value.department + ", " + value.govt_agency + ", " + #city_or_municipality + ", " + value.province + "</option>"
on this part
"<option value=\"" + value.id + "\">" + value.department + ", " + value.govt_agency + ", " + #city_or_municipality + ", " + value.province + "</option>"
I want to put some code \n
"<option value=\"" + value.id + "\">" + value.department + ", " + "\n" + value.govt_agency + ", " + #city_or_municipality + ", " + value.province + "</option>"
but nothing happens.
The value looks like:
Department of Blah blah, City of This thing, Province of this stuff
What possible code I can use to create an output like this:
Department of Blah blah,
City of This thing,
Province of this stuff
Take a look at Can you have multiple lines in an <option> element?.
(What you're looking for is a br tag in an option tag)
Please refer this demo
http://shyalika.com/mutiline_select_example
you can find more information here:
http://shyalika.com/multiline_select_control

Insert image in Bootstrap Popover

I am using Bootstrap Popver. I have inserted some data in the popover and want to insert a image as well. This is what I have tried.
Code:
var img = '<div id = "image"><img src = "http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" /></div>';
var button = "<button title = " + obj.hostname + ", " + gpu.toUpperCase() +
" data-content = \"" + metric_name[metric] + ": " + display_val + img + "\"" +
" data-id=\"" + detailed_summary + "\"" +
" data-text = \"" + obj.hostname + ", " + gpu.toUpperCase() + ", " + metric_name[metric] + ": " + display_val + "\"" +
" class=\"btn " + button_state + " gpu btn-lg open-InfoModal\"" +
" data-toggle=\"modal\" " +
" data-html=\"true\" " +
" rel=\"popover\" " +
" data-target=\"#hostInfo\" " +
" href=\"#infoModal\"></button>";
Initialisation:
$('button').popover({
trigger: "hover",
placement: get_popover_placement,
html: true
});
I have seen some examples on Stack Overflow, but it didn't work for me as I want to insert it inside the button declaration.
Make use of the content setting of the popover function:
$('button').popover({
trigger: "hover",
placement: get_popover_placement,
html: true,
content: img //loads the image inside the popover container
});
DEMO
I have solved it using the code below.
button = "<button title = " + obj.hostname + ", " + gpu.toUpperCase() +
" data-content = \"" + returnPOContent(metric_name[metric], display_val) + "\"" +
//" data-content = \"" + metric_name[metric] + ": " + display_val + "\"" +
" data-id=\"" + detailed_summary + "\"" +
" data-text = \"" + obj.hostname + ", " + gpu.toUpperCase() + ", " + metric_name[metric] + ": " + display_val + "\"" +
" class=\"btn " + button_state + " gpu btn-lg open-InfoModal\"" +
" data-toggle=\"modal\" " +
" data-html=\"true\" " +
" rel=\"popover\" " +
" data-target=\"#hostInfo\" " +
" href=\"#infoModal\"></button>";
function returnPOContent(mName, dVal) {
var popOverContent = mName + ": " +dVal+"</br><div id='test'><img src='http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg'/></div>";
return popOverContent;
}
$("button").popover({
trigger: "hover",
placement: get_popover_placement,
html: true
});

Maintaining Line Breaks Through Facebook API Usage

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.

Categories

Resources