caMicroscope
caMicroscope copied to clipboard
Fixes #847: table duplication on mobile views due to multiple initializations
** Summary**
This pull request resolves an issue where the responsive table implementation (using the stacktable
plugin) was causing duplicate tables to be rendered on mobile devices. The changes ensure that only a single instance of the responsive table is present at any given time, preventing duplication and maintaining a consistent user experience across devices and refreshes.
Changes
-
Added a check to remove existing
.stacktable
elements if they are present: Before initializing thestacktable
plugin, the code now checks if any existing.stacktable
elements exist in the DOM. If found, these elements are removed to prevent duplication. -
Cleared the table body (tbody) before new data is injected: To ensure a clean slate before rendering new data, the existing table body (tbody) is now emptied before the new rows are injected.
-
Re-applied the stacktable plugin only if the table has not been previously stacked: The stacktable plugin is now initialized only if the table does not already have the stacktable class, preventing redundant initialization and potential conflicts.
Motivation
To fix a bug where mobile devices showed the same table twice after refreshing data. The goal is to make sure that the tables on mobile are shown correctly without any errors. Testing The changes have been thoroughly tested in the following scenarios:
- Refreshing data on mobile devices (both actual devices and desktop browser's responsive mode)
- Navigating between different views and re-rendering the table
- Resizing the browser window to trigger responsive behavior In all cases, the expected behavior of maintaining a single instance of the responsive table was consistently observed, with no duplication of tables or rendering issues.