I created a simple web app, and it is not working.
Code.gs:
function doGet() {//I think this works
var output = HtmlService.createTemplateFromFile('index').evaluate();
output.setSandboxMode(HtmlService.SandboxMode.IFRAME);
output.setTitle('email button');
return output;
}
function getContent(filename) {//might work
Logger.log('getContent()');
return HtmlService.createTemplateFromFile('javascriptCode').getRawContent();
}
index.html:
<!DOCTYPE html>
<html>
<body>
<form id="email_subscribe">
<input type="email" name="email" id="email" placeholder="Enter your email">
<input type="button" id="submitButton" value="Submit">
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" />
<?!= getContent("javascript") ?>
</body>
</html>
javascriptCode.html:
<script type="text/javascript">
$(document).ready(function() {
$("#submitButton").onclick(function() {
alert('thx for submitting');
});
});
</script>
When I run this webApp, the email and button fields load properly, and the logger logs 'getContent()'. However, nothing happens when I click the button. What am I doing wrong?
Thanks
There are quite few errors in your code.
- Script tag is not a self closing tag.
- It is safer to serve https version of jquery, sometime http content
will be blocked.
- There is NO onclick event in jquery it is just click.
code.gs
function doGet() {
var output = HtmlService.createTemplateFromFile('index').evaluate();
output.setSandboxMode(HtmlService.SandboxMode.IFRAME);
output.setTitle('email button');
return output;
}
function getContent(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
index.html
<!DOCTYPE html>
<html>
<body>
<form id="email_subscribe">
<input type="email" name="email" id="email" placeholder="Enter your email">
<input type="button" id="submitButton" value="Submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<?!= getContent("javascriptCode") ?>
</body>
</html>
javascriptCode.html
<script type="text/javascript">
$(document).ready(function() {
$("#submitButton").click(function() {
alert('thx for submitting');
});
});
</script>
A Simple HTML dialog example
I usually test these things as a dialog to get them working. It's works as a dialog and I've also included the doGet. I hope this helps. I didn't go exactly as you were going but I think this will help you move that way.
Code.gs:
function doGet()
{
var output = HtmlService.createTemplateFromFile('webappdoesnotwork');
return output.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}
function getEmail(email)
{
Logger.log(email);
return true;
}
function showDialog()
{
var output = HtmlService.createHtmlOutputFromFile('webappdoesnotwork');
SpreadsheetApp.getUi().showModelessDialog(output, 'My WebApp');
}
webappdoesnotwork.html
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function getEmail()
{
var email=$('#email').val();
google.script.run
.withSuccessHandler(sayThanks)
.getEmail(email);
}
function sayThanks()
{
$('#saythanks').css('display','block');
$('#controls').css('display','none');
}
console.log('My Code');
</script>
</head>
<body>
<div id="saythanks" style="display:none">Hey Thanks for Responding</div>
<div id="controls">
<input type="text" id="email" size="35" placeholder="Enter your email"/>
<input type="button" id="submitButton" value="Submit" onClick="getEmail();"/>
</div>
</body>
</html>
