AJAX Example
Last modified by Manuel Leduc on 2025/02/12 12:24
![]() | Example to display Json Data and HTML rendering (from other page) in the current page without reload it |
Type | Snippet |
Category | Other |
Developed by | |
Rating | |
License | GNU Lesser General Public License 2.1 |
Table of contents
Description
If you have a wiki page containing a script to generate JSON or a page generating some nice buttons, table, etc., and you want to display it in the current page when you click on a button without reloading the page.
Here a short example, that shows a way to do it in the SandBox space.
We have 3 Pages:
- The main page with button to display result from JsonHello page and HtmlHello page.
- JsonHello page containing JSON data.
- HtmlHello page containing a nice warning box.
How to proceed
Manually (step-by-step)
- Create a new page JsonHello containing a script to generate JSON data like this one:
{{velocity wiki="false"}} ## If AJAX call #if("$!request.outputSyntax" != '') $response.setContentType('application/json') #end #set($MyJsonData = {'greeting': 'Hello', 'location': 'World'}) $jsontool.serialize($MyJsonData) ## In order to ensure the generated JSON is valid, it is recommended to ## build the JSON in memory (using Velocity/Java maps, arrays and basic types) ## and then serialize it with $jsontool.serialize method. ## Usage (from Marius: http://xwiki.markmail.org/message/wsvaj4leg5atufwd): ## #set($array = [1, 2, 3]) ## $jsontool.serialize($array) ## #set($map = {'enabled': true, 'color': 'yellow', 'count': 13}) ## $jsontool.serialize($map) {{/velocity}}
inspired by Output JSON example.
- Create a new page HtmlHello containing a warning box like this one:
{{velocity}} ## If AJAX call #if("$!request.outputSyntax" != '') $response.setContentType('application/json') #end {{html wiki="true"}} <div class="alert alert-success" role="alert"> Hello World ! </div> {{/html}} {{/velocity}}
- Create the main page AjaxDemo containing button to display result of the Ajax Demo
Here a nice Ajax Demo to get: * Json Data (from [[JsonHello]]) in this target {{html}} <div id="AjaxJsonTarget"> <input class="button" type="submit" id="GetJson" value="Get My json data!"> </div> {{/html}} * or HTML rendering of a nice warning box ([[HtmlHello]]) in this target: {{html}} <div id="AjaxHtmlTarget"> <input class="button" type="submit" id="GetHtml" value="Get my nice Warning box!"> </div> {{/html}} Notice: To avoid bringing all page content, JS must get Page with "xpage=plain&outputSyntax=xxxx" (json or html) parameter.
- Finally, add an XWiki.JavaScriptExtension XObject to this page and paste this javascript code:
//Ajax function: Display JSON data from JsonDemo page next "AjaxJsonTarget" Div (button). require(['jquery'], function ($) { var Target = $('#AjaxJsonTarget') var Launcher = $('#GetJson') var Url = new XWiki.Document('JsonHello','Sandbox').getURL('get'); var UrlParams = { 'xpage': 'plain','outputSyntax': 'plain' }; Launcher.click(function(){ $.get( Url, UrlParams, function( data ) { $( Target ) .append( "Greeting: " + data.greeting ) // Hello .append( " Location: " + data.location ); // World }, "json" ); }); }); //Ajax function: replace "AjaxHtmlTarget" Div (button) with html result from HtmlHello page (FadeIn/Out is nicer than only load). require(['jquery'], function ($) { var Target = $('#AjaxHtmlTarget') var Launcher = $('#GetHtml') var Url = new XWiki.Document('HtmlHello','Sandbox').getURL('get'); var UrlParams = { 'xpage': 'plain','outputSyntax': 'html' }; Launcher.click(function(){ Target.fadeOut('slow','linear', function () { Target.load(Url, UrlParams, function( response, status, xhr ) { Target.fadeIn('slow','linear'); if ( status == "error" ) { var msg = "Sorry but there was an error: "; Target.html( msg + xhr.status + " " + xhr.statusText ); } }); }); }); });
Packaged XAR Example
Simply, import the XAR file attached on this page: AjaxDemo page in Sanbox space to see it in action.
and go to theScreenshot
Links
- JSON example can be found in Output JSON
- jQuery - AJAX Introduction
- Some precious advices by Marius:
- XWiki Skin Extensions Tutorial