Search code examples
javascriptgoogle-apps-scriptweb-applicationsgoogle-sheetsserver-side

Uncaught TypeError: google.script.run.doSomething is not a function

I am trying to check if the input name is already in a Google Sheet. However, I am getting this error:

Uncaught TypeError: google.script.run.doSomething is not a function.

Here is my Index.html file.

<!DOCTYPE html>
<html>

<head>
    <base target="_top">
    <meta charset="UTF-8">
</head>

<body>
    <input type="text" id="meetingTitle" value=""> // Getting value here
    <button onclick="checkName()">Check if available</button> //Calling function is is causing the error.
    <p id=nameVerification><i>Click the button above to check availability.</i></p>

    <script>
        function checkName() {
            var toPass = document.getElementById("meetingTitle").value;
            prompt("toPass " + toPass);
            google.script.run.doSomething();
        }

        function checkNameCS(checkNameSSReturn) {
            if (checkNameSSReturn == "") {
                document.getElementById('nameVerification').innerHTML = "Already in Use: Please try with another name."
                document.getElementById("meetingTitle").value = "";
            } else {
                document.getElementById("meetingTitle").value = checkNameSSReturn;
                document.getElementById('nameVerification').innerHTML = "Meeting name available. Procced."
            }


        }

        function doSomething () {
            var nameGiven = document.getElementById("meetingTitle").value;
            var nameExists = false;
            var nameVerified = false;
            var name = nameGiven.toLowerCase();
            name = strip(name);
            prompt("name " + name);


            var spreadsheetId = ''; //Sheet id entered
            var rangeName = 'Sheet1';
            var values = Sheets.Spreadsheets.Values.get(spreadsheetId, rangeName).values;
            if (!values) {} else {
                for (var row = 0; row < values.length; row++) {
                    if (name == values[row][0]) {
                        nameExists = true;
                    }
                }
            }

            if (nameExists) {
                checkNameCS("");
                prompt("name2 " + " ");
                return;
            }

            nameVerified = true;
            prompt("name2 " + name);
            checkNameCS(name);
            return;
        }

        function strip(str) {
             return str.replace(/^\s+|\s+$/g, '');
        }

    </script>
</body>

</html>

I tried debuging it with prompts but with no success. It seems like the function do something is properly called. But the code stops working aftergoogle.script.run.doSomething();.

I have looked at the documentation for successhandlers but they dont solve the issue either.

Solution

  • How about this modification?

    Issue of your script:

    • doSomething() of google.script.run.doSomething() is required to be Google Apps Script.
      • In your script, doSomething() is put in HTML (index.html), and a method for using Google Apps Script is included. When google.script.run.doSomething() is run, doSomething() cannot be found at Google Apps Script (code.gs). By this, such error occurs. And if doSomething() is run at HTML side, also an error occurs at Sheets.Spreadsheets.Values.get(), because Sheets.Spreadsheets.Values.get() is the method of Advanced Google Services with Google Apps Script.
    • If you put it to Google Apps Script (code.gs), Javascript which is used at the script of doSomething() is required to be modified.

    Modified script:

    In this modification, your script was separated to Google Apps Script (code.gs) and HTML (index.html). var nameGiven = document.getElementById("meetingTitle").value; and checkNameCS(name); are used in index.html.

    By the way, before you run this script, please enable Sheets API at Advanced Google Services.

    Google Apps Script: code.gs 
    function strip(str) {
  return str.replace(/^\s+|\s+$/g, '');
}

function doSomething (nameGiven) {
  var nameExists = false;
  var nameVerified = false;
  var name = nameGiven.toLowerCase();
  name = strip(name);

  var spreadsheetId = '###'; //Sheet id entered
  var rangeName = 'Sheet1';
  var values = Sheets.Spreadsheets.Values.get(spreadsheetId, rangeName).values;
  if (values) {
      for (var row = 0; row < values.length; row++) {
          if (name == values[row][0]) {
              nameExists = true;
          }
      }
  }

  if (nameExists) {
      return "";
  }

  nameVerified = true;
  return name;
}
    HTML: index.html 
    <!DOCTYPE html>
<html>

<head>
    <base target="_top">
    <meta charset="UTF-8">
</head>

<body>
    <input type="text" id="meetingTitle" value="">
    <button onclick="checkName()">Check if available</button>
    <p id=nameVerification><i>Click the button above to check availability.</i></p>

    <script>
        function checkName() {
            var toPass = document.getElementById("meetingTitle").value;
            prompt("toPass " + toPass);
            var nameGiven = document.getElementById("meetingTitle").value; // Added
            google.script.run.withSuccessHandler(checkNameCS).doSomething(nameGiven); // Modified
        }

        function checkNameCS(checkNameSSReturn) {
          console.log(checkNameSSReturn)
            if (checkNameSSReturn == "") {
                document.getElementById('nameVerification').innerHTML = "Already in Use: Please try with another name."
                document.getElementById("meetingTitle").value = "";
            } else {
                document.getElementById("meetingTitle").value = checkNameSSReturn;
                document.getElementById('nameVerification').innerHTML = "Meeting name available. Procced."
            }
        }
    </script>
</body>

</html>

    Reference: