ExportTableToCSV every "defined time" automatically

Question

I am modifying the following script from here

I am now able to export this table :

 <div class='container'>
      <div id="dvData">
        <table>
          <tr>
            <th>Column One</th>
            <th>Column Two</th>
            <th>Column Three</th>
          </tr>
          <tr>
            <td>Row 1 Col 1</td>
            <td>Row 1 Col 2</td>
            <td>Row 1 Col 3 </td>
          </tr>
          <tr>
            <td>Row 2 Col 1</td>
            <td>Row 2 Col 2</td>
            <td>Row 2 Col 3</td>
          </tr>
          <tr>
            <td>Row 3 Col 1</td>
            <td>Row 3 Col 2</td>
            <td>Row 3 Col 3</td>
          </tr>
        </table>
      </div>

by clicking this button :

      <div class='button'>
        <a href="#" id="export" role='button'>Click On This Here Link To Export The Table Data into a CSV File
        </a>
      </div>

If above button is clicked, it will run this script:


          $("#export").click(function(event) {
            var outputFile = '0-test.txt';
            exportTableToCSV.apply(this, [$('#dvData>table'), outputFile]);
          });
        });

And it worked.

Now the aim is to have this table exported and saved/downloaded (without dialog box) every certain defined time/period. In the following script I define every 5 second.

  function save() {
          $('#export').trigger('click');
        }
        setInterval(save, 5000);

However the

$('#export').trigger('click');

has no response. Please advise.

complete code

score 1 · Accepted Answer · answered Jan 15 '23 at 10:56

This should work. Instead of triggering the JQuery's click method, you can just use Javascript's click selecting the DOM element using [0].

(see also: How to trigger click event on href element)

$(document).ready(function() {
  function exportTableToCSV($table, filename) {
    var $headers = $table.find('tr:has(th)'),
      $rows = $table.find('tr:has(td)'),
      tmpColDelim = String.fromCharCode(11), // vertical tab character
      tmpRowDelim = String.fromCharCode(0), // null character
      colDelim = ';',
      rowDelim = '\r\n';
    var csv = '';
    //csv += formatRows($headers.map(grabRow));
    csv += formatRows($rows.map(grabRow)) + '';
    csv += rowDelim;

    var csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
    $(this)
      .attr({
        'download': filename,
        'href': csvData
        //,'target' : '_blank' //if you want it to open in a new window
      });
    //------------------------------------------------------------
    // Helper Functions 
    //------------------------------------------------------------
    // Format the output so it has the appropriate delimiters
    function formatRows(rows) {
      return rows.get().join(tmpRowDelim)
        .split(tmpRowDelim).join(rowDelim)
        .split(tmpColDelim).join(colDelim);
    }
    // Grab and format a row from the table
    function grabRow(i, row) {
      var $row = $(row);
      //for some reason $cols = $row.find('td') || $row.find('th') won't work...
      var $cols = $row.find('td');
      if (!$cols.length) $cols = $row.find('th');
      return $cols.map(grabCol)
        .get().join(tmpColDelim);
    }
    // Grab and format a column from the table 
    function grabCol(j, col) {
      var $col = $(col),
        $text = $col.text();
      return $text.replace('"', '""'); // escape double quotes
    }
  }


  $("#export").click(function(event) {
    var outputFile = '0-test.txt';
    console.log("clicked");
    exportTableToCSV.apply(this, [$('#dvData>table'), outputFile]);
  });
});

function save() {
  $('#export')[0].click();
}

setInterval(save, 5000);

body {
  font-family: sans-serif;
  font-weight: 300;
  padding-top: 30px;
  color: #666;
}

.container {
  text-align: center;
}

a {
  color: #1C2045;
  font-weight: 350;
}

table {
  font-weight: 300;
  margin: 0px auto;
  border: 1px solid #1C2045;
  padding: 5px;
  color: #666;
}

th,
td {
  border-bottom: 1px solid #dddddd;
  text-align: center;
  margin: 10px;
  padding: 0 10px;
}

hr {
  border: 0;
  border-top: 1px solid #E7C254;
  margin: 20px auto;
  width: 50%;
}

.button {
  background-color: #1C2045;
  color: #E7C254;
  padding: 5px 20px;
  max-width: 300px;
  line-height: 1.5em;
  text-align: center;
  margin: 5px auto;
}

.button a {
  color: #E7C254;
}

.refs {
  display: block;
  margin: auto;
  text-align: left;
  max-width: 500px;
}

.refs .label {
  font-size: 1.4em;
}

.refs>ul {
  margin-top: 10px;
  line-height: 1.5em;
}

<script src="https://github.com/caike/jQuery-Simple-Timer/blob/master/jquery.simple.timer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="jquery-script-menu">
  <div class="container">
    <div class="timer timer2 alert alert-primary" data-minutes-left="0.1"></div>
  </div>
</div>

<div class='container'>
  <div id="dvData">
    <table>
      <tr>
        <th>Column One</th>
        <th>Column Two</th>
        <th>Column Three</th>
      </tr>
      <tr>
        <td>Row 1 Col 1</td>
        <td>Row 1 Col 2</td>
        <td>Row 1 Col 3 </td>
      </tr>
      <tr>
        <td>Row 2 Col 1</td>
        <td>Row 2 Col 2</td>
        <td>Row 2 Col 3</td>
      </tr>
      <tr>
        <td>Row 3 Col 1</td>
        <td>Row 3 Col 2</td>
        <td>Row 3 Col 3</td>
      </tr>
    </table>
  </div>
  <br />
  <div class='button'>
    <a href="#" id="export" role='button'>Click On This Here Link To Export The Table Data into a CSV File
        </a>
  </div>



</div>

ExportTableToCSV every "defined time" automatically

1 Answers1