Changes for page XWiki JavaScript API

Last modified by Simon Urli on 2022/09/14

<
From version < 44.1 >
edited by Vincent Massol
on 2020/03/23
To version < 44.2 >
edited by Vincent Massol
on 2020/03/23
>
Change comment: Typo

Summary

Details

Page properties
Content
... ... @@ -374,6 +374,12 @@
374 374  
375 375  = Example of understanding initialization =
376 376  
377 +{{warning}}
378 +Please note that the following example is very specific:
379 +* It applies to old JavaScript code written using Prototype.js. The more recent recommendation is to use RequireJS and JQuery.
380 +* It doesn't apply fully to any page having a LiveTable because the Rights UI has custom code to load the LiveTable.
381 +{{/warning}}
382 +
377 377  Let's take the example of the Rights page of the Admin UI and understand how its LiveTable is initialized.
378 378  
379 379  The browser will read the HTML from top to bottom. We have the following HTML content:
... ... @@ -400,7 +400,7 @@
400 400  {{/code}}
401 401  
402 402  So here are the steps performed:
403 -1. ##prototype.js## is executed first and registers a function ({{code}document.addEventListener('DOMContentLoaded', fireContentLoadedEvent, false);{/code}}) to execute when the ##DOMContentLoaded## event is sent. This event is sent after the DOM has been parsed, thus after the scripts of the page have been executed. The ##fireContentLoadedEvent## function will fire the [[##dom:loaded## event>>http://api.prototypejs.org/dom/document/observe/]] when called.
409 +1. ##prototype.js## is executed first and registers a function ({{code}document.addEventListener('DOMContentLoaded', fireContentLoadedEvent, false);{{/code}}) to execute when the ##DOMContentLoaded## event is sent. This event is sent after the DOM has been parsed, thus after the scripts of the page have been executed. The ##fireContentLoadedEvent## function will fire the [[##dom:loaded## event>>http://api.prototypejs.org/dom/document/observe/]] when called.
404 404  1. ##xwiki.js## is executed and registers a function ({{code}}document.observe("dom:loaded", XWiki.initialize.bind(XWiki)){{/code}}) to execute when the ##dom:loaded## event is sent. In turn it'll fire 2 events ##xwiki:dom:loading## and ##xwiki:dom:loaded## when called.
405 405  1. ##livetable.js## is not executed at this stage since it's marked as ##defer##.
406 406  1. The Rights UI is executed and {{code}}XWiki && XWiki.isInitialized && startup(){{/code}} evaluates to false since the XWiki object has not been initialized yet at this stage. However it registers a function for the ##xwiki:livetable:loading## event.

Get Connected