Capture TOC Elements in Javascript

Plone Support Add-on Development
1

I am trying to add previous/next buttons on the add and edit form of a dexterity item with several fieldsets. I am using the default tabbed layout for the fieldsets. I have learned that the tabs are rendered by MockUp/JQuery. And because of this I am failing to capture the anchor elements with:

      document.addEventListener('DOMContentLoaded', function() {
          const elements = document.querySelectorAll('.autotoc-nav a');
          console.log(elements);
      });

The above returns an empty node.

I have tried the JQuery equivalent of the above but the results are the same. I have also tried moving the script to the footer slot but it did not matter. The selector works on the browser console since the page is fully loaded.

I am using ClassicUI on Plone 6.0.14.

2

Patternslib fires an event after initializing each pattern (Patterns/src/core/basepattern.js at 7dd4c3635922281878cdfe18d08a07ab913f647a · Patternslib/Patterns · GitHub)

My suggestion is to try this like follows:

document.querySelector(".pat-autotoc").addEventListener("init.autotoc.patterns", () => {
    const elements = document.querySelectorAll('.autotoc-nav a');
    console.log(elements);
});

if this doesn't work, try to use the equivalent jQuery event registration with $(".pat-autotoc").on("init.autotoc.patterns", ...)

3

Thanks! It did not work with javascript but worked in JQuery.