0

I'm building a community driven website off of Google sites (I know this is a bad choice, I don't have a choice in the matter) and the majority of the functionality is build into Google Apps Scripts (to read/write to an external database and handle how data is displayed). Amid various issues, I've found one that consistently confuses me.

I typically structure my GAS projects into Javascript, HTML, and CSS (Code.gs, HTML.html, and CSS.html). I leverage jQuery for quite a few things (e.g., click handlers, form submission, etc). However, it seems that my jQuery and my Javascript can't exist in the same "world", here meaning in the same .gs file, or the same script tags if it's going in the HTML file. In fact, I can't call any jQuery functions from my .gs file! Can someone explain why this is, please? It seems like the problem is that the jQuery library isn't included, but I can't find a way to include anything in Javascript (think #include from C). And since this is web programming, which is pretty different from "normal" programming, I think that part of my problem understanding this comes from here. And working inside a framework (GAS) doesn't help.

Much obliged, thank you.

chrysocollus
  • 3
  • 1
  • 2

2 Answers2

5

HTML Service supports JQuery because the code is executed in your Browser, so the library is loaded in your browser too (after CAJA sanitization) but the code in the .gs file is executed on Google's server and you can't obviously load anything on Google's server !

In one word : there is no way to use JQuery or any other external library in Google Apps Script files other than .html files used in HTML Service.

Serge insas
  • 45,904
  • 7
  • 105
  • 131
  • Would +1 if I weren't a noobie due to the brevity and simplicity of this answer. This made it immediately make more sense, even if the chosen answer goes into more depth. Thanks! – chrysocollus Jul 23 '14 at 18:52
  • Thanks ! As you saw in my comment above : I fully agree with your pov ;-) – Serge insas Jul 23 '14 at 18:56
3

In the project configuration you're describing, which matches the examples from the HtmlService Best Practices, all your GS code runs server-side, while the regular javascript and jQuery run client-side, in the user's browser. If you've got GS in your HTML files, then I expect you're using templated HTML, which in turn means that the GS is evaluated server-side to produce the final HTML that gets served to the client. (Take a look at the HTML source once the page is served up... no GAS in there.)

So it's those different operating contexts that keep your GAS & jQuery elements from interacting directly. From the client, you can use google.script.run for instance, to call server-side functions and pass parameters to them, and you can also set up call-backs to receive asynchronous "returns" from your GS code.

Given the reliance on DOM elements, I am not sure what use there would be in having jQuery in server-side Apps Script, but this blog entry from @EricKoleda provides an example of porting an open source javascript library to Google Apps Script. (Maybe you'll find his copy of the Underscore Library to be all you need!)

Mogsdad
  • 44,709
  • 21
  • 151
  • 275
  • Hey, 7 seconds ahead ! but your answer is more developped so I'll leave the place to you ;-) – Serge insas Jul 23 '14 at 18:39
  • So my main way of communicating between .gs and HTML is going to be .withSuccessHandler. Woo... Thank you for the quick and in-depth answer. It makes a lot more sense now. – chrysocollus Jul 23 '14 at 18:50
  • Here's a weird idea. What if you used a jQuery poller to pull a message queue from the server? Say those messages were jQuery statements that could be `eval`ed. Then GAS code could just stuff jQuery strings into the server-side message queue to be interpreted client-side. Hmm? – Mogsdad Jul 23 '14 at 20:17
  • I'm going to be honest with you Mogsdad, I have no idea what you're saying there. – chrysocollus Jul 24 '14 at 20:18
  • Sorry - polling is described w/ code [here](http://stackoverflow.com/a/24773178/1677912). The HTML client starts by using `google.script.run` to call a GS function, then sets a timer in the browser to call itself again - that's the poll part. The response, as always, comes via a successHandler. Instead of having GS call jQuery functions, I thought it would be sufficient to be able to have them send the jQuery code snippet to the browser, through this mechanism, and [eval](http://goo.gl/A4Ljq) it in the successHandler. Tried, but Google's Caja disallows `eval()`. – Mogsdad Jul 24 '14 at 21:32
  • Can you receive multiple callbacks? Ie. I want to show a progress bar on the web app, can I call back multiple time to update the progress? – Douglas Gaskell Dec 03 '15 at 03:39
  • @douglasg14b No but yes. There's no support for repeated call-backs, but that's easy to work-around by having the client side handler issue another asynchronous `google.script.run` call to the server. The server script would then wait for whatever server-side condition is appropriate for the next progress bump. – Mogsdad Dec 03 '15 at 03:42
  • Thanks! I assume I'll end up needing to use the `project properties` to store the progress info since there are no global variables in gscript? – Douglas Gaskell Dec 03 '15 at 03:46
  • @douglasg14b Point of order: this conversation is off-topic. If you can't find an existing equivalent question, then please ask a new one. Cheers! – Mogsdad Dec 03 '15 at 03:54