We Keep Coding

Pass Google Apps Script variable to HTML script

I have a trigger set up in Google Sheets so a URL is automatically opened in a new browser window. This works if the URL is hardcoded. I want the URL to be a variable. How do I pass the URL variable from Apps Script to HTML script? I'm a novice coder so please explain like I'm 5.
This function works if the URL is text like 'https://www.google.com'
function openMap() {
var maplink = SpreadsheetApp.getActiveSheet().getRange("B2").getValues();
var js = "<script>window.open('https://www.google.com', '_blank', 'width=800, height=600');google.script.host.close();</script>";
var html = HtmlService.createHtmlOutput(js)
.setHeight(10)
.setWidth(100);
SpreadsheetApp.getUi().showModalDialog(html, 'Now loading.');
}
This function does not if the URL is a variable (I checked the maplink value and its a valid URL)
function openMap() {
var maplink = SpreadsheetApp.getActiveSheet().getRange("B2").getValues();
var js = "<script>window.open('maplink', '_blank', 'width=800, height=600');google.script.host.close();</script>";
var html = HtmlService.createHtmlOutput(js)
.setHeight(10)
.setWidth(100);
SpreadsheetApp.getUi().showModalDialog(html, 'Now loading.');
}

You can join strings in the following manner:
...
var url = 'https://www.google.com';
var js = "<script>window.open('" + url + "', '_blank', 'width=800, height=600');google.script.host.close();</script>";
...
Basically
you close the first part of your hardcoded string by closing the quotes
add the dynamical variabl with +
continue the hardcoded string by appending the second part with + and opening the quotes again
I hope this is clear!

How to download multiple files with window.open()?

I am trying to download multiple files at once. At first I use window.location = url but now it doesn't seem to work.
I've changed it to window.open(url, "_blank") and it only downloads the first one:
window.open("/host/Controller/DownloadDasFiles?paramId=204");
window.open("/host/Controller/DownloadDasFiles?paramId=205");
window.open("/host/Controller/DownloadDasFiles?paramId=206");
public FileResult DownloadDasFiles(int paramId)
{
var dasControl = UnityConfig.container.Resolve<IDasControlService>();
var filename = dasControl.GetDasFileToDownload(paramId);
return File(filename, "application/octet-stream", Path.GetFileName(filename));
}
In my real case I do this after AJAX success in a javascript loop, but this code should work, shouldn't it?

This may help. It will open all 3 windows at same time.
let test = [204, 205, 206];
let downLoadFileBaseUrl = '/host/Controller/DownloadDasFiles?paramId='
test.forEach(element => {
let file = `${downLoadFileBaseUrl}+${element}`;
window.open(file, '_blank', 'File :' + element + ',scrollbars=1,menubar=0,resizable=1,width=850,height=500');
});

Pinterest images returning broken after ajax call

So I'm trying to make a mini app where I can access a bunch of drawing references I pinned on my pinterest board. I managed to get ajax call to work and SOME of the images are appending but then some do not.
I originally used the url property but then everything broke so I switched to link where I managed to get some images but some were still broken. Afterward I added an if statement to weed out images that didn't have a link url.
This worked as I can see the urls popping up in the console, they just don't render images.
Does anyone have any ideas?
//on document start up
$(document).ready(function(){
//declare the global variables:
var queryURL, results, resultURL, imageHolder, image;
//create the url where we will get the images from pintrest
queryURL = "https://api.pinterest.com/v1/boards/gasulliv/concept-art-inspiration/pins/?access_token=AXHj1v5z8_oy5kcy6NtLlZaoY_XAFQ-h5sli9PNErKPqdSA7cQAAAAA&fields=id%2Clink%2Cnote%2Curl";
//empty the div
$("#images").empty();
//performing ajax call
$.ajax({
url: queryURL,
method: "GET"
}).done(function(response) {
console.log(response.data);
//creating a variable for the repsonse data
results = response.data;
//loop through the data
//this is the shorthand for a forloop
for (var i in results){
resultURL = results[i].link;
console.log(results[i].url);
if (results[i].link !== ""){
//put results in a variable and then with each loop append them to the div
imageHolder = $("<div class='imageHolder'>");
image = $("<img>").attr("src", resultURL);
imageHolder.append(image);
$('#images').prepend(imageHolder);
}
}
});
});

Figured it out.
Just a head's up if you do ever run into this problem with pinterest's api, you'll need to make sure your queryURL includes the original be sure to return it like this:
resultURL = results[i].image.original.url;
this should return the original image's url

