google.script.run не работает в jQuery, когда модальное диалоговое окно «отправлено» - PullRequest
Новая
       22

google.script.run не работает в jQuery, когда модальное диалоговое окно «отправлено»

0 голосов
/ 08 апреля 2020

Добрый день всем;

Я работаю над веб-приложением Google, которое будет собирать пользовательский ввод с помощью кнопок и jQuery модальных диалогов, pu sh захваченных данных в Google Sheets в качестве внутренней базы данных ( просто опробуйте приложение, прежде чем платить за работу с Google Cloud SQL), а затем заберите эту информацию и заполните ее в HTML полях (я кодирую только менее недели, поэтому надеюсь, что это имеет смысл).

Я не могу заставить работать функцию google.script.run , если не предшествует переменным, но, конечно, она не выводит sh нужную мне информацию. Может кто-нибудь дать мне знать, что здесь происходит не так? И, пожалуйста, извините за все, что я делаю странно, и за любое форматирование - я занимался этим меньше недели!

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 Script 

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);
}

Разрешение

Да, это была относительно простая ошибка, чтобы поймать, когда я попытался пересобрать код с помощью минимального воспроизводимого примера. При попытке вызвать asUserNameEntry в google.script.run мне нужно было вызвать его строковое значение, поэтому мне просто нужно было добавить .text () в конец, чтобы он был google.script.run (asUserNameEntry.text () ), а затем скрипт захватил введенное текстовое значение! Спасибо всем за вашу поддержку, хотя - приятно видеть такие быстрые и добрые ответы от сообщества!

1 Ответ

0 голосов
/ 10 апреля 2020

О, это была относительно простая ошибка, чтобы поймать ее, когда я попытался пересобрать код на минимальном воспроизводимом примере. При попытке вызвать asUserNameEntry в google.script.run мне нужно было вызвать его строковое значение, поэтому мне просто нужно было добавить .text () в конец, чтобы он был google.script.run (asUserNameEntry.text () ), а затем скрипт захватил введенное текстовое значение! Спасибо всем за вашу поддержку, хотя - приятно видеть такие быстрые и добрые ответы от сообщества!

...