Oqtane Tutorials

turnOn Tutorials

Tutorial Home › turnOn

Execute JavaScript with turnOn

#2 Basic turnOn usage and activation

Passing parameters with turnOn

Requirements

2sxc 7.00

Resources

Activate turnOn and execute basic tasks

This page activates turnOn and executes a JavaScript function using turnOn.

In this tutorial you'll learn how to:

Activate turnOn using the PageService
Execute a JavaScript function on initial loading

Look at the text below to see the effect.

Output

turnOn is waiting - this will be replaced within 3 seconds... 😔

<div id="turn-on-example">
  turnOn is waiting - this will be replaced within 3 seconds... 😔
</div>

@* Executes the JavaScript function window.turnOnTutorial100.init() from the included script file *@
  @Kit.Page.TurnOn("window.turnOnTutorial100.init()")

<script src="@CmsContext.View.Path/100-local-js.js" @Kit.Page.AssetAttributes()></script>

Source Code of 100-local-js.js// Use an IFFE to ensure the variables are not exposed globaly
// See https://developer.mozilla.org/en-US/docs/Glossary/IIFE
(() => {
  // The init function which should be called
  function init() {
    // Example element gets found in the DOM
    const exampleElement = document.querySelector("#turn-on-example")
    // Success text gets displayed in the DOM
    exampleElement.innerText = "turnOn has been executed. 😉";
  }
  
  // For demo purpose, wait 3 seconds before we add the object and Init
  // This should simulate slow loading of a JavaScript
  
  setTimeout(() => {
    // Generate a new object if none exists yet (best practice)
    window.turnOnTutorial100 = window.turnOnTutorial100 || {};
    window.turnOnTutorial100.init = window.turnOnTutorial100.init || init;
  }, 3000);
})();

Execute JavaScript with turnOn

#2 Basic turnOn usage and activation

Passing 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>Activate turnOn and execute basic tasks</h2>
      <div>This page activates turnOn and executes a JavaScript function using turnOn.</div>
      <br>
      In this tutorial you'll learn how to:
      <ul>
        <li>
          Activate turnOn using the PageService
        </li>
        <li>
          Execute a JavaScript function on initial loading
        </li>
      </ul>
      Look at the text below to see the effect. 
    </div>
  </div>

  <div id="turn-on-example">
    turnOn is waiting - this will be replaced within 3 seconds... 😔
  </div>

  @* Executes the JavaScript function window.turnOnTutorial100.init() from the included script file *@
    @Kit.Page.TurnOn("window.turnOnTutorial100.init()")

  <script src="@CmsContext.View.Path/100-local-js.js" @Kit.Page.AssetAttributes()></script>


@* Footer *@
@Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })