如何从google库中运行HTML?

我有一个带有HTML表单的谷歌库,过程表单脚本。addNewItem以及在弹出窗口中运行表单的脚本。addItem.

function addItem()
{
  var html = HtmlService.createHtmlOutputFromFile('input/form.html');
  SpreadsheetApp.getUi() 
      .showModalDialog(html, 'Add New Recipe');
  
}

function addNewItem(form_data)
{
  var url = "SPREADSHEET_URL_TO_DATA_COLLECTION";
  var ss = SpreadsheetApp.openByUrl(url);
  var sheet = ss.getSheetByName('List');  
  var asiaTime = Utilities.formatDate(new Date(), Session.getScriptTimeZone(), "yyyy-MM-dd");
  
  var dishName = form_data.dish_name;
  var cuisineName = form_data.cuisine_name;
  var placeName = form_data.place_name;
  var categoryName = form_data.category_name;
  var num = sheet.getRange(sheet.getLastRow(), 1).getValue() + 1 || sheet.getLastRow();
    
  sheet.appendRow([num, dishName, cuisineName, placeName, categoryName, asiaTime]);
}
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
  </head>
  <body>
    <form id="myform">
    <div class="block form-group">
    <label for="dish_name">Dish name</label>
    <input type='text' name='dish_name' id="dish_name" required="required"/>
    </div>
   
    <div class="block form-group">
    <label for="place_name">Place</label>
        <select id="place_name" name="place_name" type="text" required>
       
             <option value="LL4H">LL4H</option>
             <option value="LL4T">LL4T</option>              
        </select>
    </div>
    
    <div class="block form-group">
    <label for="cuisine_name">Cuisine</label>
        <select id="cuisine_name" name="cuisine_name" type="text" required>
       
             <option value="Asian">Asian</option>
             <option value="Western">Western</option>              
        </select>
    </div>
    
    <div class="block form-group">
    <label for="category_name">Category</label>
        <input id="category_name" name="category_name" type="text" list="quote-choices" required>
        <datalist id="quote-choices">
             <option value="Starter">Starter</option>
             <option value="Main course">Main course</option> 
             <option value="Veggi side">Veggi side</option>
             <option value="Carbs side">Carbs side</option>
             <option value="Dessert">Dessert</option>
             <option value="Dough">Dough</option>
             <option value="Sauce">Sauce</option>
             <option value="Drink">Drink</option>
             <option value="Other">Other</option>
        </datalist>
    </div>
    <div class="block">
    <button type="submit" class="action">Submit</button>
    </div>
    </form>
    <script>
      document.querySelector("#myform").addEventListener("submit", 
      function(e)
      {
      e.preventDefault();    //stop form from submitting
      console.log(this)
      google.script.run.withSuccessHandler(()=> google.script.host.close()).addNewItem(this);
      }
      );
    </script>
  </body>
</html>

我把这个库和谷歌电子表格连接起来,并声明新的函数来运行库脚本来打开表格。

function createRecipe() {
  RecipeBuilder.addItem();
}

function addNewItem(form_data) {
  RecipeBuilder.addNewItem(form_data);
}

表格出现在弹出窗口中,以及。

enter image description here

我点击 Submit 从表格中提交我的数据,但服务器端进程没有启动。

如何正确运行这个表单?我错在哪里?如何修复?


已更新

它仍然不能与库一起工作,但如果我把它放在某个电子表格的绑定容器脚本中,它就能很好地工作。不幸的是,我不能在绑定容器中使用它,因为完整的代码是由 addNewItem(form_data) 函数必须复制当前电子表格。最后,它将是1000多个具有相同数量的绑定容器的Google Spreadsheets。更新它将是超级复杂的


解决方案:

我相信你的目标和情况如下。

  • 你想使用 addItem(), addNewItem(form_data)input/form.html 作为一个GAS库。
  • 当你从客户端调用这个库时,点击提交按钮后,数据没有发送。
    • 你想消除这个问题。
  • 库的名称是 RecipeBuilder.

对于这个,这个修改怎么样?

修改要点。

  • 我认为你的问题的原因是 google.script.run.addNewItem(this);. 在这种情况下,当 addNewItem(this) 运行时,会从GAS项目中搜索这个函数。这样一来,就会出现一个错误,比如 Uncaught TypeError: google.script.run.addNewItem is not a function. 我想这就是你问题的原因。

为了消除这个问题,请你做如下修改。在这个修改中,在客户端增加了一个功能。

修改后的脚本。

function createRecipe() {
  RecipeBuilder.addItem();
}

// Added
function addNewItem(form_data) {
  RecipeBuilder.addNewItem(form_data);
}
  • 这样一来,当… google.script.run.addNewItem(this); 是在库侧运行的。addNewItem 的客户端运行,然后。RecipeBuilder.addNewItem 的库侧运行。

请注意。

  • 在你的Javascript的库侧, google.script.run.addNewItem(this);google.script.host.close(); 是按顺序运行的。但 google.script.run 与异步进程一起工作。因此,如果该进程的 addNewItem(this) 的速度很慢,对话框可能会在 addNewItem(this) 是运行的。所以我认为也可以采用以下修改。

    • google.script.run.addNewItem(this);
      google.script.host.close();//close this dialogbox
      
    • google.script.run.withSuccessHandler(()=> google.script.host.close()).addNewItem(this);
      

参考资料。

给TA打赏
共{{data.count}}人
人已打赏
未分类

用列表理解法修改列表

2022-9-22 12:50:28

未分类

错误的mysql连接:mysqli_fetch_array()期望参数1是mysqli_result,[重复]中给出的boolean。

2022-9-22 13:01:26

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索