Embedded Javascript missing from Google Apps Script Web App serverHandler output

Question

I'm trying to embed some JavaScript into the output of a Google Apps Script that is running as a web app, but I can't find any evidence of my script tags or jQuery loading in the output, so I think it is getting stripped out, I assume, by Caja.

I'm adding the JavaScript by creating an HTMLOutputObject from a file, like this:

app.add(app.createHTML(HtmlService.createHtmlOutputFromFile("order_form_javascript").getContent()));

Maybe it is worth mentioning here that the javascript is added this way in a serverHandler attached to a listBox change event - NOT in the initial doGet() function - I'm not sure if that makes a difference.

The content of the order_form_javascript.html file is:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<h3>Javascript!</h3>
<script type="text/javascript">
alert ("script ran");
$(function() {
  alert ("function ran");
  $('.order_table tr:hidden').show();
});

</script>

The H3 tags are in the output, but no script tags appear, no alert boxes pop up and jQuery is undefined.

I tried this code on the Caja playground and it seems to work. So I think that I must be inserting the javascript incorrectly, or missing something obvious.

Thanks, in advance, for any suggestions you can offer.

Answer 1

Following Kevin Reids tips that Caja wouldn't likely show script tags anyway, as this would break sandboxing, and also that HtmlService and UiService may be incompatible in the same script, I updated my code to the following:

var js = HtmlService.createHtmlOutputFromFile("order_form_javascript").getContent();

Logger.log(js); //check that HtmlService generates the script properly.

app.add(app.createHTML(js));

Looking in the logs, I can clearly see that HtmlService is returning my HTML file's content verbatim:

[13-07-24 10:02:28:879 BST] <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<h3>Javascript!</h3>
<script type="text/javascript">
alert ("script ran");
$(function() {
  alert ("function ran");
  $('.order_table tr:hidden').show();
});

</script>

Which makes me think that maybe I could use this method to output arbitrary HTML without writing it all in code, but I digress.

This lead me to the app.createHTML([String]) method and, according to the documentation here, HTML widgets can't actually contain <script> tags. So that's where they are being stripped out. It turns out I should have read the manual. How embarrassing.

The two possible solutions I can think of are;

• Re-write my web app using HtmlService instead of UiService, which I think would allow more arbitrary html and scripts from HTML files in the project.
• Since my JavaScript is going to be event driven and very simple, I could also use a clientHandler to perform the necessary actions and continue using the UiService for my web app.

I'm going to start with the clientHandler approach.