Summary

• Page properties (2 modified, 0 added, 0 removed)

Details

Page properties

Author

...	...	@@ -1,1 +1,1 @@
1		-XWiki.VincentMassol
	1	+XWiki.surli

Content

...	...	@@ -22,7 +22,8 @@
22	22
23	23	== DOM Events (xwiki.js) ==
24	24
25		-* **##xwiki:dom:loaded##**
	25	+* (((
	26	+**##xwiki:dom:loaded##**
26	26	This event is similar to [[prototype's dom:loaded event>>http://prototypejs.org/doc/latest/dom/document/observe/]], with the difference that in the time-lapse between ##dom:loaded## and ##xwiki:dom:loaded##, XWiki may have transformed the DOM. Example of DOM transformations operated by XWiki is setting the right target of links that have rel="external" attribute so that the document can be XHTML valid and still have the desired effect, making internal rendering error messages expandable, insert document template handlers for links to non-existent documents, and so on. In the future there might be more transformations operated by XWiki upon DOM initialization. This event is meant for code to be notified of loading of the XWiki-transformed version of the initial DOM. As ##dom:loaded##, it can be used as follows:(((
27	27	{{code language="javascript"}}
28	28	document.observe("xwiki:dom:loaded", function(){
...	...	@@ -29,11 +29,14 @@
29	29	// Initialization that can rely on the fact the DOM is XWiki-tranformed goes here.
30	30	});
31	31	{{/code}}
32		-)))(((
	33	+)))
	34	+
	35	+(((
33	33	{{info}}
34	34	It is recommended to bind startup scripts to this event instead of ##window.load## or ##document.dom:loaded##.
35	35	{{/info}}
36	36	)))
	40	+)))
37	37
38	38	* **##xwiki:dom:loading##**
39	39	##xwiki:dom:loading## is sent between ##dom:loaded## and ##xwiki:dom:loaded##, before XWiki changes the DOM. This is the event that should start all scripts making important DOM changes that other scripts should see.
...	...	@@ -74,7 +74,7 @@
74	74
75	75	== Action events (actionButtons.js) ==
76	76
77		-* **##xwiki:actions:cancel##**
	81	+* **##xwiki:actions:cancel##**
78	78	This event is sent after the user clicks the "Cancel" button of an editor (Wiki, WYSIWYG, object, rights, etc.), but before actually cancelling the edit.
79	79	* **##xwiki:actions:beforePreview##** (7.4.1+, 8.0M1+)
80	80	This event is sent after the user clicks the "Preview" button from an edit mode, but before the edit form is validated. You can use this event to update the form fields before they are submitted to the preview action.
...	...	@@ -82,7 +82,8 @@
82	82	This event is sent after the edit form has been validated, as a result of the user clicking the "Preview" button from an edit mode, but before the form is submitted. The event is fired only if the edit form is valid.
83	83	* **##xwiki:actions:beforeSave##** (7.4.1+, 8.0M1+)
84	84	This event is sent after the user clicks the "Save" or "Save & Continue" button from an edit mode, but before the edit form is validated. You can use this event to update the form fields before they are submitted to the save action.
85		-* **##xwiki:actions:save##**
	89	+* (((
	90	+**##xwiki:actions:save##**
86	86	This event is sent after the edit form has been validated, as a result of the user clicking the "Save" or "Save & Continue" button from an edit mode, but before the form is submitted. The event is fired only if the edit form is valid. A memo is available if you need to know if the intend is to continue after the save, in ##event.memo['continue']##. You can use it as follows:(((
87	87	{{code language="javascript"}}
88	88	document.observe("xwiki:actions:save", function(event){
...	...	@@ -92,13 +92,18 @@
92	92	}
93	93	});
94	94	{{/code}}
95		-)))(((
	100	+)))
	101	+
	102	+(((
96	96	{{warning}}
97	97	While most properties can be accessed as ##event.memo.property##, this doesn't work with ##event.memo.continue## since ##continue## is a reserved keyword.
98	98	{{/warning}}
99		-)))(((
	106	+)))
	107	+
	108	+(((
100	100	All these events contain as extra information, in the second parameter sent to event listeners (the memo), the original click event (if any, and which can be stopped to prevent the action from completing), and the form being submitted, as ##event.memo.originalEvent##, and ##event.memo.form## respectively.
101	101	)))
	111	+)))
102	102
103	103	== Document extra events (xwiki.js) ==
104	104
...	...	@@ -255,6 +255,8 @@
255	255	xm.restURL // get the REST url of the current doc (eg: /xwiki/rest/wikis/xwiki/spaces/Main/pages/WebHome)
256	256	xm.form_token // get the current CSRF token that you should pass to your scripts to avoid CSRF attacks.
257	257	xm.userReference // since 10.4RC1 and 9.11.5, get the reference of the current user
	268	+ xm.isNew // since 11.2RC1, define if the current document is new or not
	269	+ xm.locale // since 12.3RC1, get the locale of the current document
258	258	});
259	259	{{/code}}
260	260
...	...	@@ -357,6 +357,7 @@
357	357	)))
358	358
359	359	= Related =
	372	+
360	360	{{velocity}}
361	361	#set($tag = 'javascript')
362	362	#set ($list = $xwiki.tag.getDocumentsWithTag($tag))
...	...	@@ -376,6 +376,7 @@
376	376
377	377	{{warning}}
378	378	Please note that the following example is very specific:
	392	+
379	379	* It applies to old JavaScript code written using Prototype.js. The more recent recommendation is to use RequireJS and JQuery.
380	380	* It doesn't apply fully to any page having a LiveTable because the Rights UI has custom code to load the LiveTable.
381	381	{{/warning}}
...	...	@@ -384,7 +384,7 @@
384	384
385	385	The browser will read the HTML from top to bottom. We have the following HTML content:
386	386
387		-{{code language='html'}}
	401	+{{code language="html"}}
388	388	...
389	389	<head>
390	390	...
...	...	@@ -406,7 +406,8 @@
406	406	{{/code}}
407	407
408	408	So here are the steps performed:
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.
	423	+
	424	+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.
410	410	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.
411	411	1. ##livetable.js## is not executed at this stage since it's marked as ##defer##.
412	412	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.
...	...	@@ -416,5 +416,3 @@
416	416	1. Thus the ##xwiki.js##'s ##initialize## function is called and the ##xwiki:dom:loading## event is fired.
417	417	1. Thus the ##livetable.js##'s ##init## function is called and the ##xwiki:livetable:loading## event is fired.
418	418	1. Thus the Rights UI's ##startup## function is called and its LiveTable is initialized.
419		-
420		-