How to hyperlink data in popup? [duplicate] - javascript

This question already has answers here:
PHP parse/syntax errors; and how to solve them
(20 answers)
Closed 1 year ago.
I would like to hyperlink my url data in popup, where user can click those website. However, it did not work.
Below is my source code:
if ($rowCount > 0) {
//Array for JSON output
$rows = array();
//Get the SQL results
while($row = $result->fetch_array()){
$fid = $row["Id"];
$Name = $row["Name"];
$address = $row["address"];
$Star = $row["Star"];
$latitude = $row["latitude"];
$longitude = $row["longitude"];
$hp = $row["hp"];
$url = $row["url"];
$rows[] = array(
"fid" => $fid,
"Name" => $Name,
"address" => $address,
"Star" => $Star,
"latitude" => $latitude,
"longitude" => $longitude,
"hp" => $hp,
"url" => $url
);
}
echo "var dataPOIs = ";
//Output to JSON format
echo json_encode($rows, JSON_NUMERIC_CHECK);
echo ";\n";
echo '
for (var i=0; i<dataPOIs.length; i++){
L.marker([dataPOIs[i].latitude, dataPOIs[i].longitude],{icon: createIcon(), title:dataPOIs[i].Name}).bindPopup("Name: " + " " + "<b>" + dataPOIs[i].Name + "</b>" + "</br>" + "</br>" + "Star: " + "<b>" + dataPOIs[i].Star + "</b>" + "</br>" + "</br>" + "Address: " + " " + "<b>" + dataPOIs[i].address + "</b>" + "</br>" + "</br>" + "Hp: " + " " + "<b>" + dataPOIs[i].hp + "</b>" + "</br>" + "</br>" + "Website: " + " " + "<a href='" + dataPOIs[i].url + "'>" + "</a>").addTo(pois);
}
';
}
It shows
Parse error: syntax error, unexpected '" + dataPOIs[i].url + "'
(T_CONSTANT_ENCAPSED_STRING), expecting ';' or ','
in Popup line

I can see from the image link you shared that you were trying to implement a tooltip on a map on the frontend but you shared a backend (php) script.
This has nothing to do with your php code.
You should focus more on reading the map's documentation(google map) and see how you can implement a tooltip with hyperlink.
What you are looking for is called Info Window.
https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple.
Ps:
Learn to write better codes. Try seperating views from business logic.

Related

Problems with broken image icon

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?

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; }

insert values into my json between tags

I have this code:
$json = '[{"data":{"name":"Widget Shop USA","widget_a":300,"widget_b":250},"template":{"name":"<h1 class=\"name\"></h1>","cost":"<span class=\"cost\">Price: $</span>"}}]';
$array = json_decode($json, true);
$widget_a = $array[0]['data']['widget_a'];
$widget_b = $array[0]['data']['widget_b'];
$data_name = $array[0]['data']['name'];
$array[0]['template']['cost'] .= $widget_a + $widget_b;
$array[0]['template']['name'] .= $data_name;
What i am trying to do is to get the $array[0]['template']['cost'] and the $array[0]['template']['name'] and pass them into $json variable between the HTML fragments (h1,span). How can i achieve that?
i try to encode the $array:
$json_new = json_encode($array);
but the variables comes after the HTML fragments...Is there any way to pass it between H1 and SPAN tags?
To the question addressed in you comment, you can loop through a JSON, grab the relevant property and assign it like so:
function mm(obj) {
for (var prop in obj) {
obj.name = "<h2>" + obj.employees[0].firstName +"</h2>";
}
return obj;
}
console.log(mm(json));
Working JSBin https://jsbin.com/sefohu/edit?js,console
You can use:
indexOf and slice
for example:
$widget = $array[0].data.widget_a + $array[0].data.widget_b;
$data_name = $array[0].data.name;
$indexCost = $array[0].template.cost.indexOf('$<');
$array[0].template.cost = $array[0].template.cost.slice(0, $indexCost + 1) + $widget + $array[0].template.cost.slice($indexCost + 1, $array[0].template.cost.length);
$indexName = $array[0].template.name.indexOf('><');
$array[0].template.name = $array[0].template.name.slice(0, $indexName + 1) + $data_name + $array[0].template.name.slice($indexName + 1, $array[0].template.name.length);
alert($array[0].template.name);
alert($array[0].template.cost);
or use temp method:
$temp = document.createElement('template');
$temp.innerHTML = $array[0]['template']['name'];
$temp.getElementsByTagName('h1')[0].innerHTML = $array[0]['data']['name'];
$array[0]['template']['name'] = $temp.innerHTML;
if you can change the json my suggestion:
$json = '[{"data":{"name":"Widget Shop USA","widget_a":300,"widget_b":250},"template":{"nametag":"h1","nameclass":"name","costtag":"span","costclass":"cost"}}]';
and use:
$array = JSON.parse($json);
$widget = $array[0].data.widget_a + $array[0].data.widget_b;
$array[0].template.cost = '<' + $array[0].template.costtag + ' class="' + $array[0].template.costclass + '" >' + $widget + '</' + $array[0].template.costtag + '>';
$array[0].template.name = '<' + $array[0].template.nametag + ' class="' + $array[0].template.nameclass + '" >' + $array[0].template.name + '</' + $array[0].template.nametag + '>';
alert($array[0].template.name);
alert($array[0].template.cost);

Storing data from a select tag to a string using Javascript

I'm trying to take information out of a form controlled by a select statement and store it in a string. The plan is to send the information gathered from the user via email, which I used PHP to do. I have an idea how to do it (a while loop that's controlled by how many lines are in the list,) but I can't quite gather the information.
Here's the loop:
var empMessage = function(){
messageString = "";
var noEmp = $("#drpEmp option").length;
var i = 0;
$("#drpEmp").selector.index = i;
while (i < noEmp){
$("#drpEmp").index = i;
messageString = messageString +
"Name: " + firstName.val + " " + MI.val + " " + lastName.val + "<br/>" +
"Business: " + BusinessName.val + "<br/>" +
"Address: " + address.val + "<br/>" +
" " + city.val + ", " + state.val + " " + zip.val + "<br/>";
}
messageString = "<strong>Employee Information</strong><br/>" . messageString;
i++;
}
$("#stringHolder").val(messageString);
}
Here's the JS Fiddle:
https://jsfiddle.net/xptxz7by/3/
I know I probably really off. I know I have the loop working and the list is getting counted, but I can't seem to retrieve the information. I'm also thinking I'm approaching sending the information wrong and there's probably a better way of doing it, I just haven't figured out how.
The data you want is in the Employee object that you saved in each option's .data(), so you need to get that data and use the properties.
messageString = "<strong>Employee Information</strong><br/>";
$("drpEmp option:selected").each(function() {
var employee = $(this).data("employee");
messageString +=
"Name: " + employee.firstName + " " + employee.MI + " " + lastName + "<br/>" +
"Business: " + employee.BusinessName + "<br/>" +
"Address: " + employee.address + "<br/>" +
" " + employee.city + ", " + employee.state + " " + employee.zip + "<br/>";
});

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

Categories

Resources