Loading...
 
 Error
  • Contact the site administrator. The index needs rebuilding.
Features / Usability

Features / Usability


JavaScript within Custom Modules

posts: 11 United Kingdom

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:

Copy to clipboard
{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

posts: 11 United Kingdom

Hi Rick,

I hadn't selected Wiki Market.... I have do so now and, all looks good. Thank you for your help!

Thanks,
Mark

posts: 11 United Kingdom

Hey Rick,

I've just noticed that, whilst I can now configure the module without getting the error, and the module saves ok with the JavaScript included, the JavaScript isn't being run. By that I mean, the parts of the menu controlled by the JavaScript (the dropdowns) don't work, even though I've simply done a straight copy and paste from a page where the the HTML and JS work together just fine.

I really cannot figure out why the same JS code that works on a wiki page is being (seemingly) ignored within the custom module.

Would you have any ideas on this?

Thank you again for your help!

Mark

posts: 3665 United States

I'm not sure.... Did you open the console, is there a error being shown?

If you want the script to be loaded all the time, I would simply put the script in the Custom Javascript field on the Admin: Look & Feel: Customization page.

HTH,

- Rick | My Tiki Blog | My Tiki UserPage

Why be a dummy? Get smarty! TikiForSmarties.com
Tiki for Smarties, your source for the best (and only) Tiki books, guides, and tutorials.

posts: 11 United Kingdom

Hey Bernard,

Thanks for offering to help.

Sure, the HTML being used (to create the menu links, and submenu (dropdown) links) is pretty generic and calls a CSS class I created and put in the Custom CSS section (under Look and Feel) called sidenav2.

I'm going to try and attach a text file which will be a straight copy and paste of the HTML and JS from a Wiki page with the menu currently working.

As you will (hopefully, be able to see in the text file, Immediately after the heading, I include the JavaScript as an in-line plugin (hence the "{JS}" tags), as follows:

Copy to clipboard
{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}

This (HTML and JS plugin) work fine together if I add it directly to the page, however, as the amount of pages increase, it becomes harder to maintain the menu as each change to the menu has to be replicated to each page I've added the menu to; hence why I decided to go down the Custom Module route.

The problem I'm having with that is I cannot get the JavaScript to work, whether added directly in the Custom Module's Data section (with the HTML, as I did when adding directly to a Wiki page) or adding the JavaScript in the Custom JavaScript area, under Look and Feel.

Having said this, I'm neither a Tiki nor JavaScript expert (by any means) and so it's likely I'm missing something fundamental.

Many thanks,
Mark


posts: 8633 Israel

Hi Mark,

Very welcome.
While I’ll (and other) be glad to help my (and other) time is very limited and I need to "touch/see" things. ;)
You mentioned your "manual" (page by page) solution was working, correct ?

I suggest you use https://demo.tiki.org/ to create a sample that show it working.
Or even create an instance on the whishlist at dev.tiki.org.

Hope to be able to help. :-)


posts: 11 United Kingdom
Thanks, Bernard. I check-out the link you posted.

posts: 2428 Czech Republic

If you use any JS with curly brackets in custom module you need to wrap it in {literal}...{/literal} Smarty block as modules get parsed as Smarty syntax by default (and then the parser thinks it is some Smarty block or function), not as the wiki syntax... You can also use instead of

Copy to clipboard
{JQ()}...{JQ}
the Smarty block:
Copy to clipboard
{jq}...{/jq}

or simply the plain old HTML script tags.

posts: 11 United Kingdom

Hi Luciash,

My apologies for my late response, I've been away from work.

Thank you very much for your assistance on this.

@Rick, thank you very much fir your assistance too.