{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 男人必须洒脱 的问题《Papaparse/vfile doesnt work- Garbled output》','https://www.manongdao.com/q-1133164.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I posted a question regarding parsing large csv files Jquery crashes while parsing large csv file. It involves reading a csv file and tablifying it. I tried using the code given in one of the responses but it doesn't work..
Here's my entire code:
<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="PapaParse-4.1.0/papaparse.js"></script>
<script src="virtual-list-master/vlist.js"></script>
<script>
$("#fUpload").bind("change", function(evt) {
var bigFile = evt.target.files[0];
var rows = [];
Papa.parse(bigFile, {
delimiter: ",",
newline: "\n",
header: false,
dynamicTyping: false,
worker: false,
chunk: function(results) {
rows = rows.concat(results.data);
},
complete: function() {
var list = new VirtualList({
h: 300,
itemHeight: 30,
totalRows: rows.length - 1,
generatorFn: function(row) {
var el = document.createElement("tr");
var html = '';
html += '<td>' + row + '</td>';
for(var j = 0; j < rows[row].length; j++) {
html += '<td>' + rows[row][j] + '</td>';
}
el.innerHTML = html;
return el;
}
});
document.getElementById('table').appendChild(list.container)
}
});
});
</script>
<input type="file" id="fUpload" />
<table style="width: 100%">
<tbody id="table">
</tbody>
</table>
I have Papaparse-4.1.0 and virtual-list-master folders within my current working directory. But when I open this in a browser and upload a csv file, no table is printed below. There seems to be no defects in the upload function since the answerer showed a fiddle demo of the same; I'm just reusing it here. You can see the fiddle here:http://jsfiddle.net/8e99j5v9/5/
Can someone please tell me why my code doesn't work?
EDIT
I thank Sergiu for proposing a working solution but the resultant table that is delivered is thoroughly garbled.. Rows and columns are overlapping like this
Can someone help?
JavaScript code is interpreted/executed in the order it appears in the HTML structure. It will also only "have access" to HTML before it. So
$("#fUpload")will try and find an element with id#fUploadinbody, but taking into account what I said before (the order in which stuff is "loaded/executed") it won't find anything, because<input type="file" id="fUpload" />is after thisscripttag.Solutions: 1) Move the
<script>tags in aheadsectionand the input and table in abodysection and move the$("#fUpload").bind(...code in a$(document).ready` callback. (Read about it here)2) Move the input and table above the script tags.
Why will 1 work? Because of
$(document).ready(.... This tells the code inside of it to execute after the whole HTML (including the input) was loaded.