htmlgoogle-apps-scriptweb-applicationsgoogle-sheets

There was an error during the transport or processing of this request. Error code = 10, Path = /wardeninit

I'm trying to pass an object (contents of a sheet row) to an apps script template. You can see the row in the screenshot.

enter image description here

my function in apps script contains:

var sendableRows = rows.filter(function (row) { //ONLY CHECKED ROWS.
  return row['Index'] == true;
});  
var sendableRow = sendableRows[0];
Logger.log('sendableRow '+ JSON.stringify( sendableRow));

var html = HtmlService.createTemplateFromFile('RowPopup');
html.row = JSON.stringify(sendableRow);
var h =html.evaluate();

SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
  .showModalDialog(h, 'Create Documents');

The logger statement produces:

 sendableRow {"Index":true,"Timestamp":"2019-02-12T21:09:14.000Z","FROM":222222,"CONVERSATION":"THIS IS A TEST","ME":"","relativeRow":14,"absoluteRow":15}

My Rowpopup.html is :

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <script>
    // Prevent forms from submitting.
    function preventFormSubmit() {
      var forms = document.querySelectorAll('forms');
      for (var i = 0; i < forms.length; i++) {
        forms[i].addEventListener('submit', function(event) {
          event.preventDefault();
        });
      }
    }
    window.addEventListener('load', preventFormSubmit);

    function handleFormSubmit(formObject) {
      // the output from form goes to processDocBuildHtml
      google.script.run
          .withSuccessHandler(updateUrl)
          .processRowPopupHTML(formObject);
    }

    function updateUrl(url) {
      var div = document.getElementById('output');
      div.innerHTML = '<a href="' + url + '">Sent!</a>';
    }
  </script>
</head>

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

    <div>
      <label for="optionList">Click me</label>
      <select id="optionList" name="email">
        <option>Loading...</option>    
      </select>
    </div>

    <br>
    <div>
    </div>

    <br>
    <div>
      <textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
      </textarea>
    </div>
    <div id="textboxes"></div>

    <div id="insert"></div>

    <input type="submit" value="Submit" />
  </form>

  <div id="output">
  </div>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  <script src="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>
  <link href="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css" rel="stylesheet">

  <script>
  function getConversations() {
    var jsonRow = <?= row ?>; //PASSED IN JSON
    console.log('row');
    var myObj = JSON.parse(jsonRow);
    console.log(myObj['CONVERSATION']);

    return myObj['CONVERSATION'];
  }
  </script>
</body>

When I run this I see:

enter image description here

Which shows some issue with "warden".

Also, I don't see the expected data outputted to console in:

       console.log('row');
       var myObj = JSON.parse(jsonRow);
       console.log(myObj['CONVERSATION']);

What am I doing wrong?

Solution

  • Your client side code never calls getConversations, that is why you don't see it on the console. Among many ways to do this, you could add an IIFE to call that function by adding the following on between <script> tags

    (function (){getConversations()}());

    By the other hand, the referred error message on the Chrome Developers Tools Console occurs even with the simplest code like the following

    function myFunction(){
  var html = HtmlService.createHtmlOutputFromFile('index');
  SpreadsheetApp.getUi().showModalDialog(html, 'Test')
}

    <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Hello world!
  </body>
</html>

    So it's not you, it's Google