I have an array of email drafts that I got in apps script. I want to show them in a html file in a select element, but it shows up blank when I run it. Code below
code.gs
function doGet(e) {
return HtmlService.createHtmlOutput("index");
}
function doSomething() {
var drafts = GmailApp.getDrafts();
var drafty = [];
for(var i = 0; i < drafts.length; i++){
drafty.push(drafts[i].getMessage().getSubject());
}
Logger.log(drafty);
return drafty;
var select = document.getElementById("select"),
arr = drafty;
for(var i = 0; i < arr.length; i++)
{
var option = document.createElement("OPTION"),
txt = document.createTextNode(arr[i]);
option.setAttribute("value", arr[i]);
option.appendChild(txt);
document.getElementById("select").appendChild(option);
}
index.html
<!DOCTYPE html>
<html>
<head>
<script>
google.script.run.doSomething();
</script>
</head>
<body>
<select id="select" class="addon-select addon-form-input"></select>
</body>
Something like this:
gs:
function doSomething() {
var drafts=GmailApp.getDrafts();
var drafty=[];
for(var i=0;i<drafts.length;i++){
drafty.push(drafts[i].getMessage().getSubject());
}
Logger.log(drafty);
return drafty;
}
html:
<!DOCTYPE html>
<html>
<head>
<script>
google.script.run
.withSuccessHandler(function(A){
var id='select';
var select = document.getElementById(id);
select.options.length = 0;
for(var i=0;i<A.length;i++) {
select.options[i] = new Option(A[i],A[i]);
}
})
.doSomething();
</script>
</head>
<body>
<select id="select"></select>
</body>
</html>
Related
I'm attempting to dynamically create buttons with text loaded from a file into an array. The text loads, the array's created, but no buttons. I realize this has been asked before, but I must be doing something wrong.
var database = [];
var total;
document.getElementById('file').onchange = function() {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function(progressEvent) {
var lines = this.result.split('\n');
for (var line = 0; line < lines.length; line++) {
database[line] = lines[line].trim();
}
total = line;
};
reader.readAsText(file);
};
/*
function mkbuttons() {
for (let i = 0; i < total; i++)
$(document).ready(function() {
for (i = 0; i < total; i++) {
console.log(database[i]);
$('<button/>', {
text: database[i],
id: 'btn_' + i,
click: function() {
alert('hi');
}
});
}
});
}
*/
function mkbuttons() {
$(document).ready(function() {
for (i = 0; i < total; i++) {
console.log(database[i]);
$('<button/>', {
text: database[i],
id: 'btn_' + i,
click: function() {
alert('hi');
}
});
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Create Buttons</title>
</head>
<body>
<input type="file" name="file" id="file" accept=".txt">
<br><br>
<button i onclick="mkbuttons()">Make Buttons</button>
</body>
</html>
How do you think of this solution?
var database = [];
var total;
document.getElementById('file').onchange = function() {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function(progressEvent) {
var lines = this.result.split('\n');
for (var line = 0; line < lines.length; line++) {
database[line] = lines[line].trim();
}
total = line;
};
reader.readAsText(file);
};
function mkbuttons() {
for (let i = 0; i < total; i++)
$(document).ready(function() {
for (i = 0; i < total; i++) {
console.log(database[i]);
var newBtn = $('<button/>', {
text: database[i],
id: 'btn_' + i,
click: function() {
alert('hi');
}
});
$('#buttons').append(newBtn);
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Create Buttons</title>
</head>
<body>
<input type="file" name="file" id="file" accept=".txt">
<br><br>
<button i onclick="mkbuttons()">Make Buttons</button>
<div id="buttons">
</div>
</body>
</html>
There are two glaring issues with your for loop:
Only use $(document).ready outside the function and only once. It should not be inside a for loop
You have an inner loop which is also using the same index variable name of i
Once you fix this syntax things should work better, or at least be easier to debug..
I'm currently trying to pass an array of values from a Google Sheet to the HtmlService where I will have the user choose an option and eventually pass it back to the .gs script. I have been using these two links as references:
1. Google Documentation
2. Stack Overflow example
When running the code, I looked at my console and noticed this error:
VM3051:4 Uncaught TypeError: google.script.run.withSuccessHandler(...).getVersionArray is not a function
It appears that getVersionArray() is not being passed correctly. When removing this function from the rest of that google.script.run call, the error goes away.
Also, per link two, I tried that code with the template and never even got a window to pop up, so I have been using the HtmlOutput example from the Google documentation link as a starting point. I have also tried the code with and without the SandboxMode declaration.
gs code:
function bugPieChart() {
getVersionArray();
openDialog();
function getVersionArray() {
var ss = SpreadsheetApp.getActive();
var valuesR = ss.getSheetByName("report").getRange('R1:R').getValues();
var valuesS = ss.getSheetByName("report").getRange('S1:S').getValues();
var versionRSArray = [];
for (var i = 0; i < valuesR.length; i++) {
versionRSArray.push(valuesR[i][0]);
}
for (var i = 0; i < valuesS.length; i++) {
versionRSArray.push(valuesS[i][0]);
}
versionRSArray.sort();
var uniqueArray = [];
uniqueArray.push(versionRSArray[0]);
for (var i in versionRSArray ) {
if((uniqueArray[uniqueArray.length-1]!=versionRSArray[i]) && (versionRSArray[i] !== "")) {
uniqueArray.push(versionRSArray[i]);
}
}
return uniqueArray;
}
function openDialog() {
var html = HtmlService.createHtmlOutputFromFile('index');
SpreadsheetApp.getUi().showModalDialog(html, 'Dialog title');
var htmlOutput = html.setSandboxMode(HtmlService.SandboxMode.NATIVE);
return htmlOutput;
}
}
index.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$(function() {
google.script.run.withSuccessHandler(buildOptionsList)
.getVersionArray();
});
function buildOptionsList(uniqueArray) {
var list = $('#optionList');
list.empty();
for (var i = 0; i < uniqueArray.length; i++) {
list.append('<option value="' + uniqueArray[i].toLowerCase() + '">' + uniqueArray[i] + '</option>');
}
}
</script>
</head>
<body>
<select id="optionList">
<option>Loading...</option>
</select>
<input type="button" value="Close" onclick="google.script.host.close()" />
</body>
</html>
I think your just missing a closing bracket on the function above it.
function bugPieChart() {
getVersionArray();
openDialog();
}
function getVersionArray() {
var ss = SpreadsheetApp.getActive();
var valuesR = ss.getSheetByName("report").getRange('R1:R').getValues();
var valuesS = ss.getSheetByName("report").getRange('S1:S').getValues();
var versionRSArray = [];
for (var i = 0; i < valuesR.length; i++) {
versionRSArray.push(valuesR[i][0]);
}
for (var i = 0; i < valuesS.length; i++) {
versionRSArray.push(valuesS[i][0]);
}
versionRSArray.sort();
var uniqueArray = [];
uniqueArray.push(versionRSArray[0]);
for (var i in versionRSArray ) {
if((uniqueArray[uniqueArray.length-1]!=versionRSArray[i]) && (versionRSArray[i] !== "")) {
uniqueArray.push(versionRSArray[i]);
}
}
return uniqueArray;
}
function openDialog() {
var html = HtmlService.createHtmlOutputFromFile('index');
SpreadsheetApp.getUi().showModalDialog(html, 'Dialog title');
var htmlOutput = html.setSandboxMode(HtmlService.SandboxMode.NATIVE);
return htmlOutput;
}
I have been trying to search this, but haven't even found anyone with the same problem.
For my assignment, I had to write a javascript code that would read all the text from the external page (from the same directory though), but that's not the problem. The problem appeared when I have created a test html file with some random text.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<p> Just a random text.</p>
<h1> More of a random text</h1>
<p> And again, just testing the program.</p>
</body>
</html>
And this code is taken from the debugger:
Image of html file as from Inspector
The problem is my javascript code does read the text from this div element and append the array of words that i have.
Does anyone know why is this div generated and how to get rid of it ?
P.S I have tried creating other html files, but div appears there too.
Thanks in advance!
EDIT:
That's my JS code:
var externalPage;
var words = [];
var j = 0;
function indexOf(array, item) {
for (var i = 0; i < array.length; i++) {
if (array[i][0].toString() === item.toString()) return i;
}
return -1;
}
function clearNode(node) {
while (node.firstChild) {
node.removeChild(node.firstChild);
}
}
function sortNumerically(words) {
return words.sort(function(a,b){
return b[1] - a[1];
});
}
function sortAlphabetically(words) {
return words.sort();
}
function openFile(url) {
externalPage = window.open();
externalPage.location = url;
}
function extractWords(node) {
if (node.nodeType==Node.ELEMENT_NODE) {
for (var m = node.firstChild; m!=null; m = m.nextSibling)
extractWords(m);
}
else {
var value = node.nodeValue.trim();
value = value.split(/\s/);
for(var i = 0; i < value.length; i++) {
if(indexOf(words, value[i]) != -1) {
words[indexOf(words, value[i])][1] =
words[indexOf(words, value[i])][1] + 1;
} else if(value[i] != '') {
words.push([]);
words[j][0] = value[i];
words[j][1] = 1;
j++;
}
}
}
}
function populateTable(arr) {
var tbody = document.createElement('tbody');
clearNode(tbody);
for(var i = 0; i< words.length; i++) {
var tr = document.createElement('tr');
var tdW = document.createElement('td');
var tdF = document.createElement('td');
tdW.appendChild(document.createTextNode(arr[i][0]));
tdF.appendChild(document.createTextNode(arr[i][1]));
tr.appendChild(tdW);
tr.appendChild(tdF);
tbody.appendChild(tr);
}
document.getElementById('tableCounter').appendChild(tbody);
}
function generateArray(node) {
words = [];
j = 0;
extractWords(node, words);
alert(sortNumerically(words));
populateTable(words);
}
This hidden box is an effect of a virus. The page dataloading.net is know as a virus page. You can search for it with your favourite search-module (google, bing, ...).
As attached code snap that DIV definitely come from JS or any JS plugin which simply append to body with generated code.
I'm trying to automatically show stock results from an external page, using jquery and ajax. I changed my original file to make it simpler. Sadly, it is not working again.. Can anyone see what my problems are? Thank you so much!
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Stocks</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="projectstocks.js"></script>
</head>
<body>
<div>
<content id="content">
</content></div>
</body>
</html>
projectstocks.js:
window.onload = function() {
var stocks = [];
var content = document.getElementById("content");
update();
setInterval("getData()", 1000);
}
function getData(data) {
content.innerHTML = "";
var tbod = document.getElementById("stocks");
var myTable= "<table id='table' border='1'>";
for(var i = 0; i < data.length; i++) {
var tr = document.createElement('tr');
var obj = data[i];
for(key in obj){
console.log(key);
var value=(obj[key]);
console.log(value);
content.innerHTML += ("<tr><td>");
content.innerHTML += ((obj[key]));
content.innerHTML += ("<br><br></td></tr>");
}
}
myTable+="</table>";
}
function update() {
$.getJSON('http://shodor.org/~amalani/AjaxTutorial/stocks/stocks.php?symbols=GOOG+CAT+FB', getData);
}
Thanks again! This doesn't have to be very fancy, let me know if there's anything I don't need.
You are trying to write the results to these elements which do not exist in your html:
document.getElementById("stocktable").innerHTML = table;
var d = new Date();
document.getElementById("date").innerHTML = "Last Update: " + d.toLocaleString();
add
<div id="stocktable"></div>
<div id="date"></div>
to your html.
I want save textarea lines in js array.
this code works but if we have empty line in textarea, array elements values set undefined after empty line!
DEMO: http://jsfiddle.net/pYTjR/3/
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function check(){
var lines = $('#links').val().split(/\n/);
var texts = []
for (var i=0; i < lines.length; i++) {
if (/\S/.test(lines[i])) {
texts.push($.trim(lines[i]));
}
var links = texts;
var str = links[i];
alert(i+"- "+str);
}
}
</script>
</head>
<body>
<textarea id="links" name="upload" cols=80 rows=10>
www.example.com/book111.pdf
www.example.com/book222.pdf
www.example.com/book333.pdf
www.example.com/book444.pdf
www.example.com/book555.pdf
</textarea>
<input type="submit" id="getsize" name="getsize" value="textarea to array" onclick= "check()" />
</body>
</html>
DEMO: http://jsfiddle.net/pYTjR/3/
I think it is functioning as you are expecting except not alerting correctly. Try this:
http://jsfiddle.net/pYTjR/7/
function check(){
var lines = $('#links').val().split(/\n/);
var texts = [];
for (var i=0; i < lines.length; i++) {
if (/\S/.test(lines[i])) {
texts.push($.trim(lines[i]));
}
}
for (var i=0; i < texts.length; i++) {
alert(i+"- "+texts[i]);
}
}