HTML(Metro4)和GoogleSheets，異步加載資料-有解無憂

自 10 月以來，我一直在嘗試將一系列專案加載到選擇中。我可以使用模板中的同步編碼來實作，但不能使用異步編碼（Explanation）。我曾經看過視頻，閱讀計算器的問題后問題，閱讀谷歌檔案，地鐵檔案，只是無法弄清楚。這是一個谷歌應用程式腳本專案，帶有一個 .gs 檔案后端和一個應該用于加載側邊欄的 .html 檔案。

我有這個 HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!-- Metro 4 -->
    <link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css">
  </head>
  <body>
    <!-- Title -->
    <h2 style="text-align: center;">Add New Job</h2>

    <!-- Job Name -->
    <p style="text-align: center;"><span class='mif-chat-bubble-outline'></span> Job Name</p>
    <input type="text" data-role="input" data-prepend="Name: ">

    <!-- Creator Name -->
    <p style="text-align: center;"><span class='mif-user-check'></span>  Job Creator</p>
    <select data-role="select" id="mySelectList">
    <optgroup label="Employees">
           <option value="" selected> Loading... </option>     
    </optgroup>
    </select>    

    <nl></nl>
    <p style="text-align: center;">
      <button class="button success cycle " id="confirmButton"><span class="mif-checkmark"></span></button>
    </p>
    
    <!-- Metro 4 -->
    <script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
    <script>
      $(function() {
        $('#txt1').val('');
        console.log("Running updateSelect");
        google.script.run
          .withSuccessHandler(updateSelect)
          .getEmployeeNames();
      });

      function updateSelect(vA)//array of value that go into the select
      {
        var select = document.getElementById("mySelectList");
        select.options.length = 0;
        for (var i=0; i<vA.length;i  ){
          console.log("Creating items %s, %s", vA[i], vA[i]);
          select.options[i] = new Option(vA[i],vA[i]);
          console.log ("select.options[i] = %s, select.options = %s.", select.options[i], select.options);
        }
      }

      console.log("My Code Ran");
    </script>

  </body>
</html>

它在運行時提供此控制臺反饋。

控制臺反饋

我已經洗掉了我所有的 cookie 和快取，禁用了所有插件等，但這并沒有解決問題。

為什么選項不會從“正在加載...”更改為我輸入的實際新值？作為參考，我有以下代碼確實有效，但它以一種低效的方式（在模板本身內部，而不是被呼叫）。

<!-- Creator Name -->
    <? var employees = getEmployeeNames(); ?>

    <p style="text-align: center;"><span class='mif-user-check'></span>  Job Creator</p>
    <select data-role="select"  id="jobCreator">
    <optgroup label="Employees">
     
        <? for (var i = 0; i < employees.length; i  ){ ?>
           <option> <?= employees[i] ?></option>
        <? } ?>
      
    </optgroup>
    </select>

這是 getEmployeeNames() 的后端腳本。我試過它回傳一維或二維陣列。雖然該函式給出了預期的輸出，但 HTML 選擇仍然沒有用新選項更新。

function getEmployeeNames(){
  var employeeSheet = SpreadsheetApp.getActive().getSheetByName('Dropdown Lists');
  var names = employeeSheet.getRange(5, 4, employeeSheet.getLastRow(), 1).getValues();

  names = removeBlankEntries(names);

  Logger.log ('Employee Names "%s"', names);

  return names;  
}

function removeBlankEntries(arr){
  
  var output = [];
  arr.forEach(function(value){
    if (value != "" & value != " "){
      output.push(value[0]) // add [0] to make it 1d
    };
  });
  return output;
}

這是一個 Logger.log 輸出示例。

上午 8:27:00 資訊員工姓名“[PM，員工 2，員工 3，員工 4]”

或者將其設定為提供二維陣列。

上午 8:28:00 資訊員工姓名“[[PM]、[員工 2]、[員工 3]、[員工 4]]”

此外，這里是在代碼中加載側邊欄的方式。

function loadNewJobSidebar(){
  var htmlTemplate = HtmlService
            .createTemplateFromFile("addJob");

  var htmlOutput = htmlTemplate.evaluate()
          .setTitle('Add New Job');
  var ui = SpreadsheetApp.getUi();
  ui.showSidebar(htmlOutput);
}

Any guidance would be helpful. I thought the video above was the best, and I copied it three or four times without success. I've been coding for a decade - even though it is only my side gig - and I've never had a problem last so many months.

== Sorry this is becoming a monster thread. Below are exact steps for replication ==

Create a new blank Google Sheet.
Open the script editor and create an HTML file called addJob (it will automatically add the .html to the end)
In the HTML file, copy the code exactly from the first snippet in this post titled "I have this HTML"
In the code.gs file, copy the following code

function onOpen() {
  var ui = SpreadsheetApp.getUi();
  // Or DocumentApp or FormApp.
  ui.createMenu('Manage Sheet')
      .addSubMenu (ui.createMenu('Jobs')
        .addItem('Add New Job', 'loadNewJobSidebar'))
        .addToUi();
}

function getEmployeeNames(){
  return ["Bob", "Jamie", "Ted"];
}


function loadNewJobSidebar(){
  var htmlTemplate = HtmlService
            .createTemplateFromFile("addJob");

  var htmlOutput = htmlTemplate.evaluate()
          .setTitle('Add New Job');
  var ui = SpreadsheetApp.getUi();
  ui.showSidebar(htmlOutput);
}

Run the onOpen() function from the script editor. Allow it permission to run.
Go back to the spreadsheet, and on custom menu, select "Manage Sheet -> Jobs -> Add New Job"
The sidebar will load and say "Loading" but will not use the names from the getEmployee() function.
Press F12 and note the console log statements showing the select options should be loaded.

uj5u.com熱心網友回復：

從您更新的問題中，我可以理解您當前的問題。在你的腳本的情況下，如何修改函式updateSelect如下？

修改后的腳本：

function updateSelect(vA) {
  var select = Metro.getPlugin("#mySelectList", 'select');
  select.data(Object.fromEntries(vA.map(e => [e, e])));
}

在本次修改中，假設的值為vA一維陣列。請注意這一點。

參考：

METRO_4的選擇

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/397912.html

標籤：html google-apps-script metro-ui-css

上一篇：要寫入同一作業表的資料

下一篇：react-Post方法僅添加新的“id”，但未添加body標簽內的資料