title: Refresh HTML Data Table from csv file
body: <p>I need help pls...</p>
  
  <p>I have build a webpage with navbar menus. Well all menus are linked with different pages.
  Question - have a data csv file and I need to update the data in html table using javascript. It works on local server ; however, once I do edit the csv file and refresh the web-page the table contents won't update automatically.</p>
  
  <p>Pls help.
      
      </p>
  
  <pre><code>&lt;head&gt;
  &lt;!-- Meta, title, CSS, favicons, etc. --&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta http-equiv="refresh" content="60"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="icon" href="favicon.ico" type="image/ico" /&gt;
  
  &lt;title&gt;RTA | WFM &lt;/title&gt;
  
  &lt;link href="vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"&gt;
  &lt;link href="vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet"&gt;
  &lt;link href="css/dataTables.bootstrap.css" rel="stylesheet"&gt;
  &lt;link href="vendors/nprogress/nprogress.css" rel="stylesheet"&gt;
  &lt;link href="vendors/iCheck/skins/flat/green.css" rel="stylesheet"&gt;
  &lt;link href="vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet"&gt;
  &lt;link href="vendors/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/&gt;
  &lt;link href="vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet"&gt;
  &lt;link href="build/css/custom.min.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  
  &lt;body class="nav-md"&gt;
  &lt;div class="container body"&gt;
  &lt;div class="main_container"&gt;
  &lt;div class="col-md-3 left_col"&gt;
  &lt;div class="left_col scroll-view"&gt;
  &lt;div class="navbar nav_title" style="border: 0;"&gt;
  &lt;a href="index.html" class="site_title"&gt;&lt;i class="fa fa-paw"&gt;&lt;/i&gt; &lt;span&gt;WFM | RTA&lt;/span&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="clearfix"&gt;&lt;/div&gt;
  &lt;br /&gt;
  &lt;!-- sidebar menu --&gt;
  &lt;div id="sidebar-menu" class="main_menu_side hidden-print main_menu"&gt;
  &lt;div class="menu_section"&gt;
  &lt;h3&gt;General&lt;/h3&gt;
  &lt;ul class="nav side-menu"&gt;
  &lt;li&gt;&lt;a&gt;&lt;i class="fa fa-home"&gt;&lt;/i&gt; Home &lt;span class="fa fa-chevron-down"&gt;&lt;/span&gt;&lt;/a&gt;
  &lt;ul class="nav child_menu"&gt;
  &lt;li&gt;&lt;a href="Non-Adherence.html"&gt;Non-Adherence&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="Planned Vs Actual.html"&gt;Planned Vs Actual Count&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="Zone Summary.html"&gt;Zone Summary&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="Shift Wise Absenteeism.html"&gt;Shift Wise Absenteeism&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a&gt;&lt;i class="fa fa-list-alt"&gt;&lt;/i&gt; Roster &lt;span class="fa fa-chevron-down"&gt;&lt;/span&gt;&lt;/a&gt;
  &lt;ul class="nav child_menu"&gt; 
  &lt;li&gt;&lt;a href="Current Roster.html"&gt;Current Roster&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="Next Roster.html"&gt;Next Adherence&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a&gt;&lt;i class="fa fa-edit"&gt;&lt;/i&gt; Forms &lt;span class="fa fa-chevron-down"&gt;&lt;/span&gt;&lt;/a&gt;
  &lt;ul class="nav child_menu"&gt;
  &lt;li&gt;&lt;a href="javascript:void(0)"&gt; LE Disconnection &lt;span class="label label-success pull-right"&gt;Coming Soon&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="javascript:void(0)"&gt; Body Swap &lt;span class="label label-success pull-right"&gt;Coming Soon&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a&gt;&lt;i class="fa fa-bar-chart-o"&gt;&lt;/i&gt; Data Presentation &lt;span class="fa fa-chevron-down"&gt;&lt;/span&gt;&lt;/a&gt;
  &lt;ul class="nav child_menu"&gt;
  &lt;li&gt;&lt;a href="chartjs.html"&gt;Chart JS&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="chartjs2.html"&gt;Chart JS2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="morisjs.html"&gt;Moris JS&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="echarts.html"&gt;ECharts&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="other_charts.html"&gt;Other Charts&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- /sidebar menu --&gt;
  &lt;!-- /menu footer buttons --&gt;
  &lt;div class="sidebar-footer hidden-small"&gt;
  &lt;a data-toggle="tooltip" data-placement="top" title="Settings"&gt;
  &lt;span class="glyphicon glyphicon-cog" aria-hidden="true"&gt;&lt;/span&gt;
  &lt;/a&gt;
  &lt;a data-toggle="tooltip" data-placement="top" title="FullScreen"&gt;
  &lt;span class="glyphicon glyphicon-fullscreen" aria-hidden="true"&gt;&lt;/span&gt;
  &lt;/a&gt;
  &lt;a data-toggle="tooltip" data-placement="top" title="Lock"&gt;
  &lt;span class="glyphicon glyphicon-eye-close" aria-hidden="true"&gt;&lt;/span&gt;
  &lt;/a&gt;
  &lt;a data-toggle="tooltip" data-placement="top" title="Logout" href="login.html"&gt;
  &lt;span class="glyphicon glyphicon-off" aria-hidden="true"&gt;&lt;/span&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  &lt;!-- /menu footer buttons --&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- page content --&gt;
  &lt;div class="right_col" role="main"&gt;
  &lt;!-- top tiles --&gt;
  &lt;div class="row tile_count"&gt;
  &lt;div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count"&gt;
  &lt;span class="count_top"&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt; Pay Monthly&lt;/span&gt;
  &lt;div class="count"&gt;2500&lt;/div&gt;
  &lt;span class="count_bottom"&gt;&lt;i class="green"&gt;4% &lt;/i&gt; From last Week&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count"&gt;
  &lt;span class="count_top"&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt; Home Broadband&lt;/span&gt;
  &lt;div class="count"&gt;123.50&lt;/div&gt;
  &lt;span class="count_bottom"&gt;&lt;i class="green"&gt;4% &lt;/i&gt; From last Week&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count"&gt;
  &lt;span class="count_top"&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt; Upgrades&lt;/span&gt;
  &lt;div class="count"&gt;2,500&lt;/div&gt;
  &lt;span class="count_bottom"&gt;&lt;i class="green"&gt;4% &lt;/i&gt; From last Week&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count"&gt;
  &lt;span class="count_top"&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt; Pay &amp; Go&lt;/span&gt;
  &lt;div class="count"&gt;4,567&lt;/div&gt;
  &lt;span class="count_bottom"&gt;&lt;i class="green"&gt;4% &lt;/i&gt; From last Week&lt;/span&gt;
  &lt;/div&gt;
  &lt;!-- /top tiles --&gt;
  &lt;!--table data --&gt;
  &lt;div class="clearfix"&gt;&lt;/div&gt;
  &lt;div class="x_panel"&gt;
  &lt;div class="x_title"&gt;
  &lt;h2&gt;Planned Vs Actual &lt;small&gt;Summary&lt;/small&gt;&lt;/h2&gt;
  &lt;div class="clearfix"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="x_content"&gt;
  &lt;table class="table table-hover"&gt;
  &lt;thead&gt;
  &lt;tr&gt;
  &lt;th&gt;Skill&lt;/th&gt;
  &lt;th&gt;Lock Hours&lt;/th&gt;
  &lt;th&gt;Actual Count&lt;/th&gt;
  &lt;th&gt;Away%&lt;/th&gt;
  &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;/table&gt;
  &lt;div id="container"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- /page content --&gt;
  &lt;!-- footer content --&gt;
  &lt;footer&gt;
  &lt;div class="pull-right"&gt;WFM Admin Template by Ankur Khera&lt;/a&gt;&lt;/div&gt;
  &lt;div class="clearfix"&gt;&lt;/div&gt;
  &lt;/footer&gt;
  &lt;!-- /footer content --&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;script src="vendors/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="vendors/bootstrap/dist/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="vendors/fastclick/lib/fastclick.js"&gt;&lt;/script&gt;
  &lt;script src="vendors/nprogress/nprogress.js"&gt;&lt;/script&gt;
  &lt;script src="vendors/Chart.js/dist/Chart.min.js"&gt;&lt;/script&gt;
  &lt;script src="vendors/gauge.js/dist/gauge.min.js"&gt;&lt;/script&gt;
  &lt;script src="vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"&gt;&lt;/script&gt;
  &lt;script src="vendors/iCheck/icheck.min.js"&gt;&lt;/script&gt;
  &lt;script src="vendors/skycons/skycons.js"&gt;&lt;/script&gt;
  &lt;script src="vendors/Flot/jquery.flot.js"&gt;&lt;/script&gt;
  &lt;script src="vendors/Flot/jquery.flot.pie.js"&gt;&lt;/script&gt;
  &lt;script src="vendors/Flot/jquery.flot.time.js"&gt;&lt;/script&gt;
  &lt;script src="vendors/Flot/jquery.flot.stack.js"&gt;&lt;/script&gt;
  &lt;script src="vendors/Flot/jquery.flot.resize.js"&gt;&lt;/script&gt;
  &lt;script src="vendors/flot.orderbars/js/jquery.flot.orderBars.js"&gt;&lt;/script&gt;
  &lt;script src="vendors/flot-spline/js/jquery.flot.spline.min.js"&gt;&lt;/script&gt;
  &lt;script src="vendors/flot.curvedlines/curvedLines.js"&gt;&lt;/script&gt;
  &lt;script src="vendors/DateJS/build/date.js"&gt;&lt;/script&gt;
  &lt;script src="vendors/jqvmap/dist/jquery.vmap.js"&gt;&lt;/script&gt;
  &lt;script src="vendors/jqvmap/dist/maps/jquery.vmap.world.js"&gt;&lt;/script&gt;
  &lt;script src="vendors/jqvmap/examples/js/jquery.vmap.sampledata.js"&gt;&lt;/script&gt;
  &lt;script src="vendors/moment/min/moment.min.js"&gt;&lt;/script&gt;
  &lt;script src="vendors/bootstrap-daterangepicker/daterangepicker.js"&gt;&lt;/script&gt;
  &lt;script src="vendors/weather/weather.js"&gt;&lt;/script&gt;
  &lt;script src="js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/jquery.csv.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/dataTables.bootstrap.js"&gt;&lt;/script&gt;
  &lt;script src="js/csv_to_html_table.js"&gt;&lt;/script&gt;
  &lt;script src="build/js/custom.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt; 
  &lt;script&gt;
  $.get('employee1.csv', function(data) {
  // start the table  
  var html = '&lt;table class="table table-hover"&gt;';
  // split into lines
  var rows = data.split("\n");
  // parse lines
  rows.forEach( function getvalues(ourrow) {
  // start a table row
  html += "&lt;tr&gt;";
  // split line into columns
  var columns = ourrow.split(",");
  
  html += "&lt;td&gt;" + columns[0] + "&lt;/td&gt;";
  html += "&lt;td&gt;" + columns[1] + "&lt;/td&gt;";
  html += "&lt;td&gt;" + columns[2] + "&lt;/td&gt;";
  html += "&lt;td&gt;" + columns[3] + "&lt;/td&gt;";
  
  // close row
  html += "&lt;/tr&gt;";    
  })
  // close table
  html += "&lt;/table&gt;";
  
  // insert into div
  $('#container').append(html);
  });
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>