Javascript 调用服务器函数onclick并返回模板化html_Javascript_Google Apps Script

Javascript 调用服务器函数onclick并返回模板化html

javascript google-apps-script

Javascript 调用服务器函数onclick并返回模板化html,javascript,google-apps-script,Javascript,Google Apps Script,每次在createArtistList（）函数中单击var buttonTemplate中的“+”按钮时，我都试图从code.gs文件调用getArtistName（）函数它现在所做的是：当var buttonemplate=''时，它将运行js.html文件中的addArtist（）函数然后调用code.gs文件中的writeratitname（）函数，并将输入到提示符中的值写入电子表格我还需要它调用code.gs文件中的getArtistName（）函数，这样我就可以用刚刚输入到

每次在

createArtistList（）

函数中单击

var buttonTemplate

中的“+”按钮时，我都试图从code.gs文件调用

getArtistName（）

函数

它现在所做的是：

当

var buttonemplate='
'时，它将运行js.html文件中的addArtist（）
函数


然后调用code.gs文件中的writeratitname（）
函数，并将输入到提示符中的值写入电子表格


我还需要它调用code.gs文件中的getArtistName（）
函数，这样我就可以用刚刚输入到电子表格中的值更新web应用程序

谷歌应用程序脚本支持这样的实时更新吗
有没有办法从google.script.run同时调用两个函数
例如：
google.script.run
      .withSuccessHandler(writeSuccess(artistName))
      .withFailureHandler(writeFailure)
      .writeArtistName(artistName);

添加类似这样的内容-.writeArtistName（artistName），.getArtistName（）



index.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>


函数addArtist（）
{
var artistName=提示（“输入艺术家全名和姓氏首字母”）；
if（artistName==“”）//用户按了“确定”，但输入字段为空
{
返回；
}
else if（artistName！=''&&artistName！==null）//用户输入一些内容并点击“确定”
{
google.script.run
.withSuccessHandler（writeSuccess（artistName））
.withFailureHandler（writeFailure）
.writeArtistName（艺人姓名）；
}
否则//用户点击“取消”或“x”
{
返回；
}
}
函数writeSuccess（artistName）
{
console.log（“写入成功：+artistName”）；
}
函数writeFailure（）
{
log（“写入失败-给自己发电子邮件说明失败原因和失败时间”）；
}
功能测试（）
{
console.log（“test”）；//打开此电子表格
}


代码G.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

var ss=SpreadsheetApp.openById（'id'）；
var sheet=ss.getSheets（）[0]；
函数doGet（）
{
返回HtmlService.createTemplateFromFile（'index'）.evaluate（）；
}
函数getContent（文件名）
{
返回HtmlService.createHtmlOutFromFile（文件名）.getContent（）；
}
函数createArtistList（）
{
//钮扣
var buttonStartingRow=2；
var buttonStartingColumn=1；
var buttonCell=sheet.getRange（buttonStartingRow，buttonStartingColumn）.getValue（）；
变量x=''；
var buttonemplate=x+y+z；
//艺术家姓名
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（）；//获取第二行后第一列中的每个名称
对于（i=0；i
有没有一个很好的理由让一台服务器不能同时完成这两项功能
比如：
function writeAndGetArtistName(artistName)
{
  writeArtistName(artistName);
  return getArtistName();
}

然后您的客户机代码将只调用这一个函数
虽然如果我理解您在这里要做的事情，并且您的getArtistName函数只是获得与刚添加到电子表格中的writeArtistName相同的artistName，但是将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

您可以对google.script.run.func（）进行多次后续调用google.script.run
客户端API在运行客户端中的下一行代码之前不会停止等待回调。您不能将第二个函数调用链接到一个google.script.run
实例，但只需将第二个完整调用放在第一个之后即可。无法保证服务器函数完成回调的顺序。第二个google.script.run
可能首先完成。因此，如果第二个with successHandler（）
依赖于第一个函数的完成，那么就会出现问题。Google服务器上的JavaScript函数将同时运行。这与浏览器中运行的JavaScript不同。此行：withSuccessHandler（writeSuccess（artistName））
有一个错误。它必须是：withSuccessHandler（writeSuccess）
服务器的返回自动发送到successhandler函数括号中的参数。您所需要的只是服务器函数中的一个return语句（您没有），以及success括号中的一个参数