Google App Script not interpreting javascript

Question

I am trying to have a list box populate based on the selection from another list box. It works fine on a simple html/js page loaded on an Apache server, but when I try to put it into html services in Google App Script, only the first list box appears: Nothing happens in the second box. I feel I am missing some basic concept in GAS.

In code.gs I have:

function hardCode() {
  var html = HtmlService.createHtmlOutputFromFile('hardcode.html')
      .setWidth(600).setHeight(425);
  SpreadsheetApp.getUi().showModalDialog(html, 'Why doesn't this work');
}

Then on the html side I have:

<form name="classic">
    <select name="countries" size="4" onChange="updatecities(this.selectedIndex)" style="width: 150px">
        <option selected>Select A City</option>
        <option value="usa">USA</option>
        <option value="canada">Canada</option>
        <option value="uk">United Kingdom</option>
    </select>

     <select name="cities" size="4" style="width: 150px" onClick="alert(this.options[this.options.selectedIndex].value)">
     </select>
     </form>

     <script type="text/javascript">

       var countrieslist=document.classic.countries
       var citieslist=document.classic.cities
       var cities=new Array()
       cities[0]=""
       cities[1]=["New York|newyorkvalue", "Los Angeles|loangelesvalue", "Chicago|chicagovalue", "Houston|houstonvalue", "Austin|austinvalue"]
       cities[2]=["Vancouver|vancouvervalue", "Tonronto|torontovalue", "Montreal|montrealvalue", "Calgary|calgaryvalue"]
       cities[3]=["London|londonvalue", "Glasgow|glasgowsvalue", "Manchester|manchestervalue", "Edinburgh|edinburghvalue",
 "Birmingham|birminghamvalue"]

       function updatecities(selectedcitygroup){
         citieslist.options.length=0
         if (selectedcitygroup>0){
           for (i=0; i<cities[selectedcitygroup].length; i++)
             citieslist.options[citieslist.options.length]=new Option(cities[selectedcitygroup][i].split("|")[0],
             cities[selectedcitygroup][i].split("|")[1])
           }
         }
     </script>

Try adding .setSandboxMode(HtmlService.SandboxMode.IFRAME) to the HtmlService. — JSDBroughton
– JSDBroughton, Commented Mar 2, 2015 at 8:41
One other thing, when I go into the javascript console I get this error: Uncaught TypeError: Cannot read property 'countries' of undefined. — edswartz
– edswartz, Commented Mar 2, 2015 at 14:26
IT WORKED! Sorry, I was incorrectly inserting your code snippet. According to the GAS developer site this sandbox mode is less backwards compatible with older browsers, but provides for more HTML5 conventions. Thanks again for your help! — edswartz
– edswartz, Commented Mar 2, 2015 at 14:35

JSDBroughton · Accepted Answer · 2015-03-02 14:55:04Z

1

The standard mode that HtmlService is either NATIVE or EMULATED (the latter being triggered by older browsers). Each brings with it security pre-parsing using Caja which can break certain functionality.

If you change the sandbox to IFRAME it should allow your code to function.

function hardCode() {
  var html = HtmlService.createHtmlOutputFromFile('hardcode.html')
    .setWidth(600).setHeight(425)
    .setSandboxMode(HtmlService.SandboxMode.IFRAME); // ADD THIS LINE
  SpreadsheetApp.getUi().showModalDialog(html, 'Why doesn't this work');
}

Caveat Bear in mind that the IFRAME sandbox mode while it brings greater functionality, its scope of supported browsers is lower.

There is every likelihood that support for that mode will be expanded over time.

answered Mar 2, 2015 at 14:55

JSDBroughton

4,0644 gold badges35 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Google App Script not interpreting javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related