Google Apps Script CardService.setContent as HTML - javascript

I am using CardService in my Google Scripts Adds-On. I am trying to setContent as HTML for that I am reading it from Index.html. But while rendering it's printing CSS and Javascript as text rather then using it in Html content.
function buildPage() {
var html = HtmlService.createHtmlOutputFromFile('Index').getContent();
var card = CardService.newCardBuilder();
card.setHeader(CardService.newCardHeader().setTitle('How do you feel ...'));
var section = CardService.newCardSection()
.setHeader("<h4>What do you want? </h4>");
section.addWidget(CardService.newKeyValue()
.setTopLabel('choose one')
.setContent(html)
);
This is my Index.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
#things {
position: absolute;
top: 50%;
left: 50%;
color: green;
margin-right: -50%;
text-align: center;
}
</style>
</head>
<body>
<p>List of things:</p>
<ul id="things">
<li>Loading...</li>
</ul>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// The code in this function runs when the page is loaded.
$(function() {
google.script.run.withSuccessHandler(showThings)
.getLotsOfThings();
});
function showThings(things) {
var list = $('#things');
list.empty();
for (var i = 0; i < things.length; i++) {
list.append('<li>' + things[i] + '</li>');
}
}
</script>
</body>
</html>

GMail Add-Ons only support very basic html style.
See https://developers.google.com/gmail/add-ons/concepts/widgets#text_formatting

setContent() takes text and supports basic html formatting. I think it'll not support full html tags like styles, script etc
Reference
https://developers.google.com/apps-script/reference/card-service/key-value#setcontenttext

Related

How to update text in window using .innerHTML

I am making a very simple page that just counts how many seconds the user has had the tab open. In the console the seconds update, but on the page in the browser, it ain't.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Counter</title>
<script type="text/javascript">
window.seconds = document.getElementById('counts');
var count = setInterval('counter()', 1000);
function counter(){
console.log(seconds)
document.getElementById('counts').innerHTML = window.seconds + 1;
}
</script>
<style>
h2 {
text-align:center;
color:#032441;
font-family:monospace;
}
div {
text-align:center;
color:#032441;
font-size:70px;
font-family:monospace;
}
</style>
</head>
<body>
<script>
document.body.style.backgroundColor = "#EBE9BD"
</script>
<h2>
You have been on this page for
</h2>
<div id="counts">
0
</div>
<h2>
seconds.
</h2>
</body>
</html>
What is the problem?
The variable seconds is declared too soon before the element is even rendered, that's why I added the window.onload wrapper to your code.
You need to use innerHTML to change the content of a div element.
Not related, but you can also style the body tag via CSS rule.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Counter</title>
<script type="text/javascript">
window.onload = function () {
var seconds = document.getElementById('counts');
var count = setInterval(counter, 1000);
function counter(){
var newCount = Number(seconds.innerHTML) + 1
console.log(newCount);
seconds.innerHTML = newCount;
}
}
</script>
<style>
body {
backgroundColor: "#EBE9BD";
}
h2 {
text-align: center;
color: #032441;
font-family: monospace;
}
div {
text-align: center;
color: #032441;
font-size: 70px;
font-family: monospace;
}
</style>
</head>
<body>
<h2>
You have been on this page for
</h2>
<div id="counts">
0
</div>
<h2>
seconds.
</h2>
</body>
</html>
You could use the following:
<script type="text/javascript">
window.seconds = document.getElementById('counts');
setInterval('counter()', 1000);
function counter(){
console.log(seconds.innerHTML);
window.seconds.innerHTML++;
}
</script>
Bare in mind that 'counts' is not yet defined as soon as the script runs.
To access the "body" of an Element you have to access it via element.innerHTML which in your case would look like window.seconds.innerHTML = window.seconds.innerHTML + 1
EDIT: But that won't fix your problem.
Your script does not detect the <div id="counts"> element, since it has not been loaded yet, you can fix this by moving the script after the div
Since innerHTML returns a string, performing + will attach both strings and your seconds will look like 011111111 So you'll have to parse it to a string via parseInt(window.seconds.innerHTML)
So changing
window.seconds = window.seconds + 1
to
window.seconds.innerHTML = parseInt(window.seconds.innerHTML) + 1;
and moving the script tag at the very bottom, should to the trick

