单击调用服务器函数并返回模板化的 html

Calling server function onclick and returning templated html

本文关键字：html 返回 调用 服务器 函数 单击      更新时间：2023-09-26

每次单击createArtistList()函数中var buttonTemplate的"+"按钮时，我都会尝试从 code.gs 文件中调用getArtistName()函数。

它现在做的是：

  • 当在 Web 应用程序上单击var buttonTemplate = '<li><a onClick="addArtist(); return false;" href="">buttonCell</a></li>';时，它会在 JS.html 文件中运行 addArtist() 函数
  • 然后调用 code.gs 文件中的 writeArtistName() 函数，并将输入到提示中的值写入电子表格。

我还需要它来调用 code.gs 文件中的 getArtistName() 函数，以便我可以使用刚刚输入到电子表格中的值更新 Web 应用程序。

 

谷歌应用脚本是否支持这样的实时更新？

有没有办法从google.script.run同时调用2个函数？

例： 

google.script.run
      .withSuccessHandler(writeSuccess(artistName))
      .withFailureHandler(writeFailure)
      .writeArtistName(artistName);

添加这样的东西 - .writeArtistName(artistName), .getArtistName();？

 

 

索引.html：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= getContent("js") ?>
    <?!= getContent("css") ?>
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Abel">
  </head>
  <body>
    <!-- //nav tabs// -->
    <div id="artistTabs">
      <ul id="artistList">
        <?!= createArtistList(); ?>
      </ul>
    </div>
  </body>
</html>

 

JS.html：

<script>
function addArtist()
{
  var artistName = prompt("enter artist whole first name and initial of last name");
  if (artistName === "") //user pressed 'ok' but input field was empty
  {
    return;
  }
  else if (artistName != "" && artistName !== null) //user inputs something and hits 'ok'
  {
    google.script.run
      .withSuccessHandler(writeSuccess(artistName))
      .withFailureHandler(writeFailure)
      .writeArtistName(artistName);
  }
  else //user hits 'cancel' or 'x'
  {
    return;
  }
}
function writeSuccess(artistName)
{
  console.log("write success: " + artistName);
}
function writeFailure()
{
  console.log("write failure - email myself why it failed and the time it failed");
}
function test()
{
  console.log("test"); //open this artists spreadsheet
}
</script>

 

code.gs：

var ss = SpreadsheetApp.openById('id');
var sheet = ss.getSheets()[0];
function doGet()
{
  return HtmlService.createTemplateFromFile('index').evaluate();
}
function getContent(filename)
{
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function createArtistList()
{
  //button
  var buttonStartingRow = 2;
  var buttonStartingColumn = 1;
  var buttonCell = sheet.getRange(buttonStartingRow, buttonStartingColumn).getValue();
  var x = '<li><a onClick="addArtist(); return false; return getArtistName();" href="">';
  var y = buttonCell;
  var z = '</a></li>';
  var buttonTemplate = x + y + z;
  //artist names
  var artistsOutput = '';
  var startingRow = 2;
  var startingColumn = 1;
  var howManyRows = sheet.getLastRow() - 1;
  var howManyColumns = 1;
  var allArtistsArray = sheet.getRange(startingRow, startingColumn, howManyRows, howManyColumns).getValues(); //get every name in 1st column after second row
  for (i = 0; i < allArtistsArray.length; i++)
  {
    allArtistsArray = allArtistsArray.filter(function(n){return n[0] !== '' && n[0] !== buttonCell}); //filter 'buttonCell' value and blank rows
    allArtistsArray = allArtistsArray.toString().split(","); //flatten 2d array to 1d array
    if (allArtistsArray == '')
    {
      Logger.log("array = blank");
      return buttonTemplate;
      break; //leave loop and only return 'buttonTemplate'
    }
    else
    {
      var x1 = '<li><a onClick="test(); return false;" href="">';
      var z1 = '</a></li>';
      var _1 = allArtistsArray[i];
      var _2 = x1 + _1 + z1;
      artistsOutput += _2
    }
  }
  return buttonTemplate + artistsOutput; //return 'buttonTemplate' and every value from spreadsheet that is not blank
}
function writeArtistName(artistName)
{
  var lastRow = sheet.getLastRow() + 1; //gets next unused row
  var column = 1; //first column
  var lastCell = sheet.getRange(lastRow, column);
  lastCell.setValue(artistName); //sets next blank row as artistName
}
function getArtistName()
{
  var lastRow = sheet.getLastRow(); //gets last row with content
  var column = 1;
  var lastArtist = sheet.getRange(lastRow, column).getValue(); //gets last row with artistName
  //Logger.log(lastArtist);
  var x = '<li><a onClick="test(); return false;" href="#">';
  var y = lastArtist;
  var z = '</a></li>';
  var xyz = x + y + z;
  Logger.log(xyz);
  return xyz;
}
//figure out how to call getArtistName() from buttonTemplate onClick
//and have the artist name from last row return and display in the list
是否有

充分的理由不能同时执行这两个功能的单个服务器功能？

所以像这样：

function writeAndGetArtistName(artistName)
{
  writeArtistName(artistName);
  return getArtistName();
}

然后，客户端代码将只调用这一个函数。

虽然如果我理解你在这里想做什么，并且你的 getArtistName 函数只是获取与 writeArtistName 刚刚添加到电子表格中的相同艺术家名称，那么将 artistName 传递给 getArtistName 可能会更容易，然后你可以跳过这三行代码：

  var lastRow = sheet.getLastRow(); //gets last row with content
  var column = 1;
  var lastArtist = sheet.getRange(lastRow, column).getValue(); //gets last row with artistName
相关文章：