One of the challenges I'm facing is with a modal dialog that has been customized to appear on the right side of the customer's browser. Depending on the icon clicked in the navigation bar, an ajax call is made and an HTML fragment is loaded into the modal-body.
<a class="nav-link right-menu" role="button" data-bs-toggle="modal" data-bs-target="#rightSubMenu" data-id="admin-menu">
<i class="fas fa-users-crown"></i>
</a>
The issue arises when loading a dashboard for admins which refreshes DIVs every 5 minutes using setInterval. Even after closing the modal dialog, setInterval continues to run.
I tried clearing the modal-body contents upon modal close, but it seems that doesn't completely unload the JS files loaded as part of the fragment.
How can I ensure that all JS files are unloaded when the modal is closed, especially since I'll be reusing the modal dialog for other HTML fragments with their own JS files?
I appreciate any insights or suggestions you may have. Thank you!