Wiki source code of Using jQuery and jQuery UI
Last modified by Thomas Mortagne on 2023/10/10
Hide last authors
| author | version | line-number | content |
|---|---|---|---|
 |
3.1 | 1 | jQuery and jQuery UI are provided as Webjars in XWiki, and so can be easily integrated into XWiki using RequireJS ([[see here>>Documentation.DevGuide.IntegratingJavaScriptLibraries]] for details). |
 |
1.1 | 2 | |
| 3 | The location of the jQuery webjar is declared in the common page template in javascript.vm, so it can be used simply with | ||
 |
1.5 | 4 | {{code}}require(['jquery'], function($) { jQuery code });{{/code}} |
| |
1.1 | 5 | |
 |
1.9 | 6 | 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>>http://nexus.xwiki.org/nexus/service/local/repositories/releases/archive/org/xwiki/platform/xwiki-platform-webjars/7.0/xwiki-platform-webjars-7.0-javadoc.jar/!/org/xwiki/webjars/script/WebJarsScriptService.html]]). See [[this snippet>>doc:snippets:Extension.Requirejs and Webjars workaround for relative path dependencies]] for more infromation. |
| |
1.1 | 7 | |
| |
1.5 | 8 | == Example == |
| |
1.1 | 9 | |
| 10 | The following shows a minimal example of using a [[jQuery UI spinner>>http://api.jqueryui.com/spinner/]] within an XWiki page. | ||
| 11 | |||
| 12 | == Page Content == | ||
| 13 | |||
| 14 | The body of the page holds the input item that you wish to attach jQuery methods to: | ||
| |
1.4 | 15 | |
| |
1.1 | 16 | {{code}} |
| 17 | {{velocity}} | ||
| 18 | {{html}} | ||
| 19 | <input id="spinner"> | ||
| 20 | {{/html}} | ||
| 21 | {{/velocity}} | ||
| 22 | {{/code}} | ||
| 23 | |||
| 24 | == Javascript == | ||
| 25 | |||
| 26 | 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: | ||
| |
1.5 | 27 | |
| |
1.1 | 28 | {{code}} |
| 29 | require(['jquery',"$services.webjars.url('jquery-ui', 'jquery-ui.js')"], function($) { | ||
| 30 | $( "#spinner" ).spinner(); | ||
| 31 | }); | ||
| 32 | {{/code}} | ||
| 33 | |||
| 34 | 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. | ||
| 35 | |||
 |
2.1 | 36 | == JQuery UI CSS == |
| 37 | |||
| 38 | JQuery UI CSS can be included using the import code below in a [[StyleSheetExtension>>doc:extensions:Extension.Skin Extension Plugin]] with the ##parse## property set to ##true##: | ||
| 39 | |||
| 40 | {{code language="none"}} | ||
| 41 | @import "$services.webjars.url('jquery-ui', 'jquery-ui.css')"; | ||
| 42 | {{/code}} | ||
| 43 | |||
| |
1.1 | 44 | = References = |
| 45 | |||
| |
3.1 | 46 | * [[Integrating Javascript Libraries in XWiki>>Documentation.DevGuide.IntegratingJavaScriptLibraries]] |
| 47 | * More information about using [[XWiki Javascript events>>Documentation.DevGuide.JavaScriptAPI]] | ||
| |
4.1 | 48 | * [[Incorporating Javascript into skin extensions>>Documentation.DevGuide.Tutorials.SkinExtensionsTutorial]] |
