I'm currently working on creating an index page for a pair of HTML files that utilize jquery. Let's break down the structure of these files:
- Emps1, Emps2: These are two HTML tables that start off empty.
- TabA_stats, TabB_stats: Each HTML file has its own corresponding JS file to import data from .csv files and populate the tables.
- Tab_A_4-1-2014, Tab_B_4-1-2014: These are two more HTML files that use the previously mentioned empty tables along with JavaScript to create filled out tables.
- CSV_A_4-1-2014, CSV_B_4-1-2014: These are CSV files containing relevant data.
- Index: This is where I want to link both Tab1 and Tab2.
My attempt is to reference both Tab_A_4-1-2014 and Tab_B_4-1-2014 within Index so that clicking on a link will execute either one of them on the same page.
The JavaScript logic involves matching the names of HTML tables (Tab_A_04-01-2014 and Tab_B_04-01-2014) with the dates in the CSV files (CSV_A_4-1-2014, CSV_B_4-1-2014) to display the corresponding data within the tables.
Despite my efforts, I am encountering an issue where the tables do not populate as intended. Upon debugging, I suspect that the problem arises when the JS attempts to retrieve the file name:
TabA_stats (problematic snippet):
var path_data = location.pathname.split("_");
var date_info = path_data[2].split(".");
var log_date = date_info[0];
$("#logdate").text(log_date);
It appears that the JS files only recognize the file as index.html and fail to locate the necessary CSV file for data population.
How can I troubleshoot this issue effectively? Your detailed explanation would greatly assist me, especially since I am relatively new to JS and JQuery, having only spent a week learning it.
EDIT:
Tab1_4-1-2014 (initial focus on the first table):
<html>
<head>
<script type="text/javascript" src="jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tab1_style.css">
</head>
<body>
<div id="tabA_stats_div">
</div>
<script>
//load HTML layout, tables into div "ess_stats_div"
$('#tabA_stats_div').load("tabA_stats.html");
//load js file "tabA_stats.js" and run
$.getScript('tabA_stats.js');
</script>
</body>
</html>
index (currently focusing on tab1):
<head>
<script type="text/javascript" src="jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="ess_style.css">
</head>
<body>
<div id="topBar">
<a href ="#" id="load_home"> Tab1 </a>
</div>
<div id ="content">
</div>
<script>
$(document).ready( function() {
$("#load_home").on("click", function() {
$("#content").load("Tab_A_04-01-2014.html");
});
});
</script>
</body>
</html>