Кнопка «Отправить» закрывает диалоговое окно, но затем оно открывается снова

У меня есть функция, которая просит пользователей выбрать имя из раскрывающегося списка. Когда я нажимаю кнопку отправки, форма закрывается, записывает имя в выбранную ячейку, но затем сразу же открывается снова. Что я делаю неправильно?

function selectName(name) {

  //Select a name from the list 
  var html = HtmlService.createHtmlOutputFromFile('nameSelector')
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .setWidth(400)
    .setHeight(200);
  SpreadsheetApp.getUi().showModalDialog(html, 'Select Name:');
  if (name ==null)return; //skip the process while value is null
 
  //Set the selected value to cell A1
  var ss = SpreadsheetApp.getActiveSpreadsheet();
    ss.getRange("A1").setValue(name);
};

HTML-код:

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

  <label for = "name">Select a name:</label> <br/>

  <select title = "Selection list" id = "name" standart>
    <option value = "no_choice">Click here to select</option>
    <option value='Name 1'>Name 1</option>
    <option value='Name 2'>Name 2</option>
    <option value='Name 3'>Name 3</option>
    <option value='Name 4'>Name 4</option>
    <option value='Name 5'>Name 5</option>
  </select>

  <input type = "button" value = "Submit" class = "action" onclick = "form_data()" >
  <input type = "button" value = "Close" onclick = "google.script.host.close()" />

  <script>
  function form_data() { 
    var choice=document.getElementById('name').value;
    google.script.run.selectName(choice);
    google.script.host.close();
  }
  </script> 
  </body>
</html>

Я попробовал поставить host.close() в SuccessHandler в скрипте.

  <script>
  function form_data() { 
    var choice=document.getElementById('name').value;
    google.script.run.withSuccessHandler(google.script.host.close()).selectName(choice);
  }
  </script>

и поместим host.close() в отдельную функцию, как описано здесь:

  <script>
  function form_data() { 
    var choice=document.getElementById('name').value;
    google.script.run.withSuccessHandler(closeHelp()).selectName(choice);
  }

  function closeHelp(){
    google.script.host.close();
  } 
  </script>

Ни один из подходов не сработал. Диалоговое окно продолжает открываться после того, как я нажимаю кнопку «Отправить».

Я также попробовал подход , описанный здесь , и добавил SuccessHandler к команде кнопки. Диалоговое окно закрылось, НО данные не были записаны на лист.

  <input type = "button" value = "Submit" onclick = "google.script.run.withSuccessHandler(google.script.host.close()).form_data(this.parentNode);google.script.host.editor.focus();" /> 
  <input type = "button" value = "Close" onclick = "google.script.host.close()" />

  <script>
  function form_data() { 
    var choice=document.getElementById('name').value;
    google.script.run.selectName(choice);
  }
  </script>

Вы несовместимы с использованием закрывающих косых черт на <input>, но никакая спецификация HTML вообще не требует их использования, поэтому вам следует их полностью удалить.

— 23.08.2024 21:25

html google-apps-script web-applications google-workspace

23.08.2024 18:50

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Диалог открывается снова, поскольку существует логический цикл.

SelectName открывает диалоговое окно. Непонятно, как эта функция запускается впервые.
Клиентский код запускает функцию selectName. Это приведет к открытию второго диалогового окна.

Решение состоит в том, чтобы использовать две функции: одну для открытия диалогового окна, а другую для запуска из клиентского кода. Убедитесь, что вторая функция не открывает тот же диалог снова.

23.08.2024 19:55

Ответ принят как подходящий

Кнопка «Отправить» закрывает диалоговое окно.

Я согласен с @wicket; Точно так же вы будете отлаживать свой код.

Вот код:

Я пересмотрел код, который вам дали, разделил его на две функции.

Code.gs

function selectName() {
    //Select a name from the list 
    var html = HtmlService.createHtmlOutputFromFile('nameSelector')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setWidth(400)
      .setHeight(200);
    SpreadsheetApp.getUi().showModalDialog(html, 'Select Name:');
};

function updateCell(name){
    //Set the selected value to cell A1
    var ss = SpreadsheetApp.getActiveSpreadsheet();
    ss.getRange("A1").setValue(name);
}

nameSelector.html

 <script>
  function form_data() { 
    var choice = document.getElementById('name').value;
    google.script.run.updateCell(choice);
    google.script.host.close();
  }
  </script>

Для справки вы можете увидеть этот пример скриншота кода:

Code.gs

nameSelector.html

23.08.2024 20:14