jquery - 当模态对话框“提交”时，google.script.run 在 jQuery 中不起作用

问题描述

大家下午好；

我正在开发一个谷歌网络应用程序，它将通过按钮和 jQuery 模式对话框收集用户输入，将捕获的数据作为后端数据库推送到谷歌表格（只是在付费使用谷歌云 SQL 之前试用该应用程序），然后抓住它信息返回并将其填充到 HTML 字段中（我只编码不到一周，所以希望这是有道理的）。

我无法让 google.script.run 函数工作，除非它出现在变量之前，但当然它不会推送我想要的信息。有人可以让我知道这里出了什么问题吗？而且，请原谅我做的任何奇怪的事情和任何格式 - 仅在不到一周的时间内！

HTML（编辑：输入我的整个 HTML）

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
      <?!= include("Dashboard-css");  ?>
  </head>

  <body style="background-color:#fffafa;">

<!-- CREATE USER DETAILS DIALOG BOX -->
  <div id="dialog-form">
    <p><center> CREATE OR UPDATE PROFILE </center></p>
      <form>
        <fieldset>

          <input type="text" id="htmlCompanyName" class="text ui-widget-content ui-corner-all">
          <label for="htmlCompanyName">Company Name</label>

          <input type="text" name="formUserName" id="htmlUserName" class="text ui-widget-content ui-corner-all">
          <label for="formUserName">First Name & Last Name</label>

          <input type="text" name="formUserAddress" id="htmlUserAddress" class="text ui-widget-content ui-corner-all">
          <label for="formUserAddress">Address</label>

          <input type="text" name="formUserEmail" id="htmlUserEmail" class="text ui-widget-content ui-corner-all">
          <label for="formUserEmail">Email</label>

          <input type="text" name="formUserPhone" id="htmlUserPhone" class="text ui-widget-content ui-corner-all">
          <label for="formUserPhone">Phone Number</label>

<!-- Allow form submission with keyboard without duplicating the dialog button -->
          <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
        </fieldset>
      </form>
  </div>

<!-- Formatting container for the actual HTML body -->  
  <div class="container">
      <h5 style="font-family:sans-serif"><center>Arts & Venue Project Tracker</center></h5>

<!-- CREATE BUTTON -->    
        <div class="row">
          <div class="input-field col">
            <p class="z-depth-1">
              <button id="setUserDetails" class="waves-effect waves-light btn-small" style="font-size:75%";>Create or Update Profile</button>
            </p>
          </div>    
        </div> <!-- CLOSE ROW FOR BUTTON -->

        <div style ="display: table;" id="masterUserTable">
          <div style="display: table-row;">
            <div style="display: table-cell;font-size:75%" id="companyName">Company:<span>&nbsp;&nbsp;&nbsp;</span></div>
            <div style="display: table-cell;font-size:75%" id="companyNameEntry"></div>
          </div>
          <div style="display: table-row;">      
            <div style="display: table-cel;font-size:75%" id="userName">Name:<span>&nbsp;&nbsp;&nbsp;</span></div>
            <div style="display: table-cell;font-size:75%" id="userNameEntry"></div>        
          </div>
          <div style="display: table-row;">      
            <div style="display: table-cell;font-size:75%" id="userAddress">Address:<span>&nbsp;&nbsp;&nbsp;</span></div>
            <div style="display: table-cell;font-size:75%" id="userAddressEntry"></div>
          </div>
          <div style="display: table-row;">      
            <div style="display: table-cell;font-size:75%" id="userEmail">Email:<span>&nbsp;&nbsp;&nbsp;</span></div>
            <div style="display: table-cell;font-size:75%" id="userEmailEntry"></div>        
          </div>
          <div style="display: table-row;">
            <div style="display: table-cell;font-size:75%" id="userPhone">Phone:<span>&nbsp;&nbsp;&nbsp;</span></div>
            <div style="display: table-cell;font-size:75%" id="userPhoneEntry"></div>
          </div>
        </div>
  </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <?!= include("Dashboard-js");  ?>
  </body>
</html>

