Using jQuery and jQuery UI
jQuery and jQuery UI are provided as Webjars in XWiki, and so can be easily integrated into XWiki using RequireJS (see here for details).
The location of the jQuery webjar is declared in the common page template in javascript.vm, so it can be used simply with
require(['jquery'], function($) { jQuery code });
For other webjars such as jQuery UI the location needs to be supplied to require. This is made easier with the webjars service, which can give the location of a specific library with $services.webjars.url() (API). See this snippet for more infromation.
Example
The following shows a minimal example of using a jQuery UI spinner within an XWiki page.
Page Content
The body of the page holds the input item that you wish to attach jQuery methods to:
{{html}}
<input id="spinner">
{{/html}}
{{/velocity}}
Javascript
The actual jQuery code can be attached to the page as a Javascript Extension object. Go to the page's Object Editor and add an object of type XWiki.JavaScriptExtension. The code body could be:
$( "#spinner" ).spinner();
});
Note that because of the use of velocity code to use the webjars service, the code must be parsed before being sent to the browser, so make sure you select the "Parse Content" option for this object.
JQuery UI CSS
JQuery UI CSS can be included using the import code below in a StyleSheetExtension with the parse property set to true:
References
- Integrating Javascript Libraries in XWiki
- More information about using XWiki Javascript events
- Incorporating Javascript into skin extensions
