#4 Passing module parameters with turnOn
Requirements
Resources
Pass function the Module Id as parameter with turnOn
This page creates a unique DOM attribute and sets it on a div. turnOn then passes this attribute to a JavaScript function, which identifies the element with a queryselector and performs DOM manipulations.
In this tutorial you'll learn how to:
- Create a unique DOM attribute
- Pass it to a JavaScript function
Output
turnOn hasn't passed any parameters.
#4 Passing module parameters with turnOn
Source Code of this file
Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code
@using ToSic.Razor.Blade; @inherits Custom.Hybrid.Razor14 <!-- unimportant stuff, hidden --> <div @Sys.PageParts.InfoWrapper()> @Html.Partial("../shared/DefaultInfoSection.cshtml") <div @Sys.PageParts.InfoIntro()> <h2>Pass function the Module Id as parameter with turnOn</h2> <p>This page creates a unique DOM attribute and sets it on a div. turnOn then passes this attribute to a JavaScript function, which identifies the element with a queryselector and performs DOM manipulations.</p> <br> In this tutorial you'll learn how to: <ul> <li> Create a unique DOM attribute </li> <li> Pass it to a JavaScript function </li> </ul> Look at the text below to see the effect. </div> </div> @{ // Create unique DOM attribute with Module Id var uniqueDomAttribute = "turn-on-example-" + CmsContext.Module.Id; } @* Inject attribute into DIV, to make it accessible for query *@ <div @uniqueDomAttribute> turnOn hasn't passed any parameters. </div> @* This tutorial uses turnOn, see turnOn tutorials *@ @{ var data = new { domAttribute = uniqueDomAttribute }; } @Kit.Page.TurnOn("window.tutQuery.init()", data: data) <script src="@CmsContext.View.Path/111-module.js" @Kit.Page.AssetAttributes()></script> @* Footer *@ @Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })