intell

intell

intellintell Posts: 6Questions: 2Answers: 0
edited August 2021 in Web-site

Description of problem:
Layman here taking the first attempt at programing. Following code on apps script pulls raws from google sheet query fine the first time but does not refresh on later attempts. I disabled DataTables internal search and created a search linked to a query in google sheets that automatically updates every time the search input is entered or the button beside it is clicked. The DataTable populates correctly at first attempt but does not reload on later ones.
I tried to paste ajax.reload(); and: table.rows({selected:true}).remove(); table.rows.add( jsonData ).draw( false ); at all possible places in the code. Did not get the required refresh. (I even tried table.destroy(); and table.clear(). Now quite despirate and do not want to give up on this handy plug-in. Any help is appreciated. Kindly be specific what to include in the below code and exactly where. Thanks in advance.

Debugger code (debug.datatables.net):

<script>
  document.getElementById("btn").addEventListener("click",appendGS);

  var input = document.getElementById("searchRqst");
  input.addEventListener("keyup", function(event) {
    if (event.keyCode === 13) {
      document.getElementById("btn").click();
    }
  });

  function appendGS(){
    input = document.getElementById("searchRqst").value
    google.script.run.withSuccessHandler(showData).getData();
    document.getElementById("AppndTrigger").innerHTML = "Searched for: " + input;
    document.getElementById("searchRqst").value = "";
    /*
    *CALL THE getData() FUNCTION IN THE Code.gs FILE, 
    *AND PASS RETURNED DATA TO showData() FUNCTION
    */
    google.script.run.userClicked(input);
  }

  //THIS FUNCTION GENERATE THE DATA TABLE FROM THE DATA ARRAY
  function showData(dataArray){
    $(document).ready(function(){
      $('#data-table').DataTable({
        data: dataArray,
        //CHANGE THE TABLE HEADINGS BELOW TO MATCH WITH YOUR SELECTED DATA RANGE
        columns: [
          {"title":"Meaning", "width": "40%", "class": "text-right"},
          {"title":"Arabic", "width": "8%", "class": "text-right"},
          {"title":"English", "width": "8%", "class": "text-left"},
          {"title":"French", "width": "8%", "class": "text-left"},
          {"title":"German", "width": "7%", "class": "text-left"},
          {"title":"Greek", "width": "7%", "class": "text-left"},
          {"title":"Latin", "width": "7%", "class": "text-left"},
          {"title":"Reference", "width": "15%", "class": "text-right"}
        ]
      });
    });
  }
</script>

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

This question has an accepted answers - jump to answer

Answers

  • intellintell Posts: 6Questions: 2Answers: 0

    The code:


    document.getElementById("btn").addEventListener("click",appendGS); var input = document.getElementById("searchRqst"); input.addEventListener("keyup", function(event) { if (event.keyCode === 13) { document.getElementById("btn").click(); } }); function appendGS(){ input = document.getElementById("searchRqst").value google.script.run.withSuccessHandler(showData).getData(); document.getElementById("AppndTrigger").innerHTML = "Searched for: " + input; document.getElementById("searchRqst").value = ""; /* *CALL THE getData() FUNCTION IN THE Code.gs FILE, *AND PASS RETURNED DATA TO showData() FUNCTION */ google.script.run.userClicked(input); } //THIS FUNCTION GENERATE THE DATA TABLE FROM THE DATA ARRAY function showData(dataArray){ $(document).ready(function(){ $('#data-table').DataTable({ data: dataArray, //CHANGE THE TABLE HEADINGS BELOW TO MATCH WITH YOUR SELECTED DATA RANGE columns: [ {"title":"Meaning", "width": "40%", "class": "text-right"}, {"title":"Arabic", "width": "8%", "class": "text-right"}, {"title":"English", "width": "8%", "class": "text-left"}, {"title":"French", "width": "8%", "class": "text-left"}, {"title":"German", "width": "7%", "class": "text-left"}, {"title":"Greek", "width": "7%", "class": "text-left"}, {"title":"Latin", "width": "7%", "class": "text-left"}, {"title":"Reference", "width": "15%", "class": "text-right"} ] }); }); }
  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    I disabled DataTables internal search and created a search linked to a query in google sheets that automatically updates every time the search input is entered or the button beside it is clicked. The DataTable populates correctly at first attempt but does not reload on later ones.

    As you said, you'll need to delete all the rows (rows().remove()), and re-add (rows.add()) with your data value. -ajax.reload() won't work - as the data wasn't initially loaded via Ajax.

    If that's not working, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • intellintell Posts: 6Questions: 2Answers: 0

    Thank you Colin for your reply.
    1. Where exactly in the above code should I put the raws remove function:
    var table = $('#data-table').DataTable();
    var rows = table.rows().remove().draw();
    2. Should not code in lines #23 onwards suffice for raw add?
    3. Since my code is on apps script linked to a Google Sheet. It did not work on the test case format. However, the below link shows you how it is working first time only (linked to sample data. To try it out, you can search for "belief", "beg", being":
    https://www.falasefah.com/%D9%85%D8%B9%D8%AC%D9%852
    4. Full HTML with the script at the end below (not including Code.gs):

    <!DOCTYPE html>
    <html>
      <head>
        <base target="_top">
    
        <!--INCLUDE REQUIRED EXTERNAL JAVASCRIPT AND CSS LIBRARIES-->
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
      rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    
      <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
      <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
      <script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script>
      <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css">
    
    
      </head>
      <body>
        <div class="container">
          <div class="vertical-center">
            <input type="text" id = "searchRqst" autofocus placeholder="Search ...">
            <button id="btn">Search</button>
            <Div><p id="AppndTrigger"></p></Div>
          </div>
        </div>
    
        <?!= include('JavaScript'); ?><!--Added below-->
    
        <div>
    
          <style class="FrontEndStyle">  
            th{
              text-align: center;
            }
            td {
            font-size: 80%;
            text-align: center;        
            }
          
            .dataTables_filter { 
            display: none;
            }
          </style>
    
          <div class="container" id="result">
          <br>
            <div class="row">
              <table   id="data-table" class="table table-striped table-sm table-hover table-bordered FrontEndStyle">
                <!-- TABLE DATA IS ADDED BY THE showData() JAVASCRIPT FUNCTION ABOVE -->
              </table>
            </div>
          </div>
        </div>
    </body>
    
    </html>
    <script>
      document.getElementById("btn").addEventListener("click",appendGS);
    
      var input = document.getElementById("searchRqst");
      input.addEventListener("keyup", function(event) {
        if (event.keyCode === 13) {
          document.getElementById("btn").click();
        }
      });
    
      function appendGS(){
        input = document.getElementById("searchRqst").value
        google.script.run.withSuccessHandler(showData).getData();
        document.getElementById("AppndTrigger").innerHTML = "Searched for: " + input;
        document.getElementById("searchRqst").value = "";
        /*
        *CALL THE getData() FUNCTION IN THE Code.gs FILE, 
        *AND PASS RETURNED DATA TO showData() FUNCTION
        */
        google.script.run.userClicked(input);
      }
    
      //THIS FUNCTION GENERATE THE DATA TABLE FROM THE DATA ARRAY
      function showData(dataArray){
        $(document).ready(function(){
          $('#data-table').DataTable({
            data: dataArray,
            //CHANGE THE TABLE HEADINGS BELOW TO MATCH WITH YOUR SELECTED DATA RANGE
            columns: [
              {"title":"Meaning", "width": "40%", "class": "text-right"},
              {"title":"Arabic", "width": "8%", "class": "text-right"},
              {"title":"English", "width": "8%", "class": "text-left"},
              {"title":"French", "width": "8%", "class": "text-left"},
              {"title":"German", "width": "7%", "class": "text-left"},
              {"title":"Greek", "width": "7%", "class": "text-left"},
              {"title":"Latin", "width": "7%", "class": "text-left"},
              {"title":"Reference", "width": "15%", "class": "text-right"}
            ]
          });
        });
      }
    </script>
    
    
  • colincolin Posts: 15,118Questions: 1Answers: 2,583
    Answer ✓

    It looks like to me like showData() isn't being called - I found it hard debugging that app.

    It would be worth adding debug in showData() just to verify if it is being called. You could also use destroy in the DataTables initialisation to destroy the existing table and data.

    Colin

  • intellintell Posts: 6Questions: 2Answers: 0

    Thank you Colin and sorry to have troubled you with this. Have a great day.

Sign In or Register to comment.