Как передать переменную элемент-значение из файла Javascript html в файл code.gs в скрипте приложений Google? - PullRequest
Новая
       0

Как передать переменную элемент-значение из файла Javascript html в файл code.gs в скрипте приложений Google?

0 голосов
/ 13 апреля 2020

У меня есть два выпадающих списка, один зависит от другого. Когда пользователь выбирает параметр из первого списка, второй раскрывающийся список заполняет его параметры элементов из массива Google SpreadSheet (на основе свойств фильтра и карты).

Вопрос заключается в следующем: как передать значение элемента из файл сценария Html для файла сценариев приложений Google code.gs , чтобы я мог отфильтровать второй раскрывающийся список в зависимости от выбора, выбранного пользователем из первого списка?

ReceivePayment- js. html file: 

  <script>

   document.addEventListener('DOMContentLoaded', function() {
   var elems = document.querySelectorAll('select');
   var instances = M.FormSelect.init(elems);
   });

   document.getElementById("btn").addEventListener("click",populateData);             
   document.getElementById("reference").addEventListener("onchange",dropDown);     


   //Trying to pass this directly below variable that contains the value of Reference dropdown-list 
   //(onchange event listener) to code.gs file inside doGet function 
   //where my lists coded to be created dynamically and evaluated.

   function dropDown(){
   var selectedRef =  document.getElementById("reference").value;
   }

</script>

Code.gs file: 

function doGet(e){
       var ss = SpreadsheetApp.openByUrl(url);
       var ws = ss.getSheetByName("Account lists");

       var receivePaymentTemp = HtmlService.createTemplateFromFile("Consol");  
       receivePaymentTemp.title = "Receive Payment";  

       var bankAcountsList = ws.getRange(2,6,ws.getRange("F2").getDataRegion().getLastRow()-1,1).getValues();
       var htmlBankAcountList = bankAcountsList.map(function(r){ return '<option>' + r[0] + '</option>'; }).join('');
       receivePaymentTemp.bankAcountsList = htmlBankAcountList

       var receivePaymentRef = ws.getRange(2,8,ws.getRange("H2").getDataRegion().getLastRow()-1,1).getValues();
       var htmlreceivePaymentRef = receivePaymentRef.map(function(r){ return '<option>' + r[0] + '</option>'; }).join('');
       receivePaymentTemp.receivePaymentRef = htmlreceivePaymentRef



       var chartOfAccounts =  ws.getRange(2, 1,ws.getRange("A1").getDataRegion().getLastRow()-1,2).getValues();
//Here where I need to get the value of document.getElementById("reference").value from the other side
//(ReceivePayment-js.html) and put it inside referenceBox variable as I obviously didn't succeed 
           var referenceBox = ""
           var filteredReference = chartOfAccounts.filter(function(item){ return item[0] === referenceBox; });
           var htmlfilteredCustomer = filteredReference.map(function(acN){ return '<option>' + acN[1] + '</option>'; });
           receivePaymentTemp.chartOfAccounts = htmlfilteredCustomer

       return receivePaymentTemp.evaluate();         
       }

Consol. html file: 

<div class="row">
      <div class="input-field col s6">
      <select id="creditAccount">
      <option disabled selected>Customer</option>
      <?!= chartOfAccounts; ?> 
      </select>
      </div>
      </div>
      </div>
      </form>
      </div>

До сих пор я пытался поместить 

document.getElementById("reference").value;

в файл Code.gs, но он вернул ошибку.

Поскольку я новичок в кодировании, я заблудился и не могу понять, как это должно быть сделано правильно. Заранее спасибо.

1 Ответ

0 голосов
/ 13 апреля 2020

Этот пример делает то же самое. Имеется три зависимых выпадающих списка.

html: 

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('res') ?>
    <?!= include('css') ?>
  </head>
  <body>
    <h1>Select State, County and City</h1> 
    <br /><select id="selst" class="control" onChange="selectState();"> 
      <option value="" selected></option>
    </select>State
    <br /><select id="selco" class="control" onChange="selectCounty();"> 
      <option value="" selected></option>
    </select>County
    <br /><select id="selci" class="control" onChange="selectCity();"> 
      <option value="" selected></option>
    </select>City
    <div id="msg"><h2>Data Available from:</h2><p><a href="https://github.com/grammakov/USA-cities-and-states" target="_blank">https://github.com/grammakov/USA-cities-and-states</a></p></div> 
    <input type="button" value="Exit" onClick="google.script.host.close();" />
   <?!= include('script') ?>
  </body>
</html>

javascript: 

<script>
  $(function(){
    $('#selst').css('background-color','#ffff00');
    google.script.run
    .withSuccessHandler(function(sObj){
      console.log(sObj.vA);
      updateSelectList(sObj);
    })
    .getStates();
  });

  function updateSelectList(sObj){
    var select = document.getElementById(sObj.id);
    select.options.length=1; 
    if(sObj.vA){
      for(var i=0;i<sObj.vA.length;i++)
      {
        select.options[i + 1] = new Option(sObj.vA[i],sObj.vA[i]);
      }
    }
    $('#' + sObj.id).css('background-color','#ffffff');
  }

  function selectState() {
    $('#selco').css('background-color','#ffff00');
    var state=$('#selst').val();
    google.script.run
    .withSuccessHandler(function(sObj){
      updateSelectList(sObj);
    })
    .getCounties(state);
  }

  function selectCounty() {
    $('#selci').css('background-color','#ffff00');
    var county=$('#selco').val();
    var state=$('#selst').val();
    google.script.run
    .withSuccessHandler(function(sObj) {
      updateSelectList(sObj);
    })
    .getCities(state,county);   
  }

  function selectCity() {
    //do nothing for now
  }
  console.log('My Code');
</script>

code.gs: 

function onOpen() {
  menu();
}

function menu() {
  SpreadsheetApp.getUi().createMenu('My Tools')
  .addItem('Show Districts Dialog','showDistrictsDialog' )
  .addItem('Create Named Rage', 'jjeSUS1.createNamedRange')
  .addItem('Select Columns Skip Header', 'jjeSUS1.selectColumnsSkipHeader')
  .addItem('Update States Global', 'updateStatesGlobal')
  .addItem('Create States Sheets', 'createStateSheets')
  .addItem('Delete States Sheets', 'deleteStateSheets')
  .addItem('Make State Sheet County Column Headers', 'makeStateSheetCountyColumnHeaders')
  .addItem('Clean Globals', 'cleanGlobals')
  .addToUi();
}

function doGet() {
  return HtmlService.createTemplateFromFile('districts').evaluate();
}

function getStates() {
  var states=String(getGlobal('States')).split('~~~');
  var sObj={vA:states,id:'selst'};
  return sObj;
}

function getCounties(state) {
  var state=state || 'Colorado';
  var ss=SpreadsheetApp.openById(getGlobal('DataSSID'));
  var sh=ss.getSheetByName('USCities');
  var rg=sh.getDataRange();
  var vA=rg.getValues();
  var counties=[];
  for(var i=0;i<vA.length;i++) {
    if(vA[i][2]==state && counties.indexOf(vA[i][3])==-1) {
      counties.push(vA[i][3]);
    }
  }
  var sObj={vA:counties.sort(),id:'selco'};
  return sObj;
}

function getCities(state,county) {
  var ss=SpreadsheetApp.openById(getGlobal('DataSSID'));
  var sh=ss.getSheetByName('USCities');
  var rg=sh.getDataRange();
  var vA=rg.getValues();
  var cities=[];
  for(var i=0;i<vA.length;i++) {
    if(vA[i][2]==state && vA[i][3]==county && cities.indexOf(vA[i][4])==-1) {
      cities.push(vA[i][4]);
    }
  }
  var sObj={vA:cities.sort(),id:'selci'};
  return sObj;
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

function showDistrictsDialog() {
  var userInterface=HtmlService.createTemplateFromFile('districts').evaluate();
  SpreadsheetApp.getUi().showModelessDialog(userInterface,'US Cities, Counties and States')
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...