Instant loading - JavaScript is not reloading on page change

[mercenaruss]

Context

JavaScript is not reloading on site navigation and returning to main page.

Bug description

I have a custom part of page what include some JavaScript what is loading shopping cart.
If i open the page directly Javascript is loading and i see the cart and shopping options.
If i change page and return back to product page, shopping cart is not visible anymore .Only full page refresh is helping.

Related links

• Reporting a bug
• https://squidfunk.github.io/mkdocs-material/setup/setting-up-navigation/?h=instant#instant-prefetching
• https://squidfunk.github.io/mkdocs-material/setup/setting-up-navigation/?h=instant#instant-loading

Reproduction

example.zip

Steps to reproduce

1. Run mkdocs serve
2. Open http://127.0.0.1:8000/ in browser
3. Navigate to any other page
4. Return to index page
5. Shopping cart is not visible

Browser

Chrome, Edge

Before submitting

• I have read and followed the bug reporting guidelines.
• I have attached links to the documentation, and possibly related issues and discussions.
• I assure that I have removed all customizations before submitting this bug report.
• I have attached a .zip file with a minimal reproduction.

[squidfunk]

Thanks for reporting. You embed a third-party JavaScript that is likely executing on DOMContentLoaded. Since instant loading does not trigger that event, the script is only executed when the page is directly loaded, not on navigation. In order to integrate with instant loading, you need to run your code inside document$.subscribe(), the same way we do it for all third party integrations like tablesort 😊 Example:

document$.subscribe(function() {
  console.log("Put your code here") // Executes on `DOMContentLoaded` and on instant navigation
})

Thus, everything is working as intended. The instant loading documentation should definitely mention this, and we'll address it as part of our current effort to restructure our documentation to provide better and runnable examples.