Fail to initialize when changing inner html (google app script)

Question

(original question)

I'm now trying to develop a web app through App Script using Materialize layout and components.

As I wanted to create a nav-bar that contains different page buttons (which should change the body part of the site), I found the elements within each site are not working well. I tried to create routes of sites using doGet(e) and some if-else arguments, which works just fine, but that renders a whole new page instead of keeping the nav-bar above still. I'm wondering if there's a way to do so... (I'm guessing it's the way I change innerHTML being wrong.)

As for now, the main page shows normal. However, when I click the "A" button on the nav-bar (and it shows a date picker below), it's now popping a picker as it supposed to.

(0327 Update)

I'm sorry for any misleading of my question. I tried to simplify my question below with the updated code that contains only my situations here.

The page below is a mainPage that contains a "datePicker1" element, and when I click the "Page A" button above, a new "datePicker2" is written into the DOM content. However, "dP1" works well, which pops its calendar as it supposed to, but "dP2" is not. :(

(P.S. I think I was not clear enough: for the "nav-bar" mentioned before, I was hoping it works as a header in an HTML.)

Here's my code (updated):

(mainPage.html)

<!DOCTYPE html>
<html language="en">
  <head>
    <base target="_top">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" >
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>
    
  <body>
    <!-- navbar -->
    <header>
      <div class="navbar-fixed">
        <nav>
          <div class="nav-wrapper teal darken-4">
            <div class="row">
              <div class="col s10 offset-s1">
                <div class="brand-logo">Logo</div>
                <ul id="nav-mobile" class="right hide-on-med-and-down">
                  <li><a onClick="pageSelect(0);">Page A</a></li>
                  <li><a onClick="pageSelect(1);">Page B</a></li>
                  <li><a onClick="pageSelect(2);">Page C</a></li>
                </ul>
              </div>
            </div>
          </div>
        </nav>
      </div>
    </header>
    
    <section>
      <div class="container">
        Dateinput 1:
        <div class="input-field">
          <label for="dateinput1">Dateinput 1</label>
          <input id="dateinput1" type="text" class="datepicker">
        </div><br>
        Dateinput2:
        <div id="pageContent">
        </div>
      </div>
    </section>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script> 
    <script>
      $(document).ready(function(){
        $('.datepicker').datepicker();
      });
    </script>
    <script>
      function changeContent(content){
        document.getElementById("pageContent").innerHTML = content;
      }
      function pageSelect(index){
        google.script.run.withSuccessHandler(changeContent).getPage(index);
      }
    </script>
  </body>
</html>

(pageA.html)

<div class="input-field">
  <label for="dateinput2">Dateinput 2</label>
  <input id="dateinput2" type="text" class="datepicker">
</div>

(backend.gs)

var mainPage = HtmlService.createTemplateFromFile("mainPage");

function doGet() {
  return mainPage.evaluate()
  .setTitle("mainPage")
  .setSandboxMode(HtmlService.SandboxMode.IFRAME)
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

function getPage(index){
  let pageName;
  switch(index){
    case 0: pageName = "pageA"; break;
    case 1: pageName = "pageB"; break;
    case 2: pageName = "pageC"; break;
  }
  return HtmlService.createHtmlOutputFromFile(pageName).getContent();
}

I've tried to solve this on my own and been searching, still not getting any further... Hope I'm making myself clear, thanks a lot!

@YvesC - Could you attach screenshot of `that renders a whole new page instead of keeping the nav-bar above still.`? I tried to replicate your code and nav-bar is working just fine. — Nikko J., Mar 26 '21 at 21:11
@Cooper, thanks for the reference. I think that I was not that clear before. I wanted to use the `
` as a header that keeps on top of the page, as the updated code shows. — YvesC, Mar 27 '21 at 07:21
@NikkoJ. Thanks for your checking, I updated my question and code above, please check them out. Thx a lot :) — YvesC, Mar 27 '21 at 07:22
Ok well it looks like you already have that so what's the question? — Cooper, Mar 27 '21 at 14:21

score 1 · Answer 1 · answered Mar 29 '21 at 18:27

If you check the elements of your web app to your browser, you can see in dateinput1 that there is appended modal and the injected date picker(dateinput2) does not have. During the build process, if the materialize.js found a datepicker class in your html, it will append the datepicker-modal class that shows the date picker when the text box is clicked.

But since your script injected the dateinput2 after the build process, it wont get the datepicker-modal. This causes your script not to show the datepicker.

Alternative solution is include the dateinput2 in your main html file and use the style property display to hide and show the date picker box. By this, we can ensure that the dateinput2 has modal for showing the datepicker.

Reference:

Style display Property

Fail to initialize when changing inner html (google app script)

1 Answers1

Reference: