Requirements
Resources
Await system scripts
This page waits for a system script to load, then executes a JavaScript function with turnOn and passes a domAttribute as parameter. The executed JavaScript then triggers a system script, which binds the fancybox properties.
In this tutorial you'll learn how to:
- Execute a JavaScript function after a system script was loaded
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>Await system scripts</h2> <p> This page waits for a system script to load, then executes a JavaScript function with turnOn and passes a domAttribute as parameter. The executed JavaScript then triggers a system script, which binds the fancybox properties. </p> <br> In this tutorial you'll learn how to: <ul> <li> Execute a JavaScript function <b>after</b> a system script was loaded </li> </ul> Look at the element below to see the effect. </div> </div> @{ // Create unique DOM attribute with Module Id var uniqueDomAttrubute = "turn-on-example-" + CmsContext.Module.Id; } @* Inject attribute into DIV, to make it accessible for query *@ <a @uniqueDomAttrubute href='https://images.unsplash.com/photo-1503899036084-c55cdd92da26?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80' data-caption="System script used here"> <img loading="lazy" class="img-fluid" src='https://images.unsplash.com/photo-1503899036084-c55cdd92da26?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=250&q=80'/> </a> @* Wait for the system script to load, then execute the window.turnOnTutorial202.init function and pass the domAttribute as JSON *@ @* This tutorial uses turnOn, see turnOn tutorials *@ @{ var data = new { domAttribute = uniqueDomAttrubute }; } @* TODO: Fancybox not working now *@ @Kit.Page.Activate("fancybox4") @Kit.Page.TurnOn("window.turnOnTutorial202.init()", data: data, require: "window.Fancybox") @* Include local JavaScript file *@ <script src="@CmsContext.View.Path/202-system-scripts.js" @Kit.Page.AssetAttributes()></script> @* Footer *@ @Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })