[SOLVED] Function isn't executing using google.script.run

Function isn't executing using google.script.run

Edit / Update: I copied the exact same code into another Apps Script project and it works. Unfortunately I want to use this widget on this specific shared spreadsheet. There must be something with the configuration. Does anyone know what this might be? I don't see anything relevant in system settings and my file order and appscript.json files are the same.

I am trying to get user input from an HTML modal back into my appscript code. The modal displays a calendar where a user selects a date and hits submit. All I want to do is retrieve the date that the user clicked and run another function in appscript. I was using SpreadsheetApp.getUi().prompt() before and that worked well but I want to be a bit fancier and have a calendar display (I didn't see an option in the appscript ui library to display a calendar). If there is a better way to do this, that would be much appreciated!

Here is my HTML:

<html>
<head>
  <title>HTML</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css"
    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous"
    referrerpolicy="no-referrer"></script>
  <script>
    $(function () {
                $("#datepicker").datepicker({
                    beforeShowDay: function (d) {
                        var day = d.getDay();
                        return [day != 0 && day != 2 && day != 3 && day != 4 && day != 5 && day != 6];
                    },
                });
            });
  </script>
</head>
<body align="center">
  <form id="Form" onsubmit="runThis()">
    <input type="text" id="datepicker" value="YYYY-MM-DD"/>
    <input type="submit" value="Submit">
  </form>
  <script>
    function runThis() {
      alert("Hi!");
      google.script.run.doSomething();
    }
    </script>
</body>

</html>

Here is my appscript code:

function calendar() {
  var html = HtmlService.createHtmlOutputFromFile("CalendarInput");
  SpreadsheetApp.getUi().showModalDialog(html, "Choose the Monday start date from the calendar:");
}

function doSomething() {
  getMasterSpreadsheet().toast("hello");
  console.log("woohoo!");
  return true;
}

When I hit "submit" in the HTML modal, the alert "Hi" shows up so I know it is running the function runThis() in the HTML code. But it isn't running doSomething(). I checked my execution history and doSomething() isn't there. When I run doSomething() in the console, I successfully get the toast and log. I also tried wrapping it in a success/failure handler (even though my understanding is that this is only for the case where you want to pass info from server back to client) and it fails with

NetworkError: Connection failure due to HTTP 500

I know this has been asked before but I've looked at all the other answers and nothing is working for me. Any idea why this isn't working? Thanks so much.

Solution

Solved! I was using the Head (development) version of my imported libraries. Deleting them, deploying them and re-adding them as a versioned deployment fixed my issue. I solved this on accident because I was having an issue creating new triggers which gave the error: Script authorization failed. Please check your pop-up blocker settings and try again, which versioned libraries also fixed. I hadn't had any problems using the HEAD of libraries before but I guess it can cause some random issues. However, I don't understand why this caused these issues. If anyone has an explanation that would be much appreciated. Thank you!