javascript - 谷歌网络应用 : How to dynamically pass array values to jquery script

标签 javascript jquery google-apps-script

我一直在研究 StackOverflow 问题 Datepicker: Disabling dates in the data 的答案.我已经成功开发了一个小型网络应用程序，它使用 beforeShowDay 从 jQuery Datepicker 中排除特定日期。选项和一组硬编码日期。

问题

目前，排除日期数组是硬编码的，但这些日期应该是动态生成的。虽然我在 code.gs 中有一个函数 getuserdates()这将返回“userdates”数组 ["12/13/2019", "12/14/2019", "12/16/2019", "12/17/2019", "12/24/2019"] ，我还没有在网络上找到一个单一的引用资料来解释如何将数组值动态传递给 webapp。

@Tanaike 在 Disable dates in the datepicker based on values from the Google Sheet using Google Apps Script 上的回答似乎与这个问题有关，但我未能改编任何包含该数组的成功代码。我认为这里的部分问题是 Tanaike 的回答是 100% Javascript，而这个场景需要 Javascript 和 jQuery。

我尝试了 scriptlet(没想到它们会起作用，但你永远不知道。它们都产生了一个错误 Uncaught SyntaxError: Unexpected token '<'

  • var userdates = <? getuserdates(); ?>

  • var userdates = <?= getuserdates(); ?>

  • var userdates = <?!= getuserdates(); ?>

目标 动态更新变量值 array .

Link to Spreadsheet

Latest webapp url (updated)

代码

以下代码可以完美运行；唯一的问题是数组值是硬编码的。

code.gs

function doGet(request) {
  return HtmlService.createTemplateFromFile('Page')
      .evaluate();
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

function getuserdates() {
  var ss = SpreadsheetApp.getActiveSpreadsheet()
  var sheetname = "VL Request";
  var datasheet = ss.getSheetByName(sheetname);
 
  // assume user name
  //var userName = Session.getEffectiveUser().getUsername()
  var username = "user1";
  
  // set variables
  var datafirstrow = 2;
  var dataLR = datasheet.getLastRow();
  var dataLC = datasheet.getLastColumn();
  var datasheetRange = datasheet.getRange(datafirstrow,1, dataLR-datafirstrow+1, dataLC);
  //Logger.log(datasheetRange.getA1Notation());
  
  // sort the data by date
  datasheetRange.sort(6); // sort by Column F - VL date
  var datasheetData = datasheetRange.getDisplayValues();
  //Logger.log(datasheetData);
  
  //   get the user names as an array
  var datanames = datasheetData.map(function(e){return e[2];});//[[e],[e],[e]]=>[e,e,e]
  //Logger.log(datanames); // DEBUG
  //Logger.log(datanames.length) // DEBUG
  
  // create an array to hold any dates
  var userdates = [];

  //  loop through the user names; test for equivalence to "username", and save VF date to an array
  for (var i=0;i<datanames.length;i++){
    //Logger.log("dataname = "+datanames[i])
    if (datanames[i] === username){
      // Logger.log("DEBUG: i= "+i+", user name = "+datanames[i]+", VL date = "+datasheetData[i][5]);
      userdates.push('"' + datasheetData[i][5]+ '"');
    }
    else{
      // Logger.log("DEBUG: i= "+i+" - no match");
    }
  }
  // resort the data by Timestamp
   datasheetRange.sort(1); // sort by Column A
  
  if (userdates.length !=0){
  //Logger.log("There are "+userdates.length+" previous dates for this user.");//DEBUG
  }
  else{
  //Logger.log("There no previous dates for this user");//DEBUG
  }
  
  //Logger.log(userdates);
  return userdates;
}

Page.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/cupertino/jquery-ui.css">
    <?!= include('Stylesheet'); ?>
  </head>
  <body>
  <div class="demo" >
    <h1>jQuery datepicker</h1>
     <p>click here : <input type="text" name="date" id="datepicker" /></p>
  </div>
    <?!= include('JavaScript'); ?>
  </body>
</html>

JavaScript.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script>
var userdates = ["12/13/2019", "12/14/2019", "12/16/2019", "12/17/2019", "12/24/2019"];

$(function() {
  $('#datepicker').datepicker({
    minDate: "+3W", 
    maxDate: "+12W",
    beforeShowDay: function (date) {
      $thisDate = (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear();
      if ($.inArray($thisDate, userdates) == -1) {
        return [true, ""];
      } else {
        return [false, "", "Unavailable"];
      }
    }
  });
});
</script>

最佳答案

当 getuserdates()在 Google Apps 脚本端返回 ["12/13/2019", "12/14/2019", "12/16/2019", "12/17/2019", "12/24/2019"] 的值, userdates的 var userdates = <?= getuserdates(); ?>是12/13/2019,12/14/2019,12/16/2019,12/17/2019,12/24/2019的字符串类型。我认为这样一来，您的脚本就不起作用了。

那么，作为几个答案之一，这个答案怎么样？请修改JavaScript.html .

模式一:

在此模式中，使用了 scriptlet。我以为this thread可能会有用。

来自:

var userdates = ["12/13/2019", "12/14/2019", "12/16/2019", "12/17/2019", "12/24/2019"];

收件人:

var userdates = [];
<? var data = getuserdates(); ?>
<? for (var i = 0; i < data.length; i++) { ?>
  userdates.push(<?= data[i] ?>);
<? } ?>
  • 当脚本运行时，userdates是["12/13/2019", "12/14/2019", "12/16/2019", "12/17/2019", "12/24/2019"] .
  • 作为使用 scriptlet 的另一种模式，例如，如果您想使用 var userdates = <?= getuserdates(); ?> ，你也可以修改var userdates = <?= getuserdates(); ?>至 var userdates = <?= getuserdates() ?>.split(","); .

模式二:

在此模式中，使用了 google.script.run。

来自:

var userdates = ["12/13/2019", "12/14/2019", "12/16/2019", "12/17/2019", "12/24/2019"];

收件人:

google.script.run.withSuccessHandler(userdates => {
  $(function() {
    $('#datepicker').datepicker({
      minDate: "+3W", 
      maxDate: "+12W",
      beforeShowDay: function (date) {
        $thisDate = (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear();
        if ($.inArray($thisDate, userdates) == -1) {
          return [true, ""];
        } else {
          return [false, "", "Unavailable"];
        }
      }
    });
  });
}).getuserdates();
  • 当脚本运行时，userdates从 getuserdates() 检索用作 ["12/13/2019", "12/14/2019", "12/16/2019", "12/17/2019", "12/24/2019"] .

注意事项:

  • 在这种情况下，它假设 getuserdates()返回 ["12/13/2019", "12/14/2019", "12/16/2019", "12/17/2019", "12/24/2019"] .

引用资料:

如果我误解了您的问题并且这不是您想要的方向，我深表歉意。

编辑 1:

关于问题 1:

关于Uncaught SyntaxError: Unexpected token '<'错误的原因发生，这个问题的原因是<?!= include('JavaScript'); ?> .所以请修改如下。

来自:

</div>
  <?!= include('JavaScript'); ?>
</body>

收件人:

</div>
<script>
var userdates = [];
<? var data = getuserdates(); ?>
<? for (var i = 0; i < data.length; i++) { ?>
  userdates.push(<?= data[i] ?>);
<? } ?>
</script>
  <?!= include('JavaScript'); ?>
</body>
  • 在这种情况下，请不要添加 <script>###</script>至 JavaScript的 <?!= include('JavaScript'); ?> .
  • 不幸的是，小脚本似乎不能用于小脚本。

关于问题 2:

关于[""12/11/2019"", ""12/15/2019"", ""12/16/2019"", ""12/17/2019"", ""12/24/2019""]的原因从 getuserdates() 返回，这个问题的原因是userdates.push('"' + datasheetData[i][5]+ '"'); .所以请修改如下。

来自:

userdates.push('"' + datasheetData[i][5]+ '"');

收件人:

userdates.push(datasheetData[i][5]);

编辑2:

当使用模式1时，脚本如下。关于getuserdates() GAS端，请修改自userdates.push('"' + datasheetData[i][5]+ '"');至 userdates.push(datasheetData[i][5]); .请按如下方式修改 HTML 和 Javascript 端。

HTML 和 Javascript:Page.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/cupertino/jquery-ui.css">
    <?!= include('Stylesheet'); ?>
  </head>
  <body>
  <div class="demo" >
    <h1>jQuery datepicker</h1>
     <p>click here : <input type="text" name="date" id="datepicker" /></p>
  </div>
    <script>
    var userdates = [];
    <? var data = getuserdates(); ?>
    <? for (var i = 0; i < data.length; i++) { ?>
      userdates.push(<?= data[i] ?>);
    <? } ?>
    </script>
    <?!= include('JavaScript'); ?>
  </body>
</html>

HTML 和 Javascript:JavaScript.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script>
$(function() {
  $('#datepicker').datepicker({
    minDate: "+3W", 
    maxDate: "+12W",
    beforeShowDay: function (date) {
      $thisDate = (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear();
      if ($.inArray($thisDate, userdates) == -1) {
        return [true, ""];
      } else {
        return [false, "", "Unavailable"];
      }
    }
  });
});
</script>

关于javascript - 谷歌网络应用 : How to dynamically pass array values to jquery script，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58811225/

上一篇：javascript - 如何制作:hover appearance remain after click/focus in search bar

下一篇：javascript - 如何在每个拆分字符串(javascript)中拆分和插入数字？

相关文章：

jquery - 从什么时候开始 2 大于 15(简单的 if 语句出错)

javascript - jQuery 为作用域设置祖先元素

validation - 提交前的表单验证

javascript - 跟踪异步调用

javascript - 无法用 jQuery 匹配带有空格的字符串

javascript - 赠送带有激活码的小部件(网络应用程序)

google-apps-script - 从 Google App Script 设置 Google Drive 文件修改时间

google-apps-script - 如何对 Google 文档/云端硬盘文档中的标题进行编号？

javascript - 从 angularjs Controller 调用时显示 html

javascript - 为什么我的 Firefox 插件在将 Firefox 更新到版本 50 后不起作用

©2024 IT工具网  联系我们