Getting blank screen after running Google web app script

Question

I am working on a check-in app though Google Sheets and want to make a search function that that takes a sport name as input in an HTML form and then returns information about the sport from the sheet in a HTML table. However, when I try to test the web app, nothing happens. How can I fix this?

Here is my code:

Index.html

<!DOCTYPE html>
 <html>
  <head>
   <?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>
  </head>
  <body>

    <fieldset id="tasks-panel">
      <legend>Sports</legend>

      <form name="sport-form" id="sport-form">
        <label for="sport-name">Search a sport by name:</label>
        <input type="text" name="sport-name" id="sport-name" />
        <button onclick='addTable()' id='submit-button'>Press this</button>
      </form>

      <p>List of things:</p>
      <div id="toggle" style="display:none"></div>
    </fieldset>

    <?!= HtmlService.createHtmlOutputFromFile('Javascript').getContent(); ?>

  </body>
</html>

Javascript.html

<script> 
  function addTable() {
  var sportInput = $('sport-name').value();
  var columnNames = ["Names", "Times"];
  var dataArray = google.script.run.getSportData(sportInput);


  var myTable = document.createElement('table');
  $('#divResults').append(myTable);

  var y = document.createElement('tr');
  myTable.appendChild(y);

  for(var i = 0; i < columnNames.length; i++) {
    var th = document.createElement('th'),
        columns = document.createTextNode(columnNames[i]);
    th.appendChild(columns);
    y.appendChild(th);
  }

  for(var i = 0 ; i < dataArray.length ; i++) {
    var row= dataArray[i];
    var y2 = document.createElement('tr');
    for(var j = 0 ; j < row.length ; j++) {
      myTable.appendChild(y2);
      var th2 = document.createElement('td');
      var date2 = document.createTextNode(row[j]);
      th2.appendChild(date2);
      y2.appendChild(th2);
        }
      }
  }
</script>

Code.gs

//Setting up global variables
var ss = SpreadsheetApp.openById("-spreadsheetID-");
var sheet = ss.getSheetByName("Sheet1");

var sportsFromSheet = sheet.getRange("D4:D12");
var namesFromSheet = sheet.getRange("B4:B12").getValues();
var timesFromSheet = sheet.getRange("A4:A12").getValues();
var NAMES = [];
var TIMES = [];
var OUTPUT = [];

//doGet function
function doGet() {
  return HtmlService.createTemplateFromFile('Index').evaluate()
      .setTitle('Check In Data')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

//Gets both names and times of checked-in people 
function getSportData(input) {
  var sportInput = input;
    getNamesInSport(sportInput);
    getTimesInSport(sportInput);

    OUTPUT = [
      [NAMES],
      [TIMES]
      ];

    Logger.log(OUTPUT);
    return OUTPUT;
}

//Puts the names of every person from an inputted sport into an array.
function getNamesInSport(input) { 
  var data = sportsFromSheet.getValues();

  for (var i = 0; i < data.length; i++) {
    if(data[i] == input){
      NAMES.push(namesFromSheet[i][0]);
    }
  }
}

//Puts the times of every person from an inputted sport into an array.
function getTimesInSport(input){
  var data = sportsFromSheet.getValues();

  for (var i = 0; i < data.length; i ++) {
    if(data[i] == input){
      TIMES.push(timesFromSheet[i][0]);
    }
  }
}

The dev console says Uncaught TypeError: $(...).value is not a function. The execution transcript in the google script appears to succeed though (it says Execution Succeeded). — Grant
– Grant, Commented Nov 22, 2016 at 3:12
I think error is in 3rd line of javascript.html file i.e. var sportInput = $('sport-name').value(); .. and I guess you have to write .val() instead of value, try it, not sure though. — Shyam Kansagra
– Shyam Kansagra, Commented Nov 22, 2016 at 5:07
I think if you want to use any library in a Web App you have to explicitly load it first. — Robin Gertenbach
– Robin Gertenbach, Commented Nov 22, 2016 at 7:38

Sam Scholefield · Accepted Answer · 2016-11-24 09:33:52Z

1

JQuery id selectors must be prefixed with # so to grab the value from the the 'sport-name' input you'll need to select it using

var sportInput = $('#sport-name').val();

Additionally, as Robin comments above, if you want to use the JQuery library you'll need to load it, the code you've shown indicates you might not have done this?

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

Although if this were the case you'd probably be seeing a '$ is not defined' error straight away.

edited Nov 24, 2016 at 9:33

answered Nov 22, 2016 at 13:29

Sam Scholefield

1,2622 gold badges9 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Grant Over a year ago

I fixed these things, but it still isn't working. It looks like these two things helped fix one part of the issue, but the dev console still says Uncaught TypeError: Cannot read property 'length' of undefined(…) addTable and onclick and then Uncaught Error: The script completed but the returned value is not a supported return type with a bunch of values below it. Any ideas as to what those could be from?

Sam Scholefield Over a year ago

You have three calls to .length in addTable (columnNames, dataArray and row). columnNames is defined by you var columnNames = ["Names", "Times"]; so we know that is ok. Row is created using a value from dataArray var row= dataArray[i]; so from this we can tell that there is a problem with dataArray. Use console.log to determine what is being returned to this from your google.script.run call.

Collectives™ on Stack Overflow

Getting blank screen after running Google web app script

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related