I have a web page, which contains a form and an html table.

1. The user fills out the form;
2. Clicks on ;
3. A client side function prepares the data and have google.script.run.newTask(dataSet); pass the data to the server-side
4. Another function gets it, makes a tweak or two and writes it to the spreadsheet;
5. Run another function that builds that HTML table, bringing the latest data just written

There are not errors, but the table is not built. Do I have to use setTimeout() or something that makes the last function wait for the previous ones to finish?

Here's the client side function:

function addTaskToSheet() {
  var formElements = document.getElementById("form").elements;
  var postData = [];
  for (var i = 0; i < formElements.length; i  ) {
    if (formElements[i].type != "submit" && formElements[i].type != 'checkbox') { //we dont want to include the submit-buttom
      postData.push(formElements[i].value);
    } else if (formElements[i].type == 'checkbox' && formElements[i].checked == true) {
      postData.push(formElements[i].checked);
    } else if (formElements[i].type == 'checkbox' && !formElements[i].checked) {
      postData.push('false');
    }
  }

  let timeStamp = new Date();
  timeStamp = timeStamp.toString();
  const agencyPartner = document.getElementById('agencySelect');
  const selectedAgency = agencyPartner.options[agencyPartner.selectedIndex].text;

  const client = document.getElementById('clientSelect');
  const selectedClient = client.options[client.selectedIndex].text;
  
  let dateAssigned = postData[1].toString();
  const item = postData[0];
  const link = postData[2];
  const notes = postData[3];
  const requestApproval = postData[4];

  let dataSet = [];
  dataSet.push(timeStamp, selectedAgency, selectedClient, '', '', dateAssigned, item, link, notes, '', requestApproval, '', '', '')
  console.log(dataSet)
  google.script.run.newTask(dataSet);
  setTimeout(loadClientTasks(selectedClient), 3000);
}

Thank you!

CodePudding user response：

If another function of Run another function that builds that HTML table, bringing the latest data just written is loadClientTasks, how about the following modification?

From:

google.script.run.newTask(dataSet);
setTimeout(loadClientTasks(selectedClient), 3000);

To:

google.script.run.withSuccessHandler(_ => loadClientTasks(selectedClient)).newTask(dataSet);

• By this modification, loadClientTasks(selectedClient) is run after newTask(dataSet) was finished.

Note:

• If you are required to use setTimeout, in the case of setTimeout(loadClientTasks(selectedClient), 3000), loadClientTasks is run soon because of (selectedClient) of loadClientTasks(selectedClient). In this case, how about the following modification?

  • To

      google.script.run.newTask(dataSet);
      setTimeout(loadClientTasks.bind(undefined, selectedClient), 3000);
    

  • or, if you are required to wait after newTask was finished, how about the following modification?

      google.script.run.withSuccessHandler(_ => setTimeout(loadClientTasks.bind(undefined, selectedClient), 3000)).newTask(dataSet);
    

Reference:

• withSuccessHandler(function)