google.script.run is not triggering the next function

I have a function that checks if the user fills out the form correctly and checks the user’s questions and answers in the Google Form that was created. I created a loading modal that should transition to whether the form was valid or not. If not valid, it will display which question in the form had the issues. However, it will not go past the loading icon. If I comment out google.script.run.loading(), it will then go to the onExtractDataFormSuccess function and call the error function in the code.gs. Not sure what I am doing wrong.

The following is what I have done:

function checkForm(){
        var f_name = document.getElementById('first_name').value;
        var l_name = document.getElementById('last_name').value;
        //var email = document.getElementById('email_inline').value;
        var fullNme = f_name + " " + l_name;

        var isFNameValid = isValid(f_name);
        var isLNameValid = isValid(l_name);
        //var isEmailValid = validateEmail(email);

        if(isFNameValid && isLNameValid){
          google.script.run.loading();
          console.log("after loading");
          google.script.run.withSuccessHandler(onExtractDataFormSuccess).extractFormData(fullNme);
          console.log("after onExtractDataFormSuccess");
          //var response = google.script.run.extractFormData(fullNme);
          //google.script.run.extractFormData(fullNme);
          //setTimeout(confirmationPopUp,1350);
          return true;
        } else {
          displayErrors();
          return false;
        }
      }

      function onExtractDataFormSuccess(response) {
        console.log("ENTER onExtractDataFormSuccess");
        if(!response.Success){
          console.log("encountered error in form");
          google.script.run.error(response);
        }
      }

Following function is in the code.gs:

function error(response){
 // var ui = HtmlService.createHtmlOutputFromFile('error')
   //   .setWidth(420)
     // .setHeight(96);
  var html = HtmlService.createTemplateFromFile('answer-missing-error');
  html.id = response.Question;
  FormApp.getUi().showModalDialog(html.evaluate().setWidth(520).setHeight(250), "Error");
}

function loading() {
  var ui = HtmlService.createHtmlOutputFromFile('loading-icon')
      .setWidth(170)
      .setHeight(76);
  FormApp.getUi().showModalDialog(ui, 'Loading Quiz to MOATT Database');
}

The folloiwng is the loading icon:

It does not show the following to show the user that there are issues in the form they have created:

enter image description here

Update: The following belongs to the following files:

modal.html:

<script>
   function checkForm(){
        var f_name = document.getElementById('first_name').value;
        var l_name = document.getElementById('last_name').value;
        //var email = document.getElementById('email_inline').value;
        var fullNme = f_name + " " + l_name;

        var isFNameValid = isValid(f_name);
        var isLNameValid = isValid(l_name);
        //var isEmailValid = validateEmail(email);

        if(isFNameValid && isLNameValid){
         google.script.run.loading();
         //CallChangeTitle();
         //console.log("after loading");
          var myRunner1 = google.script.run.withFailureHandler(onExtractDataFormFailure);
          var myRunner2 = myRunner1.withSuccessHandler(onExtractDataFormSuccess);
          myRunner2.extractFormData(fullNme);
          return true;
        } else {
          displayErrors();
          return false;
        }
      }

      function onExtractDataFormSuccess(response) {
        console.log("ENTER onExtractDataFormSuccess");
        if(response.Success){
          console.log("successful");
          google.script.run.notifyUser();
        } else{
        }
      }

      function onExtractDataFormFailure(response) {
        console.log("ENTER onExtractDataFormSuccess");
        var errorJSON = JSON.parse(response.message);
        if(!errorJSON.Success){
          console.log("encountered error in form");
          google.script.run.error(errorJSON);
        } else{
        }
      }
</script>

Code.gs:

function showModeless() {
  var ui = HtmlService.createHtmlOutputFromFile('modal')
      //.setTitle('Extract Quiz Q&A');
      .setWidth(550)
      .setHeight(440)
      FormApp.getUi().showModelessDialog(ui, "Upload Quiz Q&A");
}

function notifyUser(){
  var ui = HtmlService.createHtmlOutputFromFile('confirmation-message')
      .setWidth(420)
      .setHeight(120);
  FormApp.getUi().showModalDialog(ui, 'Quiz Uploaded Successfully');
}

function error(response){

  var html = HtmlService.createTemplateFromFile('answer-missing-error');
  html.id = response.Question;
  FormApp.getUi().showModalDialog(html.evaluate().setWidth(520).setHeight(250), "Error");
}

function loading() {
  var ui = HtmlService.createHtmlOutputFromFile('loading-icon')
      .setWidth(170)
      .setHeight(76);
  FormApp.getUi().showModalDialog(ui, 'Loading Quiz to MOATT Database');
}

answer-missing-error.html:

   <body>
    <div class="container">
        <div class="row">
            <div class="input-field col s12">
              <span style="font-size:15px">Following Question Need Revision:</span><br />
              <?=id?><br /><br />
              <span style="font-size:15px">Answer provided does not match any of the available options. Please correct error and resubmit.</span>
            </div>
          </div>
          <div class="col s12 bottom">
            <div class="floatImg"><img alt="Add-on logo" class="logo" width="25" src="https://drive.google.com/uc?id=1pkKdxeGRAAlotOnP8LIFO3dmbU6giI7h"></div>
            <div class="floatMOATTText"><span class="gray branding-text">Powered By MOATT</span></div>
          </div>
        </div>
      </div>
  </body>

loading-icon.html:

  <body>
    <div class="container">
        <div class="row">
            <div style="text-align:center;">
              <div class="lds-dual-ring"></div>
              </div>
          </div>
        </div>
      </div>
  </body>

Leave a Comment