@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 })