成功处理程序上的应用程序脚本模板 HTML 中断

Question

已搜索，但未找到任何类似的问题或解决方案。

我有一些模板化的 HTML，它基于电子表格中的数据构建表单，因为我在这些下拉列表中有可变数量的下拉列表和选项。

点击提交时，我想向用户显示一个旋转的 gif，以便他们知道它正在处理中。

如果 code.gs 中的后端代码通过所有测试传递输入，我想用成功消息更新 div，如果任何检查失败并显示错误消息。

我已经解决了这个问题，之前使用 create .createHtmlOutputFromFile 方法，但现在使用 .createTemplateFromFile 只会擦除整个页面。

HTML 模板

<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
#container{
    padding-left:10px;
    font-family: 'Open Sans', Arial, sans-serif;
}
#header{
  width: 75%;
  margin: 0 auto;
  text-align: center;
  margin-bottom:10px;
}
form{
    text-align: center;
    margin-top:10px;
}
#nameField{
   width:400px;
   margin-bottom:10px;
}
#reqIndic{
   color:#FF0000;
}
select{
    margin-top: 5px;
    width:150px;
}
#submit{
  margin-top:20px;
  width:125px;
  height:40px;
}
#confirmation{
  width: 30%;
  margin: 0 auto;
  min-height:60px;
  border-radius: 5px;
}
#padding{
  width: 30%;
  margin: 0 auto;
  min-height:60px;
  border-radius: 5px;
}
</style>
<div id="container">
    <div id="header">
        <h2>Cheltenham Classic</h2>
    </div>
    <br>
    <form name="projectsForm">
        <span id="reqIndic">&#42;</span>
        <span> Name</span>
        <input id="nameField" type="text" name="name" required>
        <br>
        <? for (var race in races) { ?>
            <span><?= race ?></span>
            <select>
                <? for (var i = 0; i < races[race].length; i++) { ?>
                    <option value="<?= races[race][i] ?>"><?= races[race][i] ?></option>
                <? } ?>
            </select>
            <br>
        <? } ?>

        <br>

        <input id="submit" type="submit" value="Submit Form" onclick="google.script.run
              .withSuccessHandler(updateDiv)
              .onEvent(this.parentNode);spinner()">
    </form>

</div>
<div id="confirmation" style ="text-align:center"></div>
<div id="padding" style ="text-align:center"></div>

<script type="text/javascript">
    function updateDiv(returnValue){
        alert('debug');
        var div = document.getElementById('confirmation');
        if(returnValue == false){
            var errStr = '<p>ERROR: Please check your rankings for blank fields or multiple entries of the same project and re-submit your rankings</p>';

            div.innerHTML = errStr;
        }
        else{
            div.innerHTML = '<p>Success! Your results were submitted successfully</p>';
        }

    }


    function spinner(){
      var div = document.getElementById('confirmation');

      div.innerHTML = '<img src="http://loadinggif.com/images/image-selection/32.gif">'
    }
</script>

后端代码

我已经将 onEvent 函数缩减为只返回一个带有键值对的对象而不进行任何检查。

updateDiv 函数运行并显示警报，然后整个页面被擦除。

function doGet(){
  var raceForm = HtmlService.createTemplateFromFile('RaceForm');
  raceForm.races = getRaces();
  return raceForm.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

function onEvent(e){
  return {'valid': true};
}

function getRaces(){
  var url = //spreadsheet url
  var wb = SpreadsheetApp.openByUrl(url);
  var ws = wb.getSheetByName('Races Log');

  var racesObj = {};

  var wsValues = ws.getDataRange().getValues();

  for(var i = 0; i <wsValues.length;i++){
    var race = wsValues[i][0];
    racesObj[race] = [];
    racesObj[race].push('0');
    for(var j = 1; j<wsValues[i].length;j++){
      racesObj[race].push(wsValues[i][j]);
    }
  }

  return racesObj;
}

非常感谢任何帮助。

Answer 1

如果我对 racesObj 对象进行硬编码：

var racesObj = {one:["one","two"], two:["one", "two"], "races":["belmont", "kentucky"]};

页面如下所示：（使用模板）

如果我点击提交按钮，我会得到：