jQuery（查看函数 addUpdateUser()）

<script>
  $(document).ready( function() {

    var dialog, form,
    wWidth = $(window).width(),
    dWidth = (wWidth*0.5),
    wHeight = $(window).height(),
    dHeight = (wHeight*0.95),   
    jCompanyName = $( "#htmlCompanyName" ),
    jUserName = $( "#htmlUserName" ),
    jUserAddress = $( "#htmlUserAddress" ),
    jUserEmail = $( "#htmlUserEmail" ),
    jUserPhone = $( "#htmlUserPhone" );

//What happens when 'Confirm' in the modal dialog is clicked
      function addUpdateUser() { 

        var asCompanyNameEntry = $( "#companyNameEntry" ).html(jCompanyName.val()),
        asUserNameEntry = $( "#userNameEntry" ).html(jUserName.val()),
        asUserAddressEntry = $( "#userAddressEntry" ).html(jUserAddress.val()),
        asUserEmailEntry = $( "#userEmailEntry" ).html(jUserEmail.val()),
        asUserPhoneEntry = $( "#userPhoneEntry" ).html(jUserPhone.val());

        google.script.run.userSetDetails(asUserNameEntry); //Currently, this is not executing and is preventing the next line from executing, but it runs if put before the variables

        dialog.dialog( "close" );
    }

//Open the Dialog Box
      dialog = $( "#dialog-form" ).dialog({
        autoOpen: false,
        height: dHeight,
        width: dWidth,
        modal: true,
        buttons: {
          "Confirm": addUpdateUser,
          Cancel: function() {
            dialog.dialog( "close" );
          }
        },
          close: function() {
            form[ 0 ].reset();
          }
      });

      form = dialog.find( "form" ).on( "submit", function( event ) {
        event.preventDefault();
        addUpdateUser();
      });

//Put the captured details into the HTML file and recapture it in the dialog box when button is reclicked
  $( "#setUserDetails" ).on("click",function(){  

       var companyNameEnteredValue = $( "#companyNameEntry" ).html(),
       userNameEnteredValue =  $( "#userNameEntry" ).html(),
       userAddressEnteredValue =  $( "#userAddressEntry" ).html(),
       userEmailEnteredValue =  $( "#userEmailEntry" ).html(),
       userPhoneEnteredValue =  $( "#userPhoneEntry" ).html();

       $( "#htmlCompanyName" ).val(companyNameEnteredValue);
       $( "#htmlUserName" ).val(userNameEnteredValue);
       $( "#htmlUserAddress" ).val(userAddressEnteredValue);
       $( "#htmlUserEmail" ).val(userEmailEnteredValue);
       $( "#htmlUserPhone" ).val(userPhoneEnteredValue);

       dialog.dialog("open"); 

      });
});
</script>

Google Apps 脚本

function doGet(e) {
  return HtmlService.createTemplateFromFile("Dashboard").evaluate();  
}

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

function userSetDetails(asUserNameEntry){
  var masterFolder = DriveApp.createFolder(asUserNameEntry + " Revenue and Expense Tracking - PIVOT Web App"); 
  var masterFolderId = masterFolder.getId();      
  var userMainDashboard = {

    "title": asUserNameEntry + " Main Dashboard",
    "mimeType": "application/vnd.google-apps.spreadsheet",
    "parents": [
        {
          "id": masterFolderId 
        }
      ] 
    };

Drive.Files.insert(userMainDashboard);
}

解析度

d'oh，一旦我尝试通过最小的可重现示例重建代码，这是一个相对简单的错误。当试图在 google.script.run 中调用 'asUserNameEntry' 时，我需要调用它的字符串值，所以我只需要在末尾添加 .text() 以便它是 google.script.run(asUserNameEntry.text() ) 然后脚本抓取输入的文本值！不过，感谢大家的支持 - 很高兴看到社区如此快速和友好的回应！

标签： jquerygoogle-apps-script

jquery - 当模态对话框“提交”时，google.script.run 在 jQuery 中不起作用

问题描述

解决方案

推荐阅读