Saya perlu meminta pengguna untuk memilih nilai dan setelah itu saya ingin membuat halaman html baru yang akan menampilkan nilai yang dipilih.

Langkah1: aplikasi menghasilkan daftar nilai dan pengguna harus memilih nilai (saya tahu cara melakukannya dan saya menggunakan versi yang disederhanakan untuk pengujian ini)

Langkah2: Setelah pengguna mengklik nilainya, file html baru dibuat dan nilai yang dipilih akan muncul sebagai teks (saya tidak tahu bagaimana melakukannya)

File html default adalah sebagai berikut (f.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>

File jsnya adalah:

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);
}

File html baru (f2) adalah:

<!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>

Setelah saya dapat membuat html baru, saya perlu mengubah teks menjadi: "Nilai Anda adalah: "+nilai. Namun saya bahkan tidak dapat menghasilkan f2.html. Bagaimana saya bisa melakukannya?

0
Filippo 18 Juni 2020, 01:22

1 menjawab

Jawaban Terbaik

Beberapa poin:

  • Anda memerlukan nilai, jika tidak, nilai kosong.

  • yourServerSideFunc(body) Anda memiliki dua nilai kembalian, jelas yang kedua tidak dieksekusi.

  • Jika Anda ingin mengarahkan pengguna ke halaman lain, lakukan dengan mengarahkan ulang. Tetapi jika Anda ingin memperbarui konten di html dasar maka Anda dapat menggunakan atribut gaya elemen HTML untuk menyembunyikan atau menampilkan elemen.

  • Anda juga dapat menerapkan beberapa persyaratan ke doGet(e) dan merender konten yang berbeda bergantung pada parameter atau kumpulannya. Ini akan menghasilkan HTML yang berbeda pada URL yang sama.

Sebagai contoh:

1- Pengguna mengunjungi aplikasi web Anda, jadi doGet() dijalankan.

2- Pengguna memilih opsi dari tarik-turun, sehingga browser mendengarkan acara klik dan menjalankan listS().

3- listS() meneruskan nilai yang dipilih pengguna ke yourServerSideFunc yang mengembalikan konten HTML ke callback showDiv.

4- showDiv dijalankan dan konten HTML diperbarui.


Kode.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();
}

F.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>

Bacaan lebih lanjut:

HTML Template Skrip Aplikasi

1
Aerials 30 Juni 2020, 10:55