TypeError : button is null but working fine in console

So I wanted to make a webpage in which on button click, the background color changes.
Its showing TypeError on loading in browser but its working fine after pasting same JavaScript on console.
Code snippet
var colors = ["#0af5fa", "#0ab1fa", "#0a3efa", "#560afa", "#b70afa", "#fa0ad9", "#fa0a65", "#fa0a1e", "#fa5e0a", "#facc0a", "#cbfa0a", "#69fa0a", "#0afa1b", "#0afa77", "#0afae5", "#0a8efa"];
var flag = 0,
blinkCount = 0;
function blink() {
if (blinkCount == 15) {
blinkCount = 0;
blink();
} else {
var h1 = document.querySelector("h1");
var body = document.querySelector("body");
h1.style.color = colors[blinkCount];
body.style.background = colors[blinkCount];
blinkCount++;
}
}
var button = document.querySelector("button");
button.addEventListener("click", blink);
button {
width: 50%;
height: 100px;
background: black;
margin-top: 300px;
margin-left: 300px;
}
h1 {
color: #0af5fa;
}
body {
background: #0af5fa;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<script src="../JavaScript/ex153.js"></script>
<link href="../css/ex153.css" rel="stylesheet">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="">
<button><h1>Click Me</h1></button>
</div>
</body>
</html>
In Browser [Error]
TypeError: button is null[Learn More] ex153.js:25:1
You're running the script before the document has been fully parsed - see how the <script> is above the <body> and its <button>?
Either give the script tag the defer attribute:
<script defer src="..
Or move it to the bottom of the body:
</div>
<script src="../JavaScript/ex153.js"></script>
</body>
</html>
Or wrap the whole script in a DOMContentLoaded listener:
document.addEventListener('DOMContentLoaded', function() {
var colors;
// other code
});

Using Typeahead with iFrame

I am trying to implement autocomplete using Twitter typeahead library for a iFrame so that When I start typing in iframe the suggestions should start showing up but it isnt.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
</head>
<body>
<iframe id="editorArea-frame" style="width:100%; height:100%;" frameborder="0"></iframe>
</body>
</html>
<script type="text/javascript" src="iframe.js"></script>
Javascript code
var editorFrame = $('#editorArea-frame')[0];
var html = '';
html += '<style type="text/css">pre { background-color: #eeeeee; }</style>';
html += '<style type="text/css">html,body { cursor: text; } #editorDiv { display: inline-block; height: 100%; width: 100%; overflow-y:scroll; outline: none;}</style>';
html += '<body></div><div id="editorDiv" contentEditable="true"></div></body>';
editorFrame.contentDocument.open();
editorFrame.contentDocument.write(html);
editorFrame.contentDocument.close();
When I execute this piece of javascript code the iframe becomes blank and its body becomes empty.Can anyone point me as to what am i doing wrong?
$('#editorArea-frame').typeahead({
source: function(typeahead, query) {
return ['alpha', 'beta', 'bravo', 'delta', 'epsilon', 'gamma', 'zulu'];
}
});
You must apply typeahead on an input field.
I would also advise avoiding iframe if you can. This may save you some brain cells.

'$ is undefined' error but the function works

I am receiving the error '$ is undefined' from the first selector of js file.
I have added JQuery reference as a local file or google CDN. Also I have tried to put it at the beginning and end of the HTML file.Have also checked the network part of the console to check if the JQuery is loading correctly.but seems it does not recognize the $. Have also tried to putthe whole JS file in $(document).ready(function () )
The function works correctly but I am still receiving the error.
I have tried that with different browsers and different systems.
$(document).ready(function () {
var currentIndex = 0;
var itemAmt;
function cycleItems() {
var item = $('.imageContainer div').eq(currentIndex);
$('.imageContainer div').hide();
item.css('display', 'inline-block');
}
var autoSlide = setInterval(function () {
currentIndex += 1;
if (currentIndex > $('.imageContainer div').length - 1) {
currentIndex = 0;
}
cycleItems();
}, 3000);
$('.next').click(function () {
clearInterval(autoSlide);
currentIndex += 1;
if (currentIndex > $('.imageContainer div').length - 1) {
currentIndex = 0;
}
cycleItems();
});
$('.prev').click(function () {
clearInterval(autoSlide);
currentIndex -= 1;
if (currentIndex < 0) {
currentIndex = $('.imageContainer div').length - 1;
}
cycleItems();
});
});
.imageContainer {
max-width: 400px;
background-color: black;
margin: 0 auto;
text-align: center;
position: relative;
}
.imageContainer div {
background-color: white;
width: 100%;
display: inline-block;
display: none;
}
.imageContainer img {
width: 100%;
height: auto;
}
.next {
right: 5px;
position: absolute;
}
.prev {
left: 5px;
position: absolute;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link href="HomeStyle.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../HomePage/Slider.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../HomePage/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../HomePage/jquery.min.js"></script>
<script type="text/javascript" src="../HomePage/jquery-latest.js"></script>
<title>Home!</title>
</head>
<body>
<div id="gallery">
<section class="slider">
<button class="next">Next</button>
<button class="prev">Previous</button>
<div class="imageContainer">
<div style="display: inline-block;">
<img src="http://placeimg.com/400/200/people" />
</div>
<div>
<img src="http://placeimg.com/400/200/animals" />
</div>
<div>
<img src="http://placeimg.com/400/200/people" />
</div>
<div>
<img src="http://placeimg.com/400/200/tech" />
</div>
</div>
</section>
</div>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../HomePage/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../HomePage/jquery.min.js"></script>
<script type="text/javascript" src="../HomePage/jquery-latest.js"></script>
</body>
</html>
How can I make it working error free?
Javascript files load in the order that they are added to the page. The first javascript file you've added is ../Homepage/slider.js and I'm guessing that it uses jQuery to do whatever it does. This means it's referencing $ at some point. But wait: jQuery hasn't been loaded yet! This causes the error you saw, because the browser might have started downloading jQuery already, but won't execute it until any preceding scripts are finished.
If you move jQuery to the top (and you probably only need to include it once, rather than 4 times at the top and 4 times at the bottom), this should fix your problem.
Better yet, move all of your script declarations to the bottom of the page, which means they won't block the rest of the page from rendering.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
...
</head>
<body>
...
<script type="text/javascript" src="../HomePage/jquery.min.js"></script>
<script type="text/javascript" src="../HomePage/Slider.js"></script>
</body>
</html>
You could also use something like requireJS to ensure the load order of scripts, but that is an advanced topic well beyond the scope of what you're doing here.
You must add the jquery library only once. Since your jquery code is inside $(document).ready(function(){ and }), you can can add it anywhere on your html code, but before any library which use jquery (maybe your slider.js does)
jquery should be included before all other scripts depending on it...
I suppose this is the issue causing $ is undefined error...

Trouble with Ace code editor

I have successfully created an Ace editor before, but recently I am making a website called CodeProjects, and I want to put an Ace editor in. Whenever I try, it only shows the text function foo(items) {
var x = "All this is syntax highlighted";
return x;
}. On the page http://ace.c9.io/#nav=embedding&api=ace, it says you only need the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE in Action</title>
<style type="text/css" media="screen">
#editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div id="editor">function foo(items) {
var x = "All this is syntax highlighted";
return x;
}
</div>
<script src="/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");
</script>
</body>
but when I try to embed it (or even just make the editor, not the site), again, it only shows function foo(items) { var x = "All this is syntax highlighted"; return x; }
Any suggestions?
it also says to copy files into your project. If you don't want to do that, include script from cdn
<script src="//cdn.jsdelivr.net/ace/1.1.01/min/ace.js"
type="text/javascript" charset="utf-8"></script>
see http://jsbin.com/ojijeb/165/edit
You need to put the content outside of the editor div [or fetch the content on page load using AJAX]. Either way, you then load the content into the editor with JavaScript: editor.setValue("hello world");.
To set the height of the editor, you resize the div it lives in, then call the editor's resize method.
var div = document.getElementById('editor');
div.style.height = some_multiple_of_the_line_height_for_tidiness;
editor.resize();
In my experience, you need to change div to pre. Just using pre instead of div in following way should solve your problem.
<pre id="editor" >
</pre>

Categories