Javascript Execution for Delayed Page Content

Some Widget Framework features depend on delayed loading of page content:

  • Lazy loading (see Configure Lazy Loading Options)

  • In-line linked content (see the Link Settings option of the Teaser widget, for example, in the Escenic Widget Framework Core Widgets Reference).

In both cases, pages have content that is is not loaded to the DOM at the normal time, but loaded later using AJAX functionality. This means you have to be careful about when any Javascript code that you want to operate on this delayed content is invoked. If the code is invoked too early then it may not work because the elements it addresses have not yet been loaded.

Code that is invoked for a widget on the $(document).ready() event inside the widget itself will work even if the widget is lazy-loaded. For example:

<div class="widget awesome-slideshow" id="slideshow-1">
    <!--content omitted-->
</div>

<script type="text/javascript">
  $(document).ready(function(){
     $(".awesome-slideshow").awesomeSlideshow();
  });
</script>

The above script will not work, however, if the script is loaded from the document and awesome-slideshow is lazy-loaded - because the addressed element will not be present when the $(document).ready() event fires. And the $(document).ready() event will never work for in-line loaded content.

The Widget Framework therefore provides a custom event called pageContentReady() which is triggered whenever delayed content is added to the DOM. You can use this event to ensure that code is executed at the right point, immediately after the content it addresses has been loaded:

$(document).on("pageContentReady", function (event, content) {
  $(".awesome-slideshow", $(content)).awesomeSlideshow();
});