CODEWITHSUNDEEP
javascripthtmlgoogle-apps-scriptgoogle-apps
BeachedCactus
BeachedCactus

Reputation: 3

Javascript not running in google appscipt

I'm having problems when trying to run the following code in Google app script.

// 1.foldername = Folder name               | 3.templateId = ID of the template to use
// 2.SheetId    = ID of spreadsheet to use. | 4.rootFolder = ID of the root folder to save everything to

function createTemplate(){
  var folderName = $("#fileName").text(); //Get text from fileName textbox  
  var rootId = $("#rootId").val(); //Get value of selected item in rootId element
  var sheetId = $("#fileId").val(); //Get value of selected item in fileId element
  var templateId = $("#templateId").val(); //Get value of selected item in templateId element

  //google.script.run.template(folderName, sheetId, templateId, rootId); //Execute template function serverside
  alert('done'); //Create alert to show that it is done |Remove after debugging|
}

When the code above gets called non of it executes. I've tested by creating logs at several points within the block above. Anything above the lines

  var folderName = $("#fileName").text(); //Get text from fileName textbox  
  var rootId = $("#rootId").val(); //Get value of selected item in rootId element
  var sheetId = $("#fileId").val(); //Get value of selected item in fileId element
  var templateId = $("#templateId").val(); //Get value of selected item in templateId

will be executed I have also commented these lines out and the code executes fine that way. So I assume the error lies within the these lines however, I'm unsure of what the error is.

Here is my HTML code if it helps any.

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <title>Report builder</title>
    <?!= bootstrap.css ?>
    <?!= include('site')?>
</head>
<body>
    <div class="body">

      <? var files = getAllFiles(); ?>
      <? var templates = getAllTemplates(); ?>
      <? var folders = getAllFolders(); ?>
      <form class="form-horizontal">
        <div class="control-group">
          <div class="controls" style="margin:5px;">
            <input id="fileName" type="text" placeholder="Folder name"/>
          </div>
        </div>

        <div class="control-group">
          <div class="controls" style="margin:5px;">
            <select id="rootId" style="height:30px;">
                <option value="Drive">Drive</option>
              <? for (i in folders){ ?>
                <option value="<?= folders[i].getId(); ?>"> <?= folders[i].getName(); ?> </option>
              <? } ?>
            </select>
          </div>
        </div>

        <div class="control-group">
          <div class="controls" style="margin:5px;">
            <select id="fileId" style="height:30px;">
              <? for (i in files){ ?>
                <option value="<?= files[i].getId(); ?>"> <?= files[i].getName(); ?> </option>
              <? } ?>
            </select>
          </div>
        </div>

        <div class="control-group">
          <div class="controls" style="margin:5px;">
            <select id="templateId" style="height:30px;">
              <? for (i in templates){ ?>
                <option value="<?= templates[i].getId(); ?>"> <?= templates[i].getName(); ?> </option>
              <? } ?>
            </select>
          </div>
        </div>
        <button class="btn btn-primary" type="button" onclick="createTemplate()">Create Report</button>
     </form>
    </div>
</body>

I have the JavaScript function located at the bottom of the HTML file. Thanks in advance!

Upvotes: 0

Views: 61

Answers (1)

Zig Mandel
Zig Mandel

Reputation: 19835

Its because you are mixing server code and client code. Make sure to reread the htmlService docs. You cant access the dom or use jquery from the server. All those vslues must be passes as parameters from the client js into google.run server call.

Upvotes: 1

Related Questions