I am trying to run a function from Google Apps Script in a HTML page. Basically, I want to get a log message that says "Someone Clicked the Button" whenever the button is clicked. However, I click the button and still get nothing in my logs. I wonder what I'm doing wrong. Here's my code:
function doGet(){
return HtmlService.createHtmlOutputFromFile("page");
}
function userClicked(){
Logger.log("Someone Clicked the Button");
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Hello</h1>
<button id="btn">Run It</button>
<script>
document.getElementById("btn").addEventListener("click",doStuff);
function doStuff(){
google.script.run.userClicked();
}
</script>
</body>
</html>
Any help will be appreciated!
If you are using the new editor you can create a new deployment and then copy the url and go to another window paste and run it and you should see your button.
Then if you project is not a Cloud Platform Project, goto Project Setting and uncheck this item Log uncaught exceptions to Cloud logs
Now go to Executions and then move to the tab with your web app and click it and move back to the executions page and in a short time you should see a userClicked entree and if you open it, in the logs in the bottom of the screen.
Hopefully this will work the same for you.
How about this?
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Hello</h1>
<button id="btn" onclick="google.script.run.userClicked()">Run It</button>
</body>
</html>
Related
I'm calling a Google Apps Script webapp with a GET request by clicking a link to the webapp's Url, to initiate a function.
The browser automatically opens a tab with the return response.
How can I automatically close that tab immediately or after a few seconds of displaying a message.
I looked around and saw alot of suggestions to add a <script> tag, But it doesn't seem to work. Where am I going wrong?
Code.gs
function doGet(e) {
var pram = e.parameter.param;
// Run some code based off of the parameter
return HtmlService.createHtmlOutputFromFile('confirmation');
}
HTML file
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function start(){
setTimeout(function(){ window.top.close(); }, 3000);
}
</script>
</head>
<body onload="start()">
<h2 style="text-align: center;">Your function is being Initiated<br>Please Wait...</h2>
</body>
</html>
The short answer is this cannot be done. please see #TheMaster's comment.
We have created sidebar for Google sheets and added few buttons to format data easily. But the problem is, these buttons work for the one who created the sidebar. For all other users they do nothing and functions don't get called. Functions themselves are fully tested and they work well. Seems like other users just can't call them on button click.
This is the code for sidebar (The functions are located in separate final.gs file):
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<button id="clean" >Clean Up Data</button><br>
<button id="categories" >Style Categories</button><br>
<button id="test" >Run All </button><br>
<button id="delete" >Delete All </button><br>
<script>
document.getElementById("test").addEventListener("click", function(){
google.script.run.call_all_funcions();
});
document.getElementById("clean").addEventListener("click", function(){
google.script.run.cleanUpData();
});
document.getElementById("categories").addEventListener("click", function(){
google.script.run.style_categories_WithBorders();
});
document.getElementById("delete").addEventListener("click", function(){
google.script.run.clearSheet();
});
</script>
</body>
</html>
What are we doing wrong? Or maybe there are some kind of permissions?
I tried to debug and returned error message. Turned out it was permission issues. The solution was to simply sign out of all Google accounts and then sign in with only the one that has permissions to edit the file. Now everything works.
My current code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body onbeforeunload="return close()">
<script>
function close() {
window.open("http://www.google.com");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body onbeforeunload="return close()">
<script>
function close() {
window.open("http://www.google.com");
}
</script>
</body>
</html>
I am trying to create a new window when the website is closed, but it just closes by itself. I am new to web coding, so please do not judge my code
This was the best way to accomplish what you're trying to do, however if it's a modal you're looking for, unfortunately they don't exist yet, upon research this was the best solution I had, you could use another script that auto runs to close this page. However, as comments above describe this looks fishy to viewers, and also causes skepticism to google as to why you're doing this for your web page.
<!DOCTYPE html>
<html>
<body onBeforeUnload=" return myFunction()">
<p>Close this window, press F5 or click on the link below to invoke the onbeforeunload event.</p>
Click here to go to w3schools.com
<script>
function myFunction() {
window.open("new 2.html"); // or whatever link you'd like, must be .aspx, or .html page etc.
}
</script>
</body>
</html>
I tried to create an updates list for my web, so that when I click on the relevant update- a new additional small html window will open and I will see the full update content.
This is the code I wrote:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp">
<p ng-controller="updatesCtrl">
<span ng-repeat="x in updates">
● {{x.title}}
<br><br>
</span>
</p>
<script>updates();</script>
</body>
</html>
script.js:
function updates(){
angular.module('myApp', []).controller('updatesCtrl', function($scope) {
$scope.updates = [
{title:"update1",update:"update1 content"},
{title:"update2",update:"update2 content"}
];
});
}
function showUpdate(title, update){
var win=window.open('updateWindow.html','newwindow','width=600, height=350');
win.document.getElementById("title").innerHTML=title;
win.document.getElementById("update").innerHTML=update;
return false;
}
updateWindow.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1 id="title"></h1>
<p id="update"></p>
</body>
</html>
I have few problems here:
1.When I clicked on the update link, the update window replaced the main page (index.html) window, and also was a full size page.
2. No change was made in the <h1> and the <p> of the updateWindow- although I wrote a script that was suppose to enter an html content to those places.
I don't understand why I didn't get what I expected with this code. Especially, I don't understand the first problem: if I only try to replace the onclick content inside index.html with this: "window.open('updateWindow.html','newwindow','width=600, height=350'); return false;" - I get a new additional window with a smaller size as expected (I won't get the update content inside this window, but at least that solves my first problem).
What is the problem with my code?
Try to use window.open('updateWindow.html','_blank','width=600, height=350'); instead
it looks to me that the window is not loading before you try to update html:
you can see that the html page has not even loaded yet and the dev tools says there is a Uncaught TypeError: Cannot set property 'innerHTML' of null try getting the new page to update it onloadin the update page.
I am a bit new to the coding. I tried to put javascript on my google site in an HTML box but it is not working. I am pasting my code here.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display an alert box:</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
alert("I am an alert box!");
}
</script>
</body>
</html>
It should validate with the alert box. The code is running fine when I am running it on the localhost but is not working when I am pasting it in the HTML box within a google site. my company is using Google gadget to make the HTML and javascript run over the google site. Is there any simpler way to do without google gadget?
You can program a div with a method to act like the alert method. Stylize and position it however you want, but here is an example of one I called msgBox that takes a message and a type (just changes the color for critical, warning, and info) and shows up like a banner at the top of the document:
<!DOCTYPE html>
<html>
<head>
<style>
.msgBox{position:absolute;width:50%;top:0px;left:-25%;margin-left:50%;padding:1%;color:black;display:none;font-family:"Calibri","Arial",sans-serif;vertical-align:middle;}
.info{background-color:rgba(120,170,250,0.95);}
.warn{background-color:rgba(240,230,120,0.95);}
.crit{background-color:rgba(250,120,120,0.95);}
.msgBoxMessage{width:98%;max-width:98%;height:100%;color:black;font-size:1.8vw;vertical-align:middle;}
.msgBoxClose{height:100%;color:black;font-weight:bold;font-size:3vw;cursor:pointer;transition:0.2s;vertical-align:middle;}
.msgBoxClose:hover{color:white;transition:0.2s;}
</style>
<script>
function msgBox(message, type) {
var msgBox = document.getElementById("msgBox");
var msgBoxMessage = document.getElementById("msgBoxMessage");
msgBoxMessage.innerHTML = message;
msgBox.style.display="block";
msgBox.className="msgBox " + type.toLowerCase();
}
</script>
</head>
<body>
<h2>This page shows how to drive messages without using javascript alert.</h2>
<div class="msgBox info" id="msgBox">
<table style="width:100%;">
<tr>
<td class="msgBoxMessage" id="msgBoxMessage"></td>
<td class="msgBoxClose" onclick="document.getElementById('msgBox').style.display='none';">×</td>
</tr>
</table>
</div>
<button onclick="msgBox('This is for your <u>information</u>.', 'info');">Info</button>
<button onclick="msgBox('This is just a <i>warning</i>.', 'warn');">Warn</button>
<button onclick="msgBox('This is a <b>critical</b> message!', 'crit');">Crit</button>
</body>
</html>
Perhaps you shouldn't be pasting the <html> and <body> tags in the widget box, as it is already part of a html document.
Simply try this instead:
<button onclick="alert('I am an alert box!');">Try it</button>