谷歌应用脚本：jquery 不工作答案

【问题标题】：Google apps script: jquery is not working谷歌应用脚本：jquery 不工作
【发布时间】：2014-07-31 06:36:00
【问题描述】：

我正在尝试使用 google 应用程序脚本构建一个网络应用程序。这个应用程序应该从/向谷歌电子表格导入和导出数据。此外，我在服务器端有几个自定义函数，它们应该动态填充 html 文件中的字段（使用 jquery）。

code.gs 中的所有函数都运行良好，问题出在 html 文件中。

代码.gs：

function doGet() {
  var template = HtmlService.createTemplateFromFile('index');

  var htmlOutput = template.evaluate()
                   .setSandboxMode(HtmlService.SandboxMode.NATIVE);

  return htmlOutput;
}

function getUserID(){
 var userID=Session.getActiveUser().getEmail();
  Logger.log(userID);
  return (userID);
}

function getClients() {
  var doc = SpreadsheetApp.openById("---spreadsheet ID here---");
  var sheet = doc.getSheetByName("---Sheet name here---");
  var allClients = sheet.getRange(2, 2, sheet.getLastRow()).getValues();
  var clients = [];
  for (i=0;i<allClients.length-1;i++){
      clients.push(allClients[i]);
      Logger.log("Client "+i+clients[i]);

  }
  return(clients);
}

index.html:

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>

<script>
function addID(userID){
$("#userID").append(userID);
}

$(function() {
$( "#datepicker" ).datepicker();
$( "#anim" ).change(function() {
$( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() );
});
});

function addClients(clients){
  $('#customer').empty();
  for (i in clients) {
    $('#customer').append('<option>'+clients[i]+'</option>');
    $('#customer').trigger("chosen:updated");
  }
}

$('document').ready(function(){
google.script.run.withSuccessHandler(addID).getUserID();
google.script.run.withSuccessHandler(addClients).getClients();
}
</script>
</head>

<div>
<h3><b>User:</b></h3>
<div id="userID"></div>

<h3><b>Date:</b></h3>
<p><input type="text" id="datepicker" size="15" name="date"></p>

<h3><b>Client:</b></h3>

<select name="customer" id="customer" data-native-menu="true" data-role="none">
    <option> ---- Choose a client ----</option>
</select>
</div>
</html>

这种结构不起作用。日期选择器也不起作用。但如果我不使用 jquery，只需：

<div>
google.script.run.withSuccessHandler(addID).getUserID();
</div>

在 html 文件中，它确实有效。较小的问题是我在标题中加载的所有 css 文件都不起作用。我已经尝试不使用<html> 和<header> 标签。而且我还尝试从code.jquery.com 加载jquery。结果一样。

这里有什么问题？

【问题讨论】：

标签： jquery google-apps-script

【解决方案1】：

你忘了关闭准备好的事件监听器：

$('document').ready(function(){
  google.script.run.withSuccessHandler(addID).getUserID();
  google.script.run.withSuccessHandler(addClients).getClients();
}); // <-- here

您还应该在此处将i 声明为新的var：

for (var i in clients) {

【讨论】：

好吧，我很尴尬。那成功了。你能说出为什么 .css 文件会被忽略吗？

【解决方案2】：

$('document').ready(function(){
google.script.run.withSuccessHandler(addID).getUserID();
google.script.run.withSuccessHandler(addClients).getClients();
})

$('document').ready(function(){.... })

它没有关闭.....我想应该可以让它工作。

【讨论】：

根本问题是我标记的答案中的声明。谢谢。