javascriptjquerygoogle-apps-scriptweb-applications

How to setup onclick?


I am trying to run a function in the HTML file when the Select Template item is clicked. I have tried 2 different way but they don't seem to work. I got it to run with the onclick="google.script.run.selectTemplate" but I want to run the local function first.

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  
  <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<body>
    <div class="content">
      <div class="card mb-4 box-shadow">
        <div class="card-body">
          <h5 class="card-title">Welcome!</h5>
          <p class="card-text">Please select the template that you'd like to fill with form responses!</p>
          <div class="list-group mb-4">
            <div id="select-template" onclick="runSelectTemplate();" class="list-group-item list-group-item-action">Select Template 
              <i class="fas fa-circle-notch fa-spin float-right" style="font-size:24px"></i>
            </div>
          </div>
          <button type="button" id="get-started" class="btn btn-lg btn-block btn-primary" disabled>Get Started</button>
        </div>
      </div>
    </div>

    <script>
      $(function() {
        log("Setting up sidebar clicking...");
        $('#select-template').click(runSelectTemplate);
      });
      
      function runSelectTemplate(){
        log("Select Template clicked... run selectTemplate()");
        //Do stuff here first, then;
        google.script.run.selectTemplate(); //success: change icon to green -> enable getstarted button  //error: icon to X then back to file
      }
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</body>
</html>

Update: I've tried updating the select-template element to a button, but it doesn't work either... The <script> section doesn't seem to run at all.

<button type="button" id="select-template" class="btn btn-med btn-block btn-outline-primary mt-4 mb-4">1. Select Template
    <i class="far fa-file-alt float-right" style="font-size:24px"></i>
</button>
<button type="button" id="get-started" class="btn btn-lg btn-block btn-primary" disabled>Get Started</button>

Solution

  • It looks like I made a silly mistake. My jQuery script tag was at the bottom of the Body tag, so it wasn't loaded right away.

    <head>
      <base target="_top">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
      <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"</script>
      <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    </head>