CODEWITHSUNDEEP
google-apps-script
edswartz
edswartz

Reputation: 491

Google App Script not interpreting javascript

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>

Upvotes: 1

Views: 118

Answers (1)

JSDBroughton
JSDBroughton

Reputation: 4034

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.

Upvotes: 1

Related Questions