JavaScript within Custom Modules
TikiWiki version 18.1 (InnoDB)
Hi all,
I have created a custom module which displays a side-menu that I created using my own custom CSS classes. The module simply contains HTML which calls the main class and displays menu links and drop-downs; I'm using JavaScript to loop through all dropdown buttons to toggle between hiding and showing its dropdown content (to have multiple dropdowns without any conflict).
Originally, I was adding the HTML and JavaScript as Source code to each individual page, however, this was starting to get a bit cumbersome with the more links I created within my custom menu, and so I decided to go down the route of creating a custom module using the same HTML and JavaScript... this would then allow me to assign Categories to pages to automatically add my menu to each page within this category... clever, eh?
The problem I have is, when I paste the HTML and JavaScript in to the Data area (whilst creating the Custom Module), I get the following error which is essentially complaining about the JavaScript being used:
"'Syntax error in template "3907be36d3de2bd1ede1cb5ae03e97ad5bce16fb" on line 22 "{JS()}" PHP function 'JS' not allowed by security setting"
I thought I have everything enabled to allow me to do this but, maybe I'm missing something? Or, maybe simply copying the HTML and JavaScript, which works fine within a standard Wiki Page, doesn't translate so well when pasting the exact same data in to a Custom Module?
The HTML is pretty standard and, as you can image, simply calls the main class, the JavaScript is as follows:
{JS()} /* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */ var dropdown = document.getElementsByClassName("dropdown-btn"); var i; for (i = 0; i < dropdown.length; i++) { dropdown[i].addEventListener("click", function() { this.classList.toggle("active2"); var dropdownContent = this.nextElementSibling; if (dropdownContent.style.display === "block") { dropdownContent.style.display = "none"; } else { dropdownContent.style.display = "block"; } }); } {JS}
Any help on this would be gratefully received!
Thanks,
Mark