Search code examples
javascriptgoogle-apps-scriptweb-applications

How Display The Data on Page Load

I've been working on the Search CRUD using Google WebApp Script via watching a YouTube tutorial, I'm almost done but I'm stuck in a place I couldn't figure out to sort the issue.

I want to load the search field and the data on first page load. but based on this code I need to click on the Search Tab and then get the search field to find the data. How do I get rid of the Search Tab and get straight into the search bar and data.

On Page load enter image description here

Second Occurrence (After the Click) enter image description here

My code

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
　　　
   <style>
   .nav-link {
   cursor: pointer;
   }
   </style>

  </head>
  <body>
    
    <div class="container">
    
    <ul class="nav nav-tabs">
  
  <li class="nav-item">
    <div class="nav-link"id="search-link">Search</div>
  </li>

</ul>

     <div id="app"></div>    
  <!-- Content here -->
</div>

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

    
  <script>
  
  var data;
  
  function loadView(options){
var id = typeof options.id === "undefined" ? "app" : options.id;
var cb = typeof options.callback === "undefined" ? function(){} : options.callback;

google.script.run.withSuccessHandler(function(html){
document.getElementById("app").innerHTML = html;
typeof options.params === "undefined" ? cb() : cb(options.params);
})[options.func]();
}

function setDataForSearch(){
google.script.run.withSuccessHandler(function(dataReturned){
data = dataReturned.slice();
}).getDataForSearch();
}

function search(){

var searchinput = document.getElementById("searchinput").value.toString().toLowerCase().trim();
var searchWords = searchinput.split(/\s+/);
var searchColumns = [0,1,2,3,4,5,6,7];

// and or

var resultsArray = data.filter(function(r){

return searchWords.every(function(word){
return searchColumns.some(function(colIndex){
return r[colIndex].toString().toLowerCase().indexOf(word) !== -1
});

});

});
var searchResultsBox = document.getElementById("searchResults");
var templateBox = document.getElementById("rowTemplate");
var template = templateBox.content;

searchResultsBox.innerHTML = "";

resultsArray.forEach(function(r){

var tr = template.cloneNode(true);
var hinmokuColumn = tr.querySelector(".hinmoku");
var buhinCodeuColumn = tr.querySelector(".buhinCode");
var buhinNameColumn = tr.querySelector(".buhinName");
var hitsuyoColumn = tr.querySelector(".hitsuyo");
var genkaColumn = tr.querySelector(".genka");
var kobaiColumn = tr.querySelector(".kobai");
var sagakuColumn = tr.querySelector(".sagaku");
var kenshoColumn = tr.querySelector(".kensho");

hinmokuColumn.textContent = r[0];
buhinCodeuColumn.textContent = r[1];
buhinNameColumn.textContent = r[2];
hitsuyoColumn.textContent = r[3];
genkaColumn.textContent = r[4];
kobaiColumn.textContent = r[5];
sagakuColumn.textContent = r[6];
kenshoColumn.textContent = r[7];

searchResultsBox.appendChild(tr);

});
}

function loadSearchView(){
loadView({func:"loadSearchView", callback: setDataForSearch});
}


document.getElementById("search-link").addEventListener("click",loadSearchView);


function inputEventHandler(e){
if (e.target.matches("#searchinput")){
  search();
}
}
document.getElementById("app").addEventListener("input",inputEventHandler);
    
    </script>
    
  </body>
</html>

Server Side Code

function getDataForSearch(){
    
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const ws = ss.getSheetByName("Array");
  
  return ws.getRange(2, 1, ws.getLastRow(),8).getValues();

}

I need to type letters in order to data display. Screen Shot 3 enter image description here

Solution

  • Issue:

    • There are some actions that are currently happening when the Search tab is clicked.
    • You want these actions to happen when the page loads.

    Solution:

    In the HTML you provided, there's a click event listener attached to the Search tab you mention (id="search-link"):

    document.getElementById("search-link").addEventListener("click",loadSearchView);

    This means the function loadSearchView is gonna execute when the Search tab is clicked.

    If I understand you correctly, you want loadSearchView to execute when the page loads. In that case, you could just add the following event listener:

    window.addEventListener("load", loadSearchView);

    Notes:

    • Since you didn't provide server-side code, I cannot know whether loadSearchView will do what you intend it to do. This solution just makes sure loadSearchView is executed when the page loads.
    • If you want to get rid of the Search tab, just remove it from your HTML (<div class="nav-link"id="search-link">Search</div> and its container elements).

    Reference: