CODEWITHSUNDEEP
javascripthtmlmodal-dialog
Drew Workman
Drew Workman

Reputation: 1

Google Apps Script - .HTML Modal menu does not execute .gs function when " google.script.run.function(); " is called

I'm encountering a strange issue with GAS where whenever I generate a MODAL menu and submit it, sometimes google.script.run works and sometimes it doesn't execute the function I want at all.

Has anyone experienced an issue where google.script.run.insertDesiredFunctionHere() only works sporadically?

Here's the HTML modal menu I've made and whenever the submit button is pressed, google.script.run doesn't seem to want to reliably execute my desired function. In this case specifically "google.script.run.processForm1(form)":

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      body {
        background-color: Gray;
        font-size: 18px;
      }
      input, select, button {
        display: block;
        margin-bottom: 20px;
        font-size: 18px;
      }
      input {
        width: 95%;
        font-size: 16px;
        color: Black;
        font-family: Arial, sans-serif;
        box-sizing: border-box;
        border: groove;
      }
      input::placeholder {
        color: DimGrey;
      }
      label {
        font-family: Arial, sans-serif;
        font-size: 22px;
        color: White;
      }
      select {
        width: 95%;
        font-size: 16px;
        color: Black;
        font-family: Arial, sans-serif;
        box-sizing: border-box;
        border: groove;
      }
      select::value {
        color: DimGrey;
      }
      button {
        background-color: blue;
        color: white;
        font-size: 24px;
        padding: 10px 20px;
        border: none;
        cursor: pointer;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <form id="form1" onsubmit="submitForm1(); return false;">

      <br>

      <label for="warehouse_number">Warehouse Number?</label>
      <input type="text" id="warehouse_number" name="warehouse_number" placeholder="Example: 110" oninput="updateOutput()" required>

      <label for="signal_time">What time was the signal received?</label>
      <input type="text" id="signal_time" name="signal_time" placeholder="Example: 13:31" required><br>

      <label for="zone_number">Zone Number?</label>
      <input type="text" id="zone_number" name="zone_number" placeholder="Example: 123" required><br>

      <label for="zone_description">Zone Description?</label>
      <input type="text" id="zone_description" name="zone_description" placeholder="Example: Receiving Man Door" required><br>

      <label for="camera_check">Camera Check</label>
      <select id="camera_check" name="camera_check" required>
        <option value="" selected>Were camera views available?</option>
        <option value="Yes">Yes</option>
        <option value="No">No</option>
      </select><br>

      <label for="misc_notes">Misc Findings/Notes?</label>
      <input type="text" id="misc_notes" name="misc_notes" placeholder="Example: 'A bird was seen stuck in the tire center.'"><br>

      <button type="submit">Submit</button>
    </form>
    <script>
      function submitForm1() {
        var form = document.getElementById('form1');
        try {
        google.script.run.processForm1(form);
        } catch(err){
          SpreadsheetApp.getUi().alert("Something went wrong!! Please screenshot this and send it to REDACTED - Error Code: " + err);
        }
        google.script.host.close();
      }
    </script>
  </body>
</html>

In this screenshot below you will see I run the function to open the Modal menu (html for that modal menu is above), give it some random data and submit. The first time nothing happens, It doesn't even attempt to call my function (processForm1) - but when I try immediately again you can see (highlighted in yellow) that processForm1 function is called and works as intended. I'm banging my head against the wall trying to figure out why google.script.run is not being reliable.... Any insight would be greatly appreciated!

Image of the GAS execution log showing 2 modal menus ran, but only 1 executing the function on submit

Tried on multiple accounts to run the script, google.script.run does not work reliably. execution log shows no attempt to run function.

Upvotes: 0

Views: 35

Answers (1)

Drew Workman
Drew Workman

Reputation: 1

Added success handler that closes modal after success is recieved. this fixed the issue. ` 

  function submitForm1(){
    var submitBtn = document.getElementById('submit');
    submitBtn.disabled = true;
    var form = document.getElementById('form1');
    google.script.run
      .withSuccessHandler(onSuccess)
      .processForm1(form);
      submitBtn.textContent = 'Please wait!';
      return true;
  }

  function onSuccess(){
    google.script.host.close();
  }

</script>`

Upvotes: 0

Related Questions