Веб-приложение Google - создайте еще один html из файла html по умолчанию и перенесите значение из html по умолчанию в новый html. - PullRequest
Новая
       2

Веб-приложение Google - создайте еще один html из файла html по умолчанию и перенесите значение из html по умолчанию в новый html.

0 голосов
/ 18 июня 2020

Мне нужно попросить пользователя выбрать значение, и после этого я хочу создать новую html страницу, на которой будет отображаться выбранное значение.

Шаг 1: приложение создает список значений и пользователю необходимо выбрать значение (я знаю, как это сделать, и я использовал упрощенную версию для этого теста)

Шаг 2: как только пользователь щелкает значение, создается новый файл html и выбранное значение появится в виде текста (я не знаю, как это сделать)

По умолчанию html файл выглядит следующим образом (например, html): 

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <p style="text-align: center;">Test - Step 1</p>
<p style="text-align: center;">&nbsp;</p>

<p style="text-align: center;"><select id="sel1" style="width: 230px; height: 35px; margin: 0px 0 0px 0;">
<option selected="selected" value="">email</option>
</select></p>

<script>

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("sel1").addEventListener("click",listS);

function yourCallBack() {

}
</script>


  </body>
</html>

The js файл: 

function doGet() {

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

}

function yourServerSideFunc(body) {
  var value = body["value"];
 var output = HtmlService.createHtmlOutputFromFile('f2');
  return output;
  return ContentService.createTextOutput(JSON.stringify({message: "ok"})).setMimeType(ContentService.MimeType.JSON);
}

Новый html файл (f2): 

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <p id="test"style="text-align: center;">Your value is</p>
<p style="text-align: center;">&nbsp;</p>
  </body>
</html>

Как только я смогу сгенерировать новый html, мне нужно будет изменить текст на: "Ваше значение:" + значение. Однако я даже не могу сгенерировать f2. html. Как я могу это сделать?

1 Ответ

1 голос
/ 18 июня 2020

Несколько точек:

  • Вам нужно значение , иначе значение пустое.

  • Ваш yourServerSideFunc(body) имеет два возвращаемых значения, очевидно, что второе не выполняется.

  • Если вы хотите перенаправить пользователя на другую страницу, сделайте это путем перенаправления. Но если вы хотите обновить содержимое в base html, вы можете использовать атрибут стиля элемента HTML, чтобы скрыть или показать элементы.

  • Вы также можете реализовать некоторые условные выражения в своем doGet(e) и отображать различный контент в зависимости от параметра или его набора. Это приведет к другому HTML по тому же URL-адресу.

Например:

1 - Пользователь посещает ваше веб-приложение, поэтому doGet() - выполнено.

2- Пользователь выбирает параметр из раскрывающегося списка, поэтому браузер прослушивает событие щелчка и выполняет listS().

3- listS() передает выбранное пользователем значение в yourServerSideFunc который возвращает HTML содержимое в обратный вызов showDiv.

4- showDiv выполняется и содержимое HTML обновляется.

Code.gs 

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

function yourServerSideFunc(body) {
  console.log(body);
  var value = body["value"];
  var output = HtmlService.createTemplateFromFile('f2');
  output.value = value;
  return output.evaluate().getContent();
}

ф. html

<!DOCTYPE html>
<html>

<head>
    <base target="_top">
</head>

<body>
    <p style="text-align: center;">Test - Step 1</p>
    <p style="text-align: center;">&nbsp;</p>
    <select id="sel1" style="width: 230px; height: 35px; margin: 0px 0 0px 0;">
        <option selected="selected" value="email">email</option>
    </select>
    <div id="resultDiv" style="display: None;"></div>
    <script>
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(showDiv).yourServerSideFunc(body);
    }
}

function showDiv(value) {
    var resultDiv = document.getElementById("resultDiv");
    resultDiv.innerHTML = value;
    resultDiv.style.display = "Block";
}
document.getElementById("sel1").addEventListener("click", listS);
    </script>
</body>

</html>

f2. html

<p id="test"style="text-align: center;">Your value is</p>
<p style="text-align: center;"><?= value ?></p>

Дополнительная литература:

Шаблон сценария приложений HTML

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...