Search code examples
javascripthtmlgoogle-apps-scriptmaterialize

Error dynamically adding Materialize select input in Google Apps Script web app

I try to dynamically add extra Materialize "select"s to a custom form created with a Google Apps Script web app. Although the initial one displays OK, on adding extra (via the "Add Row" button) the new select has two sets of options.

Can anyone see what I am doing wrong?

Web App select error

Demo app

Code.gs

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

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

Page.html

<!DOCTYPE html>
<html>

  <head>
    <base target="_top">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  </head>
  
  <body onload="onLoad()">
    <div class="container">
      <div class="row">
        <button class="btn waves-effect waves-light" id ="add-row-btn" name="action">Add Row</button>
      </div>
      <form id="invoice-form" name="invoice-form"></form>      
    </div> 

    <!-- template --> 

    <div style="display: none" data-type="template" id="row-template"> 
      <div class="row">
        <div class="input-field col s2">
          <select id="HoursType" name="HoursType">
            <option value="Hours Type" disabled selected name="Hours Type">Hours Type</option>
            <option value="Indirect" name="Indirect">Indirect</option>
            <option value="Direct" name="Direct">Direct</option> 
          </select>
        </div>
      </div> <!-- row -->  
    </div> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <?!= include("Page-js"); ?>
  </body>
</html>

Page.js.html

<script>

  var selectorCount = 0

  function onLoad() {
    addRow()
    document.getElementById("add-row-btn").addEventListener("click", addRow);
  }

  function addRow() {
    var documentFragment = document.createDocumentFragment();
    var temporaryNode = document.getElementById('row-template').cloneNode(true); //true for deep clone
    documentFragment.appendChild(temporaryNode)
    document.getElementById('invoice-form').appendChild(documentFragment)
    var elements = document.querySelectorAll('select');
    var element = elements[selectorCount++]
    selector = M.FormSelect.init(element);   
    temporaryNode.style.display = "block"
    delete documentFragment
  }

</script>
Solution

  • About the issue of Although the initial one displays OK, on adding extra (via the "Add Row" button) the new select has two sets of options.. I think that the reason might be that the same id is used in invoice-form appended by appendChild(documentFragment). So how about the following modification?

    From:

    function addRow() {
  var documentFragment = document.createDocumentFragment();
  var temporaryNode = document.getElementById('row-template').cloneNode(true); //true for deep clone
  documentFragment.appendChild(temporaryNode)

    To:

    function addRow() {
  var documentFragment = document.createDocumentFragment();
  var temporaryNode = document.getElementById('row-template').cloneNode(true); //true for deep clone

  temporaryNode.id = temporaryNode.id + selectorCount;  // Added

  documentFragment.appendChild(temporaryNode)

    Note:

    • But I'm not sure whether this is the direction you expect. So if this was not the direction you expect, please tell me. I would like to modify it.