refresh drop down list after button click in web app

Question

I have a web app with one drop down list and 2 buttons. The drop down list get values from a sheet. The buttons write back in the sheet. The script I have works fine with that:

 <script>
    $(function() {
        $('#txt1').val('');
        google.script.run
          .withSuccessHandler(updateSelect)
          .getSelectOptions();
      });
    function updateSelect(opt)
    {
      var select = document.getElementById("sel1");
  select.options.length = 0; 
  for(var i=0;i<opt.length;i++)
  {
    select.options[i] = new Option(opt[i],opt[i]);
  }
    }

function listS() {
  const selectElem = document.getElementById('sel1')
  const index = selectElem.selectedIndex;
  if (index > -1) {
    const e = document.getElementById("sel1");
    const value = e.options[index].value;
    const body = { index: index, value: value };
    google.script.run.withSuccessHandler(yourCallBack).yourServerSideFunc(body);

  }
}
document.getElementById("but1").addEventListener("click",listS);

function yourCallBack(response) {
}


</script>

In Java script:

    function getSelectOptions()
    {
      var ss=SpreadsheetApp.openById('1onuWoUKh1XmvEAmKktwJekD782BFIru-MDA0omqzHjw');
  var sh=ss.getSheetByName('Database');
  var rg=sh.getRange(2,1,sh.getLastRow()-1,8);
  var vA=rg.getValues();
  var useremail = Session.getActiveUser().getEmail();
  var opt=[];
  for(var i=0;i<vA.length;i++)
  {
    if(vA[i][1] == "Pending Approval"){

      if(vA[i][7]+"@xxx.com" == useremail || vA[i][7]+"@xxx.com" == useremail) {

      opt.push(vA[i][3]+" REQ ID: "+vA[i][0]);

      }

    }
  };

  if (opt.length == 0) {opt.push("You do not have pending requests")};

  return opt;
    }

function doGet() { 
  var output = HtmlService.createHtmlOutputFromFile('list');
  return output; 
}

    function yourServerSideFunc(body) {
     var value = body["value"];
  var ss = SpreadsheetApp.openById('1onuWoUKh1XmvEAmKktwJekD782BFIru-MDA0omqzHjw');
  var sh = ss.getSheetByName('Database');
  var rg=sh.getRange(1,1,sh.getLastRow()-1,4);
  var vA=rg.getValues();
  var str = "Approved";

  for(var i=0;i<vA.length;i++)
  {
    if(vA[i][3]+" REQ ID: "+vA[i][0] == value) {

      sh.getRange(i+1, 2).setValue(str);

      }


  };

      return ContentService.createTextOutput(JSON.stringify({message: "ok"})).setMimeType(ContentService.MimeType.JSON);

Now I am trying to regenerate the drop down list values after the button is clicked. I tried to add

var output = HtmlService.createHtmlOutputFromFile('list');
      return output;

in yourServerSideFunc(body) function to regenerate the HTML but does not work. I have tried to force a HTML refresh, but also did not work.

How can I easily re-trigger the generation of the drop down list items? Worst case scenario it is ok to refresh the whole page, but it should be simple to regenerate the drop down list since I have already the code for it.

Perhaps this will help: https://stackoverflow.com/a/49578427/7215091 — Cooper, May 22 '20 at 18:52
Yes I have a very similar code already existing (and it works well the first time the page is loaded). I do not know how and when to re-call those already existing functions. I have tried to recall those function in the yourServerSideFunc(body), but I must do something wrong — Filippo, May 22 '20 at 19:21
In the example I reference you would just run this `google.script.run .withSuccessHandler(updateSelect) .getSelectOptions();` from client — Cooper, May 22 '20 at 19:24
The button is taking the value in the drop down and update the sheet with some logic. It all works well that part. I tried to run this, but still does not work.. google.script.run.withSuccessHandler(yourCallBack).yourServerSideFunc(body); google.script.run.withSuccessHandler(updateSelect).getSelectOptions(); — Filippo, May 22 '20 at 19:27
I am missing something very basic, I am sure. I just do not know where in the code I need to recall the updateselect functions... It should be after the script triggered by the button click — Filippo, May 22 '20 at 19:29
Hi ! Could you please share the rest of the code or a sample code to reproduce your environment and figure out where the issue might be located? — Mateo Randwolf, May 26 '20 at 07:36
HI, I added the complete code. Please notice that it works as expected. The only issue is that I cannot update the list at the end. — Filippo, May 26 '20 at 15:46

score 0 · Answer 1 · answered May 26 '20 at 17:17

I ended up with this work around.

function listS() {
  const selectElem = document.getElementById('sel1')
  const index = selectElem.selectedIndex;
  if (index > -1) {
    const e = document.getElementById("sel1");
    const value = e.options[index].value;
    const body = { index: index, value: value };
    google.script.run.withSuccessHandler(yourCallBack).yourServerSideFunc(body);

//ADDED:

var select = document.getElementById("sel1");
            select.options[index] = new Option("Approved! Please refresh","Approved! Please refresh");
            selectElem.selectedIndex = index;
      } 


    }

It does not really meet the original goal to refresh the list from the sheet. It would be great if someone else posted a solution to call the server function. I tried to add google.script.run.doGet() and similar, but it seems that it does not call the server side functions properly.

refresh drop down list after button click in web app

1 Answers1