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.
Related
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>
I have following HTML,
$(document).ready(function() {
$('#searchMovieBtn').click(function(e) {
e.preventDefault();
console.log('search');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="searchMovieBtnBox">
<button class="btn btn-primary" type="button" id="searchMovieBtn">Search</button>
</div>
When I click on button, nothing happens, it seems like event is not triggering.
It is a caching issue. When you was developing and testing your JQuery code, your old code remained into the browser cache. Browser cached it to load page faster in next uses. In order to solve this problem you have 3 options.
Delete your browser history
Refresh your browser by pressing Ctrl + F5 (Preferred for developing purpose)
Tell browser that this JQuery code has changed by adding a version for it. It is used when you are publishing your code on the server because you can't ask your clients to delete their browser history or load your page by pressing Ctrl + F5
Here is how you could add version to your JQuery code:
<script type="text/javascript" src="js/script.js?v=1"></script>
Look at v=1. Next time when you updated your JQuery code change it to v=2 to tell browser that your code has been changed.
You can try the next thing,
First of all, your HTML markup I think it might be wrong as you are not pointing out correctly the folders.
I attached all the css and js bootstrap + jquery files through a CDN.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"</script>
<script type="text/javascript" src="js/script.js"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<title> jQuery button click event working?</title>
</head>
<body>
<div id="searchMovieBtnBox">
<button class="btn btn-primary" type="button" id="searchMovieBtn">Search</button>
</div>
</body>
</html>
Therefore,your script.js stays as it is.
For me it has worked like this. I got the message printed onto my console.
Hope that helps you.
Make sure you don't have another element in the HTML with the same id.
I am creating a custom modal dialog pop up box in Google Sheets via an Apps Script that is running an onEdit trigger. The idea is, the user clicks on a checkbox in some cell in a column. The trigger detects this edit, and calls a function that utilizes Apps Script UI and HtmlService class. This creates a simple modal dialog box that is built using some html. In the html, I have a button that calls window.print(). However, by calling it, nothing happens. I think it's because of the Same Origin Policy issue. The Html Service is likely using another domain name to launch the dialog box that's different than docs.google.com. So, window calls are likely problematic. Is there another way around this? How does one create customized printing for Google Apps? I've seen some variations of creating a pdf on the fly and printing those, but this seems really inefficient for the end user.
When the checkbox is clicked, the following function is called:
function openDialog() {
var html = HtmlService.createHtmlOutputFromFile('html') ;
SpreadsheetApp.getUi()
.showModalDialog(html, 'Print Receipt');
}
Here is the following html:
<!DOCTYPE html>
<html>
<head><base target="_top">
</head>
<body>
<img src="https://i.imgur.com/someimage.png" alt="Logo" width="100" height="100">
<h3>testing</h3>
<button onclick="print()">Print</button>
</body>
<script>
function print() {
window.print();
}
</script>
</html>');
You should consider renaming the print function to something else, say "printPage" else it may be invoking the native print API. Also, the extra parenthesis in the HTML maybe removed.
<!DOCTYPE html>
<html>
<head><base target="_top">
</head>
<body>
<img src="https://i.imgur.com/someimage.png" />
<h3>testing</h3>
<button onclick="printPage()">Print</button>
</body>
<script>
function printPage() {
window.print();
}
</script>
</html>
I have some Google Sheets app script code that hits an API and updates a field in a sidebar based on some user input. Everything works as expected with the exception of the button used to trigger the API call from the sidebar. For some reason, clicking the button opens a new, blank tab in the browser.
My best guess is that I'm somehow implementing the google.script.run.withSuccessHandler() incorrectly but I've been unable to confirm this. Any help would be much appreciated.
Sidebar.html
This is the full sidebar file that I'm using.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
$('#narrative-from-selection').click(getNarrative);
});
function getNarrative(narrative) {
//document.getElementById('narrative-response').innerHTML = narrative.replace(new RegExp('\r?\n','g'), '<br />');
var projectName = $('#project-name').val();
var templateName = $('#template-name').val();
google.script.run
.withSuccessHandler(
function(narrative) {
$('#narrative-response').html(narrative);
})
.withUserObject(this)
.generateContentForSelected(projectName, templateName);
}
</script>
<body>
<div>
<br />
<br />
<form>
Project Name: <input type="text" name="project-name" id="project-name" onchange="google.script.run.updateProjectAndTemplateNames(this.parentNode)"><br />
Template Name: <input type="text" name="template-name" id="template-name" onchange="google.script.run.updateProjectAndTemplateNames(this.parentNode)"><br />
<button id="narrative-from-selection">Generate from Selection</button><br /><br />
Response:<br /><br />
<div id="narrative-response"></div>
</form>
</div>
</body>
</html>
Code.gs
Here is the overview of the relevant function that I'm using (the info used to hit the API is removed but I've tested that piece many times and it returns exactly what I expect it to send back).
function generateContentForSelected(projectName, templateName) {
// go do some API magic here
var narrative = "This is a test string.";
return narrative;
}
Through a ton of trial and error, I figured out what was causing the issue, though I'm still unsure why it's causing the new tab to open. Apparently, something about the way app script makes an asynchronous call using a form is a little quirky. I stripped the <form> and </form> tags out of the Sidebar.html file and everything works as expected.
If there's a better method to correct this, or if I've gone about this all wrong from the start, I'd be interested to know how to structure this more effectively. But, I did get it working at least.
I'm trying to write my first chrome extension to test my acquired knowledge from codecademy (HTML/CSS, JQUERY and Javascript). First of all I'm trying to append text to a paragraph tag via the onclick of a button.
heres my code:
<!doctype html>
<html>
<head>
<title>Facebook event graph</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
<script src="popup.js"> </script>
</head>
<body>
<form id="inputUrl">
Enter a URL: <input type="text" name="url" id="url">
<button type="button" onclick="getFacebookData()"> Get Data </button>
</form>
<canvas id="graph" width="300" height="100">
</canvas>
<p id="text" width="300" height="100">1</p>
</body>
</html>
and my popup.js:
$(document).ready(function(){
//Variables
function getFacebookData() {
$('p').append('Test');
};
});
it's probably something very basic that I'm doing wrong, but a push in the right direction would be really appreciated :)
You are not allowed to use inline scripting like onclick="getFacebookData()"
You have to remove the handler from html:
<button type="button" id="my-button"> Get Data </button>
And you have to move the handler into popup.js:
$(document).ready(function(){
$('#my-button').click(getFacebookData);
});
You are also, by default, not allowed to load jQuery from an external CDN - and certainly not http one, again for Content Security Policy reasons. And you shouldn't! Put jQuery in your extension's folder and load it locally.
Matter of taste, but I would place getFacebookData() definition outside $(document).ready, so it's available in the global scope. Also, the semicolon after it is not needed.
Last, but not least: for future debugging, inspect the console of the corresponding page of your extension. For things like background/options page you should be able to access them from Developer Mode extensions list. For a popup, you should right-click the button of your extension and select "Inspect Popup".