Issue

This Content is from Stack Overflow. Question asked by Luan AlgumGamer

i´m currently new to sheets coding, i´ve been following this tutorial in order to create a userform, the problem is when i get to approximately 19:03 of the video, my view of “Search” tab doesn´t seem to work, below are my codes:

https://www.youtube.com/watch?v=6zFowiTNhqI

loadForm.gs

function loadMainForm() {
  
  const htmlServ = HtmlService.createTemplateFromFile("main");
  const html = htmlServ.evaluate();
  html.setWidth(850).setHeight(600);
  const ui = SpreadsheetApp.getUi();
  ui.showModalDialog(html, "Editar informações dos prescritores")

}

function createMenu(){

  const ui = SpreadsheetApp.getUi();
  const menu = ui.createMenu("Custom Menu");
  menu.addItem("Open Form", "loadMainForm");
  menu.addToUi();
}

function onOpen(){
  
  createMenu();
}

search.html

<h1>Search</h1>

addcustomers.html

<h1>Add Customers</h1>

main.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <style>
      .nav-link {
        cursor:pointer;
      }
    </style>
    
  </head>
  <body>
    
    <div class="container"> 
      <ul class="nav nav-tabs">
        <li class="nav-item">
          <div class="nav-link active" id="home-link">Home</div>
        </li>
        <li class="nav-item">
          <div class="nav-link" id="search-link">Search</div>
        </li>
        <li class="nav-item">
          <div class="nav-link" id="add-customer-link">Add Customer</div>
        </li>
        
      </ul>

      <div id="app"></div>
      
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script>

      function loadSearchView(){
        google.script.run.withSuccessHandler(function(html){
          document.getElementById("app").innerHTML = html;
        }).loadSearchView();
      }
      document.getElementById("search-link").addEventListener("click",loadPartialHTML);

    </script>
  </body>
</html>

loadPartials.gs

function loadPartialHTML_(partial) {
  const htmlServ = HtmlService.createTemplateFromFile(partial);
  return htmlServ.evaluate().getContent();
}

function loadSearchView(){

  return loadPartialHTML_("search");

}

function loadAddCustomersView(){

  return loadPartialHTML_("addcustomers");

}

I´ve already tried rewriting the code 3 times, and nothing seems to work, when i open the console, an error appears as the following image

https://i.stack.imgur.com/C9ou8.png

If someone could please help me figure out what I did wrong, I would be very grateful

Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.