OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Problem with apps script web app + materialize autocomplete on dynamic table

  • Thread starter Thread starter Raf
  • Start date Start date
R

Raf

Guest
I have problem with forcing materialize autocomplete to work on dynamic table. It works fine on static element of the table. I am using js document.createElement. Console tells me html looks the same: console.log(tbody) of dynamic element of table

...but like mentioned before, only static element of table shows autocomplete dropdown: working static dropdown:

My code:

*****HTML:

Code:
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <meta charset="utf-8" />
<?!= include("page-css"); ?>
  <script type="text/javascript" src="autosearch.js"></script>  
  </head>
  <body>

        <footer class="page-footer #2196f3 red"> 
           <div class="container">
              <table>
                 <tr>
                 <h3 style="text-align: center; vertical-align: middle;">Requested projects:</h3>

                 </tr>
              </table>
           </div>
        </footer>
  
  
<br>
<br>


<div class="container-fluid" style="width:100%; font-size:13px;  padding:0px; margin:0px;">
    
      <table border = "1" id="tableData" class = "#eeeeee grey lighten-3" style="width:90%; margin: 0px auto; align: center;">
        <thead>

          <tbody>
          <tr>
WORKING STATIC TEST OF AUTOCOMPLETE:
            <td>
              <th>
                      <div class="input-field">
                        <input type="text" id="autocomplete-input" class="autocomplete">
                        <label for="autocomplete-input"></label>
                      </div>
              </th>
            <td>
          </tr>
          </tbody>

          <tr>
              <th>Code</th>
              <th>name</th>
              <th>Please select project:</th>
          </tr>
        </thead>
        <tbody id="table-body">

        </tbody>
      </table>  
    

<?!= include("page-js"); ?>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  </body>
</html>

*****JS:

Code:
<script>

//EVENTS


  //ON LOAD EVENT
  window.addEventListener('load', () => {
  loadingData();
  }); //mozna tez DOMContentLoaded zamiast load


  //DROPDOWN EVENT
  document.addEventListener('DOMContentLoaded', function() {
  //  document.dispatchEvent(new Event('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.autocomplete');
    var instances = M.Autocomplete.init(elems,{
      data:{
        'option 1':null,
        'option 2':null,
        'option 3':null
      }, minLength: 0
    });
  });




//FUNCTIONS

  function loadingData(){
   //just loading rotating thing
  }



  function generateTable(dataArray){
    console.log("generateTable")
    var tbody = document.getElementById("table-body")

    let numb = tbody.childNodes.length;

    for (a = 1; a<numb; a++){
      tbody.removeChild(tbody.firstElementChild);
    }

    dataArray.forEach(function(r){
      var row = document.createElement("tr");

      var col1 = document.createElement("td");
      col1.textContent = r[0];
      row.appendChild(col1);

      var col2 = document.createElement("td");
      col2.textContent = r[1];
      row.appendChild(col2);

      var col3 = document.createElement("td");
      
//not working dynamic autocomplete
      var th = document.createElement("th");
      col3.appendChild(th);
      var div = document.createElement("div");
      div.setAttribute("class", "input-field");
      th.appendChild(div);
      var input = document.createElement("input");
      input.setAttribute("type", "text");
      input.setAttribute("id", "autocomplete-input");
      input.setAttribute("class", "autocomplete");
      div.appendChild(input);
      var label = document.createElement("label");
      label.setAttribute("for", "autocomplete-input");
      input.appendChild(label);

      
      row.appendChild(col3);

      tbody.appendChild(row);

      console.log(tbody)
      const old_tbody = document.getElementById("table-body")


    });   
   
  }

</script>

For sure this is some stupid mistake (propably with event) but I am quite new to web apps and have no clue what am I doing wrong.

I would like dynamic element of table (materialize autocomplete dropdown) to works just like that test static element.

<p>I have problem with forcing materialize autocomplete to work on dynamic table. It works fine on static element of the table. I am using js document.createElement. Console tells me html looks the same:
<a href="https://i.sstatic.net/pZzT3xfg.png" rel="nofollow noreferrer">console.log(tbody) of dynamic element of table</a></p>
<p>...but like mentioned before, only static element of table shows autocomplete dropdown:
<a href="https://i.sstatic.net/TfSzQKJj.png" rel="nofollow noreferrer">working static dropdown:</a></p>
<p>My code:</p>
<p>*****HTML:</p>
<pre><code><!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<meta charset="utf-8" />
<?!= include("page-css"); ?>
<script type="text/javascript" src="autosearch.js"></script>
</head>
<body>

<footer class="page-footer #2196f3 red">
<div class="container">
<table>
<tr>
<h3 style="text-align: center; vertical-align: middle;">Requested projects:</h3>

</tr>
</table>
</div>
</footer>


<br>
<br>


<div class="container-fluid" style="width:100%; font-size:13px; padding:0px; margin:0px;">

<table border = "1" id="tableData" class = "#eeeeee grey lighten-3" style="width:90%; margin: 0px auto; align: center;">
<thead>

<tbody>
<tr>
WORKING STATIC TEST OF AUTOCOMPLETE:
<td>
<th>
<div class="input-field">
<input type="text" id="autocomplete-input" class="autocomplete">
<label for="autocomplete-input"></label>
</div>
</th>
<td>
</tr>
</tbody>

<tr>
<th>Code</th>
<th>name</th>
<th>Please select project:</th>
</tr>
</thead>
<tbody id="table-body">

</tbody>
</table>


<?!= include("page-js"); ?>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
</code></pre>
<p>*****JS:</p>
<pre><code><script>

//EVENTS


//ON LOAD EVENT
window.addEventListener('load', () => {
loadingData();
}); //mozna tez DOMContentLoaded zamiast load


//DROPDOWN EVENT
document.addEventListener('DOMContentLoaded', function() {
// document.dispatchEvent(new Event('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.autocomplete');
var instances = M.Autocomplete.init(elems,{
data:{
'option 1':null,
'option 2':null,
'option 3':null
}, minLength: 0
});
});




//FUNCTIONS

function loadingData(){
//just loading rotating thing
}



function generateTable(dataArray){
console.log("generateTable")
var tbody = document.getElementById("table-body")

let numb = tbody.childNodes.length;

for (a = 1; a<numb; a++){
tbody.removeChild(tbody.firstElementChild);
}

dataArray.forEach(function(r){
var row = document.createElement("tr");

var col1 = document.createElement("td");
col1.textContent = r[0];
row.appendChild(col1);

var col2 = document.createElement("td");
col2.textContent = r[1];
row.appendChild(col2);

var col3 = document.createElement("td");

//not working dynamic autocomplete
var th = document.createElement("th");
col3.appendChild(th);
var div = document.createElement("div");
div.setAttribute("class", "input-field");
th.appendChild(div);
var input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("id", "autocomplete-input");
input.setAttribute("class", "autocomplete");
div.appendChild(input);
var label = document.createElement("label");
label.setAttribute("for", "autocomplete-input");
input.appendChild(label);


row.appendChild(col3);

tbody.appendChild(row);

console.log(tbody)
const old_tbody = document.getElementById("table-body")


});

}

</script>
</code></pre>
<p>For sure this is some stupid mistake (propably with event) but I am quite new to web apps and have no clue what am I doing wrong.</p>
<p>I would like dynamic element of table (materialize autocomplete dropdown) to works just like that test static element.</p>
 

Latest posts

Top