I have a nave pane on the left side of my webpage. The nav pane use to work perfectly fine, it would expand when the main category was clicked and collapse any previous category that was clicked prior.
As I have expanded the pages functionality somewhere along the line I broke this and cant figure for the life of me why…
The Problem: When I click any main Category then Subcategory for the first time on page load, everything works fine. However, when I try to move to a different subcategory within a different main category I get elementID not found/null error. JS as yall can tell is not my strong suite. Ive tried googling to avoid wasting yalls time but im at my wits end. Any help would be appreciated.
Nav HTML:
<div id="navPane">
<!-- Navigation Pane -->
<div class="logo-and-data-container">
<img src="/images/Logo-2.png" alt="Company Logo" id="navLogo">
<div id="systemLocation"></div>
</div>
<div class="category" onclick="toggleSubcategories('diagnostics', this)">
<a href="javascript:void(0);">Diagnostics</a>
<div id="diagnostics" class="subcategory" style="display:none;">
<a href="javascript:void(0);" onclick="showLogContent('sensorStatus', event)">Sensor Status</a>
<a href="javascript:void(0);" onclick="showLogContent('inputEvents', event)">Input Events</a>
<a href="javascript:void(0);" onclick="showLogContent('systemLogs', event)">System Log</a>
<a href="javascript:void(0);" onclick="showLogContent('swRelease', event)">S/W Release History</a>
</div>
</div>
<div class="category" onclick="toggleSubcategories('alarms', this)">
<a href="javascript:void(0);">Alarms</a>
<div id="alarms" class="subcategory">
<a href="javascript:void(0);" onclick="showContent('currentAlarms', event)">Current Alarms</a>
<a href="javascript:void(0);" onclick="showContent('alarmHistory', event)">Alarm History</a>
</div>
</div>
<div class="category" onclick="toggleSubcategories('inventory', this)">
<a href="javascript:void(0);">Inventory</a>
<div id="inventory" class="subcategory">
<a href="javascript:void(0);" onclick="showContent('currentInventory', event)">Current Inventory</a>
<a href="javascript:void(0);" onclick="showContent('shiftInventory', event)">Shift Inventory</a>
<a href="javascript:void(0);" onclick="showContent('inventoryHistory', event)">Inventory History</a>
</div>
</div>
<div class="category" onclick="toggleSubcategories('delivery', this)">
<a href="javascript:void(0);">Delivery</a>
<div id="delivery" class="subcategory" style="display:none;">
<a href="javascript:void(0);" onclick="showContent('lastDelivery', event)">Last Delivery</a>
<a href="javascript:void(0);" onclick="showContent('deliveryHistory', event)">Delivery History</a>
</div>
</div>
<div class="category" onclick="toggleSubcategories('environmental', this)">
<a href="javascript:void(0);">Environmental</a>
<div id="environmental" class="subcategory" style="display:none;">
<a href="javascript:void(0);" onclick="showContent('citld', event)">CITLD</a>
<a href="javascript:void(0);" onclick="showContent('vld', event)">VLD</a>
</div>
</div>
</div>
Main Content where I dynamically render page content based on subcategory selection:
<div id="mainContent">
<!-- Static Top -->
<div class="static-top">
<span class="inline-elements">
<b>Company<sup>®</sup> Soda Tank Monitoring System:</b>
<div id="dataDisplayPar7" class="inline-div"></div>
</span>
<strong id="reports-title">SYSTEM REPORTS</strong>
<div id="date-time" class="date-time"></div>
</div>
<!-- Dynamic Content Area -->
<div id="contentArea">
<!-- Filters Section -->
<div id="inventoryHistoryFilters" style="display: none; margin-bottom: 20px;">
<select id="tankFilter">
<option value="">All Tanks</option>
<option value="1">Tank 1</option>
<option value="2">Tank 2</option>
<option value="3">Tank 3</option>
<option value="4">Tank 4</option>
</select>
<input type="date" id="startDate">
<input type="date" id="endDate">
<button onclick="applyFilters()">Apply Filters</button>
</div>
</div>
<!-- Dynamic Content Section -->
<div id="dynamicContent">
<div id="selectCategoryMsg">
<p>Select a category.</p>
</div>
</div>
</div>
</div>
My subcategories toggle:
function toggleSubcategories(category, element) {
var allSubcategories = document.getElementsByClassName('subcategory');
for (var i = 0; i < allSubcategories.length; i++) {
var subcategory = allSubcategories[i];
// Hide all subcategories and remove 'expanded' class from their parent
subcategory.style.display = 'none';
if (subcategory.parentElement.classList.contains('expanded')) {
subcategory.parentElement.classList.remove('expanded');
}
}
// Get the subcategory element of the clicked category
var subcategoryElement = document.getElementById(category);
if (subcategoryElement) {
// Toggle the display of the clicked subcategory
if (subcategoryElement.style.display === 'none' || subcategoryElement.style.display === '') {
subcategoryElement.style.display = 'block';
element.classList.add('expanded');
} else {
subcategoryElement.style.display = 'none';
element.classList.remove('expanded');
}
} else {
console.error('Subcategory element not found:', category);
}
}
My relevant showContent() JS:
function showContent(subcategory, event) {
event.stopPropagation();
var dynamicContentDiv = document.getElementById('dynamicContent');
var selectCategoryMsg = document.getElementById('selectCategoryMsg');
if (!dynamicContentDiv || !selectCategoryMsg) {
console.error('Required element(s) not found in the DOM.');
return;
}
if (subcategory === 'inventoryHistory') {
var inventoryHistoryFilters = document.getElementById('inventoryHistoryFilters');
if (!inventoryHistoryFilters) {
console.error('inventoryHistoryFilters element not found');
return;
}
selectCategoryMsg.style.display = 'none';
inventoryHistoryFilters.style.display = 'block';
fetch('php/get_inventory.php')
.then(response => response.json())
.then(data => {
data.sort((a, b) => a.tank - b.tank);
const groupedData = data.reduce((acc, item) => {
acc[item.tank] = acc[item.tank] || [];
acc[item.tank].push(item);
return acc;
}, {});
let tableHtml = '<h2>Inventory History</h2>';
for (const tank in groupedData) {
tableHtml += `<div class="collapsible-container">
<button class="collapsible">
Tank ${tank} <span class="arrow">▶</span>
</button>
<div class="content">
<table>
<tr>
<th>Timestamp</th>
<th>Product Volume</th>
<th>Product Height</th>
<th>TC Volume</th>
<th>Water Volume</th>
<th>Water Height</th>
<th>Ullage</th>
<th>Temperature</th>
</tr>`;
groupedData[tank].forEach(item => {
const date = new Date(item.ts * 1000);
const dateString = date.toLocaleString();
tableHtml += `<tr>
<td>${dateString}</td>
<td>${item.pvol}</td>
<td>${item.phgt}</td>
<td>${item.tcvol}</td>
<td>${item.wvol}</td>
<td>${item.whgt}</td>
<td>${item.ull}</td>
<td>${item.tmp}</td>
</tr>`;
});
tableHtml += '</table></div></div>';
}
dynamicContentDiv.innerHTML = tableHtml;
setupCollapsible();
})
.catch(error => {
console.error('There has been a problem with your fetch operation:', error);
});
} else {
dynamicContentDiv.innerHTML = '<p>Select a different category.</p>';
}
}
My showLogContent():
function showLogContent(subcategory, event) {
var selectCategoryMsg = document.getElementById('selectCategoryMsg');
if (!selectCategoryMsg) {
console.error('selectCategoryMsg element not found');
return;
}
selectCategoryMsg.style.display = 'none';
event.stopPropagation();
let logFilePath;
let logTitle;
if (subcategory === 'systemLogs') {
logFilePath = 'my path';
logTitle = 'System Logs';
} else if (subcategory === 'inputEvents') {
logFilePath = 'my path';
logTitle = 'Input Events';
} else if (subcategory === 'swRelease') {
logFilePath = 'my path';
logTitle = 'Software Release History';
} else if (subcategory === 'sensorStatus') {
logFilePath = 'my path';
logTitle = 'Sensor Status';
}
if (logFilePath) {
fetch('php/read_log.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: 'logFilePath=' + encodeURIComponent(logFilePath)
})
.then(response => response.text())
.then(data => {
let contentArea = document.getElementById('contentArea');
if (contentArea) {
contentArea.innerHTML = `<h2>${logTitle}</h2><pre>${data}</pre>`;
} else {
console.error('contentArea element not found');
}
})
.catch(error => {
console.error('Error fetching log file:', error);
});
}
}
As described in the above, I am trying to be able to switch between each subcategory to view varies logs or inventories. I can only do this once, before the nav gets broken. It takes a page refresh in order to make it work again. Ive tried googling this issue, browsing stack and event AI input to no avail.
