ExportTableToCSV every "defined time" automatically - html

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

Answer 1

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>