How to show the data retrieved from firebase in a container.
this is my code
var dbBlogs = fiebase.database.ref("users").child("blogs").orderByChild("time");
dbBlogs.on("value", function(blogs){
if (blogs.exists())
{
var container = "";
blogs.forEach(function(singleBlog){
var mDesc = singleBlog.val().desc;
var mTime = singleBlog.val().time;
var mDate= singleBlog.val().date;
container += "<div class='jumbotron bg-light text-dark border border-dark'>";
container += "<div class='row'>";
container += "<div class='col-sm-5'> <p style='color:grey;>"
+"Desc: " + mDesc;
+"Date" + mTime;
+"time" + mDate;
+ "</p> </div>";
container += "/div>";
container += "/div>";
});
$("blogs").html(container);
}
});
this is my database
enter image description here
Please can anyone help me, I am new
Related
I am trying to get images from a Firebase Storage into a table, and the links to each image are given as a Child in a Firebase Database. By following many of the SE recommendations, I finally got a code that can convert images from from gs:// to http://. By using alert(url), I can see the image link that can potentially be inserted in a <img>, but I can't manage to make it show as an image object. What am I doing wrong in the code? Can anyone help me to elucidate this?
In the code below, imageUrl contains the gs:// code
< script >
var events = firebase.database();
var storage = firebase.storage();
events.ref("-Events").orderByKey().limitToLast(10).once('value', function(snapshot) {
if (snapshot.exists()) {
var content = '';
snapshot.forEach(function(data) {
var val = data.val();
var link = val.imageUrl;
var storageRef = storage.refFromURL(link).getDownloadURL().then(function(url) {
var test = url;
alert(url);
document.querySelector('img').src = test;
alert(test);
}).catch(function(error) {});
content += '<tr>';
content += '<td>' + val.imageUrl + '</td>';
content += '<td>' + '<img src="storageRef.url" alt='
' border=3 height=100 width=100>' + '</td>';
content += '</tr>';
});
$('#ex-table').append(content);
var tbody = $('table tbody');
tbody.html($('tr', tbody).get().reverse());
}
});
<
/script>
I am trying to send an HTML email using MailApp.
This is the table where I will pull the data from:
After reading the documentations and posts on SO, I am still unable to pin point why the email sent out is showing undefined in the variables part.
Would appreciate if someone can point me to the right direction.
These are my codes:
sendHtmlEmail.gs
function sendEmails() {
var ss = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var lastRow = ss.getLastRow();
var quotaLeft = MailApp.getRemainingDailyQuota();
if((lastRow-1) > quotaLeft){
Browser.msgBox("You have " + quotaLeft + " email quota left and you're trying to send " + (lastRow-1) + " emails. Emails were not sent.")
} else {
for (var row = 2; row <= lastRow; row++){
var currentEmail = ss.getRange(row, 4).getValue();
var currentContact = ss.getRange(row, 3).getValue();
var currentNewSize = ss.getRange(row,8).getValue();
var currentSub = ss.getRange(row, 9).getValue();
var returnData = [currentContact, currentNewSize, currentSub];
var html = HtmlService.createTemplateFromFile('htmlTemplate');
html.data = returnData;
var template = html.evaluate().getContent();
var subjectLine = "Important notice";
MailApp.sendEmail({to: currentEmail, subject: subjectLine, htmlBody: template});
} //close for loop
Browser.msgBox("You have successfully sent " + (lastRow-1) + " emails.")
} //close else statement
}
htmlTemplate.html
<!DOCTYPE html><html><head><base target="_top"></head><body style="text-align: center;font-family: Arial;">
<div id="center" style="width:300px;border: 2px dotted grey;background:#ececec;margin:25px;margin-left:auto;
margin-right:auto;padding:15px;"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Simple_Alert.svg/600px-Simple_Alert.svg.png"
width="180" style="margin:10px 0px"><br /><div style=" border: 2px dotted grey;background:white;margin-right:auto; margin-left:auto;
padding:10px;"><h2>Alert</h2><h3>Important Notice <br /><br />
+ <?= data.currentContact ?> + '<br />' + <?= data.currentNewSize ?> + '<br />' + <?= data.currentSub ?> + '<br /></h3></div></body></html>'
I know that it is something to do with the htmlTemplate data.currentNewSize etc, but after tweaking my codes they are still showing undefined as shown in the image.
You are using an array in the method while the template is expecting an object.
Replace
var returnData = [currentContact, currentNewSize, currentSub];
with
var returnData = {currentContact: currentContact, currentNewSize: currentNewSize, currentSub: currentSub}
The issue lies in the html code. As I have declared the array in sendHtmlEmail.gs, I did not call it correctly in my htmlTemplate.html.
In this line:
var returnData = [currentContact, currentNewSize, currentSub];
currentContact is in position 0, currentNewSize is in position 1 and so forth.
In the htmlTemplate.html, I need to replace this line:
+ <?= data.currentContact ?> + '<br />' + <?= data.currentNewSize ?> + '<br />' + <?= data.currentSub ?> + '<br /></h3></div></body></html>'
with this:
+ <?= returnData[0];?> + '<br />' + <?= returnData[1];?> + '<br />' + <?= returnData[2];?> + '<br /></h3></div></body></html>'
So i have a empty table
HTML:
<div>
<table border="1" id="committabelle"></table>
</div>
and a JScript function which fills the table
JSCRIPT:
function loadCommits(xml) {
var i;
var xmlDoc = xml.responseXML;
var table = '<tr><th>Commit</th><th>User</th><th>Datum</th><th>More Information</th></tr>';
var shortId = xmlDoc.getElementsByTagName("a:ShortId");
var user = xmlDoc.getElementsByTagName("a:UserId");
var Date = xmlDoc.getElementsByTagName("a:Date");
for (i = 0; i < shortId.length; i++) {
var tmp = shortId[i].childNodes[0].nodeValue später an den Button
var datetmp = Date[i].childNodes[0].nodeValue
var euro_date = datetmp.split('T');
var date_de = euro_date.join('--');
table += "<tr><td>" +
shortId[i].childNodes[0].nodeValue +
"</td><td>" +
user[i].childNodes[0].nodeValue +
"</td><td>" +
date_de +
"</td><td>" +
'<button id="' + shortId[i].childNodes[0].nodeValue + '" class="button button2" >Give me Information!</button>' +
"</td></tr>";
}.
document.getElementById("committabelle").innerHTML = table;
}
The problem is that I can't change the size of the table. I wanted to change it so the height is for example 200px and then I used overflow so i get a scrollbar. I tried literally everything from height to max-height, table-layout: fixed and from overflow: auto to overflow: scroll. I event tried to force the size of the table with the browser-DOM-explorer after it is loaded in the browser.
I'm a little desperate right now. Anyone got an idea?
This the page I'm working on:
http://gacc.nifc.gov/gbcc/predictive/PSA_ERCmap/Dev/PSAERCmap1.html
When you click on a shaded area the chart associated with the area pops up. What I'm trying to figure out is how to get the "Next PSA" link at the bottom to advance the chart in the popup to the next PSA every time you click it. I've figured out how to get it to advance by one PSA, but can't get it past that one. You'll see if you click on the link.
I have a function (called replace) that replaces the image source for the chart with a link to the next PSA number up. However, I can't figure out how to get it to increment. I tried PSA++ and PSA=PSA1 but neither of them work.
Here's my code:
<title>DEV PSA ERC Map DEV</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function overlay(a) {
PSA = a.id;
var numeric = a.id.replace('GB', '');
PSAnum = Number(numeric)
PSA1 = PSAnum + 1;
nextPSA = ('0' + PSA1).slice(-2);
var overlayContent = '';
overlayContent += '<div id="overlay">';
overlayContent += '<div>';
var imgsrce = '';
imgsrce += 'Charts/WebCharts/GB';
imgsrce += numeric;
imgsrce += '/ERCGraph.PNG';
overlayContent += '<img id="chartimage" src="';
overlayContent += imgsrce;
overlayContent += '" />';
overlayContent += '<br /><b><h1> Close</b></h1>';
overlayContent += '<b><h1> Next PSA</b></h1>';
overlayContent += '</div>';
overlayContent += '</div>';
$("#overlay").replaceWith(overlayContent);
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
if (el.style.visibility == "visible") {
//el.style.visibility="hidden";
}
} //end of overlay function
function replace(a) {
image = document.getElementById('chartimage');
console.log(image.src);
console.log(PSA);
image.src = 'Charts/WebCharts/GB';
image.src += nextPSA;
image.src += '/ERCGraph.PNG';
PSA++;
console.log(PSA);
} //end of replace function
$('.overlay-bg').click(function() {
closePopup();
});
function closePopup() {
el = document.getElementById("overlay");
el.style.visibility = "hidden";
}
$(function() {
$.get("getDate.php", function(data) {
document.getElementById("timestamp").innerHTML = "<b>RAWS observations updated on " + data + "</b>";
});
});
var file;
file = 'GB_PSAdata_Real.js';
$.getJSON(file, function(events) {
var gbname = Object.keys(events);
var divContent = '';
divContent += '<div id="map">';
divContent += '<map name="mapmap">';
for (i = 0; i < gbname.length; i++) {
var PSA = (gbname[i]);
JSONcoords = events[PSA][0].Coords;
JSONcoordString = JSONcoords.toString();
divContent += '<area id="' + PSA + '" href="#" shape="poly" coords="';
divContent += JSONcoordString;
divContent += '" onclick="overlay(this)">';
// console.log(divContent)
}
divContent += '</map>';
divContent += '<img src="GetPSAavg.php" width="826" height="1005" usemap="#mapmap" />';
divContent += '</div>';
$("#map").replaceWith(divContent);
//$("#overlay").replaceWith(overlayContent);
;
})
</script>
</head>
<div id="overlay">
</div>
<body>
<div id="header">
<img src="PSlogo.png" style="height:75px">
<img src="GBlogo.png" style="height:75px">
<span><b>Great Basin ERC Percentiles</b> *Experimental*</span>
</div>
<div id="main">
<div id="map"></div>
<div id="timestamp">RAWS Observations Updated</div>
<div id="legend">
<img src="LegendFull2.png" id="legendIMG">
</div>
</div>
</body>
</html>
You need to move the code that increments the number into the replace() function, so it gets executed each time replace() is called. Currently it is executed only once when the overlay() function is called.
First, explicitly declare a global variable (outside of any function):
var currentPSANum = null;
Place this line inside the overlay() function:
currentPSANum = Number(a.id.replace('GB',''));
Then use the following for the replace() function:
function replace(a) {
currentPSANum++;
var image = document.getElementById('chartimage');
image.src = 'Charts/WebCharts/GB' + ('0' + currentPSANum).slice(-2) + '/ERCGraph.PNG';
}
Can you please tell me how to make list in jQuery mobile? I am trying to make this type list as given in fiddle on pop up screen dynamically .
Here is the fiddle
In this fiddle I make two rows.In first row there is only p tag. But in second row there is nested collapsible rows. I need to make same thing in pop up screen. I am able to make first row. But In my second row contend is null why? Can you suggest where I am wrong?
fiddle
$(function () {
$('#test').click(function(){
alert('d');
createCommandPopUpTabs();
$("#tabbedPopup").popup("open");
});
});
var tabsHeader = [ "InputParameter", "basic"];
var tabsHeader_basic = [ "XYZ", "Third Level",
];
function createCommandPopUpTabs(){
var header = "<h3 >dd</h3>";
var commmand = 'dd';
var button = '<button onclick="return submitCommand("'+
'")" style="" class="donebtn common-button1">Save</button>';
$("#commandInfo").append(button);
$("#commandInfoheader").html(header);
for ( var i = 0; i < tabsHeader.length; i++) {
var headerId = tabsHeader[i] + "_tab" + commmand;
var header = "<div data-role='collapsible' data-collapsed='false' id='"
+ headerId + "'><h3>InputParameter</h3></div>";
var content ;
if(tabsHeader[i]=="InputParameter"){
content = "<p>yes</p>";
}else if(tabsHeader[i]=="basic"){
for ( var i = 0; i < tabsHeader_basic.length; i++) {
headerId = tabsHeader_basic[i] + "_tab" + commmand;
header = "<div data-role='collapsible' data-collapsed='false' id='"
+ headerId + "'><h3>basic</h3></div>";
content += getcontend(tabsHeader_basic[i]);
}
}
$("#tabbedSet").append(header);
$("#tabbedSet").find("#" + headerId).append(content);
$("#tabbedSet").collapsibleset("refresh");
}
}
function getcontend(name){
if(name=="Third Level"){
return"<p>Third Level></p>";
} if(name=="XYZ"){
return"<p> second Level></p>";
}
}
There are errors in your code and logic. I will only go over a couple of them to hopefully get you on the right path:
In tabsHeader_basic array the Third Level has a space in it which you later use as an ID which makes it an invalid ID because you cannot have spaces in an ID.
From the HTML 5 Draft:
The value must not contain any space characters.
Also, the "basic" collapsible div needs to exist before you start adding the nested collapsible div.
So this line needs to come out of the for loop
header = "<div data-role='collapsible' data-collapsed='false' id='"+ headerId + "'><h3>basic</h3></div>";
Go through the JSFiddle and compare your code agaisnt my changes.
Hopefully that helps! Let me know if you have any other questions.
I have updated createCommandPopUpTabs() function.
Also removed space in Third Level on var tabsHeader_basic = ["XYZ", "ThirdLevel"];
Check the Updated Fiddle
function createCommandPopUpTabs() {
var header = "<h3 >dd</h3>";
var commmand = 'dd';
var button = '<button onclick="return submitCommand("' +
'")" style="" class="donebtn common-button1">Save</button>';
$("#commandInfo").html(button);
$("#commandInfoheader").html(header);
$("#tabbedSet").html('');
for (var i = 0; i < tabsHeader.length; i++) {
var headerId = tabsHeader[i] + "_tab" + commmand;
var header = "<div data-role='collapsible' data-collapsed='true' id='" + headerId + "'><h3>" + tabsHeader[i] + "</h3></div>";
$("#tabbedSet").append(header);
var content;
if (tabsHeader[i] == "InputParameter") {
content = "<p>yes</p>";
$("#tabbedSet").find("#" + headerId).append(content);
} else if (tabsHeader[i] == "basic") {
for (var j = 0; j < tabsHeader_basic.length; j++) {
var headerId1 = tabsHeader_basic[j] + "_tab" + commmand;
var header1 = "<div data-role='collapsible' data-collapsed='true' id='" + headerId1 + "'><h3>" + tabsHeader_basic[j] + "</h3></div>";
var content1 = getcontend(tabsHeader_basic[j]);
$("#tabbedSet").find("#" + headerId).append(header1);
$("#tabbedSet").find("#" + headerId1).append(content1);
}
}
$("#tabbedSet").collapsibleset("refresh");
}
}