Don't make your access token accessible to everyone !
then for readability, you can make a code like this :
var tpl = [
"<div class='results'>",
"<div class='card'>",
"<div class='card-result'>",
"<p class='pBlack20'>" + data.response.docs[i].lead_paragraph + "</p>",
"<p class='pBlack14'>" + data.response.docs[i].pub_date + "</p>",
"<a class='FontRed link' target='_blank' href='" + data.response.docs[i].web_url + "'>For more detail</a>",
"<hr>",
"</div>",
"</div>",
"</div>"
]
$('.results-content').append(tpl.join(''));

Set tab title on javascript window.open to show PDF file

I am opening a new tab to display a PDF file. I have the PDF file data on a bytearray, base 64.
I am able to get the data, and display it doing this:
downloadFile(strData, name) {
var newdata = "data:" + "application/pdf" + ";base64," + (strData);
var newWindow = window.open(newdata, "_blank");
newWindow.onload = function() { document.title = "My title"; }
return true;
}
The problem i am having is that i am not able to set the title to the new tab opened.
I would like to set a title like "PDF File" or just the name of the document (i am getting the file data and the file name separately and passing it to my downloadFile function.
Is there any way to set the title to this tab? Thanks in advance!

Try this:
....
var newWindow = window.open(newdata, "_blank");
newWindow.document.title = "Some title";
....
EDIT:
Another way to do this might be to send an iframe to a new window instead of opening it directly with the base64 string.
So something like:
var newWindow = window.open();
newWindow.document.write('<iframe src="data:application/pdf;base64,' + (strData) + '" frameborder="0" allowfullscreen></iframe>');
newWindow.document.title = "Your Title Here";

This worked for me.
var newWindow = window.open(newdata, "_blank");
setTimeout(function(){ newWindow.document.title = 'my new title'; }, 1000);

How to reed rss feeds with jquery mobile

I tried to read an RSS feed from an external website with the following code:
$.get('http://myrssurl.com',function (XMLmediaArray) {
$(XMLmediaArray).find('item').each(function() {
var item = $(this);
var title = item.find('title').text();
var description = item.find('description').text();
var link = item.find('link').text();
var image = item.find('enclosure[type="image/jpeg"]').attr('url');
});
});
I got an error message which says:
XMLHttpRequest cannot load http://myrssurl.com. No '*Access-Control-Allow-Origin*' header is present on the requested resource. Origin 'localhost is therefore not allowed access.
Do you know how to solve this?
Thanks for your help! in the meanwhile I tried to use the GOOGLE RSS FEED service but I also have to deal with a problem by using this:
in the html file I'm using this:
<script type="text/javascript">
new rssdisplayer("msndiv","http://www.myrssfeedurl",6,"date, description");
</script>
and in the Javascript file the follow:
google.load("feeds", "1"); //Load Google Ajax Feed API (version 1)
function rssdisplayer(divid, url, feedlimit, showoptions){
this.showoptions=showoptions || "" //get string of options to show ("date" and/or "description"wink
var feedpointer=new google.feeds.Feed(url) //create new instance of Google Ajax Feed API
feedpointer.setNumEntries(feedlimit) //set number of items to display
document.write('<div id="'+divid+'">Loading feed, </div>')
this.feedcontainer=document.getElementById(divid)
var displayer=this
feedpointer.load(function(r){displayer.formatoutput(r)}) //call Feed.load() to retrieve and output RSS feed
}
rssdisplayer.prototype.formatdate=function(datestr){
var itemdate=new Date(datestr)
return "<span style='color:gray; font-size: 90%'>"+itemdate.toLocaleString()+"</span>"
}
rssdisplayer.prototype.formatoutput=function(result){
if (!result.error){ //if RSS feed successfully fetched
var thefeeds=result.feed.entries //get all feed entries as a JSON array
var rssoutput="<ul>"
for (var i=0; i<thefeeds.length; i++){ //loop through entries
var itemtitle="" + thefeeds[i].title + ""
var itemdate=/date/i.test(this.showoptions)? this.formatdate(thefeeds[i].publishedDate) : ""
var itemdescription=/description/i.test(this.showoptions)? "<br />"+thefeeds[i].content : ""
rssoutput+="<li>" + itemtitle + " " + itemdate + itemdescription + "</li>"
}
rssoutput+="</ul>"
this.feedcontainer.innerHTML=rssoutput
}
else //else, output error
alert("Error fetching feeds: "+result.error.message)
}
but when I execute it in the Browser I get this error message:
Uncaught ReferenceError: rssdisplayer is not defined (index):127 (anonymous function)
Do you guys know what the issue is?

This is an AJAX security: https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS
You are not allowed to query on other websites.
I would recommend to parse the RSS feed on your server and re-format it in JSON for convenience.

I solved it with the Google API RSS Feed Service. The error came because the rssdisplayer.js file was included too late in the html file. Include it directly after the jquery mobile javascript