Pushing variables to a dropdown in GoogleApps Scripting
Clash Royale CLAN TAG#URR8PPP
Pushing variables to a dropdown in GoogleApps Scripting
I am trying to push some variables to a dropdown using GoogleApps Scripting. Running into a 'Malformed HTML content' error. It definitely has to do with how I am writing 'option value=', but I can't figure it out.
Thank you for any help!
<html>
<head>
<base target="_top">
</head>
<body>
<select>
<? Logger.log("data "+data) ?>
<? for (var i = 0; i < data; i++) ?>
<?= "<option value="" + data[i].name + "">" + data[i].name + "</option>" ?>
<? ?>
</select>
</body>
</html>
google.script.run
HtmlService
SO more like this? It still doesn't seem to be working, but I am sure I did something wrong. <!DOCTYPE html> <html> <head> <base target="_top"> </head> <script> function createDropdown(courses) var div = document.getElementById('output'); div.innerHTML = courses; google.script.run.withSuccessHandler(createDropdown) .getCourses(); </script> <body> <select> <div id="output"></div> </select> </body> </html>
– Eliana Cohen
Aug 10 at 14:07
Yeah, something like that :) Probably you want to only call your async loading scripts after the page has initially loaded, as is shown here: developers.google.com/apps-script/guides/html/…
– tehhowch
Aug 10 at 14:30
2 Answers
2
Instead of joining the strings inside of a block, write the html and output the relevant strings where needed.
<select>
<? for (var i = 0; i < data; i++) ?>
<option value="<?= data[i].name ?>"> <?=data[i].name?></option>
<? ?>
</select>
Note that this still might give you unexpected results depending on what your data[i].name values contain (EG if it contains a quote), so you might want to escape it inside the value="" property.
value=""
When I quote out the data[i].name, it just puts that exact string in the dropdown. How do I actually get the variable to be written?
– Eliana Cohen
Aug 11 at 14:45
I'm not sure I understand, I would need to see the code. Note that this approach to generating your drop down is perfectly valid, I've done it this way many times. The google.script.run approach is also a fine way to approach it.
– Cameron Roberts
Aug 11 at 23:11
The way you're doing it isn't gonna cut it. Use google.script.run:
google.script.run is an asynchronous client-side JavaScript API available in HTML-service pages that can call server-side Apps Script functions. To interact with dialogs or sidebars in Google Docs, Sheets, or Forms from client-side code, use google.script.host. For more information, see the guide to communicating with server functions in HTML service.
sample snippet:
CODE.GS
function doGet()
return HtmlService.createHtmlOutputFromFile('Index');
function doSomething()
Logger.log('I was called!');
Then on your INDEX.HTML
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
google.script.run.doSomething();
</script>
</head>
<body>
</body>
</html>
Probably in this example you want to show the immediate usefulness to the OP, e.g. use a success handler to change some client HTML. Perhaps the client code starts with "I waved at the server", and it gets changed to include "The server function said hello" when the page finishes loading
– tehhowch
Aug 10 at 13:24
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Why do this in a template? Use a page load handler coupled with
google.script.run. There are examples of this on Google'sHtmlServicecommunication guide. Doing so would then mean you could very easily update this option list based on new data, without requiring the page to be refreshed.– tehhowch
Aug 9 at 20:18