Unable to call a Google WebApps server side function from HTML page

Question

I have a simple Google WebApps script. It is loading a modal dialog, and then calling a server side function when the dialog is submitted.

This is my html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
          function handleFormSubmit(formObject) {
              google.script.run.processForm(formObject);
              google.script.host.close();
      }
    </script>
  </head>
  <body>
  <form id="myForm" onsubmit="handleFormSubmit(this)">
    <table>
    <tr>
    <td>My Team</td>
    <td><input type="text" name="myTeam"/></td>
    </tr>
    </table>
       
    <input type="submit" value="Submit" />
    </form>
  </body>
</html>

This is the script:

function doGet() {
  var document = DocumentApp.getActiveDocument();
  var ui = document.getBody().appendListItem("hello!")

    DocumentApp.getUi()
      .createMenu('The Bomb')
      .addItem('Simple Kafka Topic', 'sboKafka')
      .addSeparator()
      .addToUi();
}

function sboKafka() {
  var html = HtmlService.createHtmlOutputFromFile('SBOKafka')
      .setWidth(400)
      .setHeight(300);
  
  DocumentApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
      .showModalDialog(html, 'Simple Kafka Topic');
}

function processForm(formObject) {
  Logger.log("processForm");
  var zt = formObject.myTeam;
  DocumentApp.getActiveDocument().getBody().appendListItem(zt)
}

However, when the dialog is submitted, the server side function is not run.

I am seeing the following error in the browser error console.

Unsafe JavaScript attempt to initiate navigation for frame with origin 'https://docs.google.com' from frame with URL 'https://n-e2b764askqfnjofaraeymmf47os6fnoc372huli-0lu-script.googleusercontent.com/userCodeAppPanel'. 

The frame attempting navigation of the top-level window is sandboxed, but the flag of 'allow-top-navigation' or 'allow-top-navigation-by-user-activation' is not set.

Any idea what I am doing wrong?

UPDATE 1: This is how I am testing this out....

Close the script editor window and the google doc.
Go to Drive -> Open the Doc
Click on Tools -> Script Editor. This opens the script editor window
Go to script editor window
Click on Run -> Run Function -> doGet
Go back to word doc. Click on The Bomb -> Simple Kafka Topic
Dialog pops up.
Enter a string in team name.
Submit
Nothing happens

Expected: Text in document to change.

Tanaike · Answer 1 · 2020-11-24T02:52:08.037

2

I thought that in this case, the reason of your issue might be due to the submit of the form. So as a simple modification for resolving your issue, how about the following modifications?

Pattern 1:

In this pattern, return false is used.

From:

<form id="myForm" onsubmit="handleFormSubmit(this)">

To:

<form id="myForm" onsubmit="handleFormSubmit(this); return false;">

In this modification, false is returned.

Pattern 2:

In this pattern, Event.preventDefault() is used.

From:

<form id="myForm" onsubmit="handleFormSubmit(this)">

To:

<form id="myForm" onsubmit="event.preventDefault(); handleFormSubmit(this);">

References:

Related thread.
- How to prevent form from being submitted?
Event.preventDefault()

edited Nov 24 '20 at 02:52

answered Nov 24 '20 at 02:12

Tanaike

181,128
11
97
165

1

I think that it's also necessary to add `preventDefault()` to the form submit event listener as is done in the Google Apps Script about Server-Client communication. – Rubén Nov 24 '20 at 02:27
1

@Rubén Thank you for replying. Yes. At first, I thought 2 patterns of `handleFormSubmit(this); return false;` and `event.preventDefault(); handleFormSubmit(this);`. When `handleFormSubmit(this); return false;` is used, `false` is returned with the asynchronous process. So in this case, I thought that this modification can resolve the OP's issue. But from your replying, I think that when both patterns are suggested, they will be more useful. So I added it. Thank you for your always support. – Tanaike Nov 24 '20 at 02:52
Thank you all for your responses. But no, this suggested workaround doesnt work. – feroze Nov 24 '20 at 23:04
@feroze Thank you for replying. I apologize for the inconvenience. And I have to apologize for my poor skill. Unfortunately, from `But no, this suggested workaround doesnt work.`, I cannot replicate your situation. Because when I tested your script using my suggested modification, I can confirm that your error message could be removed. But I would like to support you. So in order to correctly understand about your current situation, can you provide the detail flow for replicating your current issue? By this, I would like to confirm it. I deeply apologize for my poor skill again. – Tanaike Nov 24 '20 at 23:09
I did not try the `PreventDefault` suppression of the event. I thought that was in the sample just because they want to show the URL of the uploaded file without dismissing the dialog... But I can try. – feroze Nov 25 '20 at 00:27
@feroze Thank you for replying. Although I tested your script using both patterns in my answer again, I could confirm that the message you want to remove was removed. Unfortunately, I cannot still replicate your situation. I apologize for this. In order to replicate your current situation, I would like to confirm it. Your current script is the same with your script in your question, and you reflected my suggested modifications for the script. Is my understanding correct? – Tanaike Nov 25 '20 at 00:35
hi! Yeah, so I used exactly the same code pasted here. It doesnt work. I added the `event.preventDefault()` as well, in the form. – feroze Nov 25 '20 at 00:53
I will update my question to say how I invoke this. Maybe something wrong with that... – feroze Nov 25 '20 at 00:53
@feroze Thank you for the additional information. I tested your added flow. But unfortunately, when my suggested modifications are used, the message you want to remove is not shown. So I cannot still replicate your situation. I apologize for this. I have a question. In your situation, what browser are you using? In my environment, I tested it using Chrome. – Tanaike Nov 25 '20 at 02:02
I am using chrome as well. – feroze Nov 25 '20 at 03:45
@feroze Thank you for replying. Unfortunately, when Chrome is used for testing your script and your flow in your updated question and my suggested modification patterns, no error occurs. I cannot replicate your situation of `It doesnt work`. I deeply apologize for my poor skill. – Tanaike Nov 25 '20 at 04:42

Unable to call a Google WebApps server side function from HTML page

1 Answers1

Pattern 1:

From:

To:

Pattern 2:

From:

To:

References: