AJAX example

Version 14.1 by Pascal Bastien on 2015/03/25 10:24

cogExample to display Json Data and HTML rendering (from other page) in current page without reload it
Developed by

Pascal Bastien

0 Votes
LicenseGNU Lesser General Public License 2.1


If you have a wiki page containing a script to generate JSON or a page generating some nice buttons, table, etc. and you want display it in current page when you click on a button without reload all the page.

Here a short example, to show a way to do it in 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
  • and  HtmlHello page containing a nice warning box.

How to proceed


  1. Create a new page JsonHello containing a script to generate JSON data like this one:

    {{velocity wiki="false"}}
    ## If AJAX call
    #if("$!request.outputSyntax" != '')
    #set($MyJsonData = {'greeting': 'Hello', 'location': 'World'})

    ## In order to ensure the generated JSON is valid it is recommanded 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)


     inspired by Output JSON example.

  2. Create a new page HtmlHello containing a warning box like this one:
    ## If AJAX call
    #if("$!request.outputSyntax" != '')
    {{html wiki="true"}}
     <div class="alert alert-success" role="alert">
     Hello World !
  3. 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

    <div id="AjaxJsonTarget">
    <input class="button" type="submit" id="GetJson" value="Get My json data!">

    * or HTML rendering of a nice warning box ([[HtmlHello]]) in this target:

    <div id="AjaxHtmlTarget">
    <input class="button" type="submit" id="GetHtml" value="Get my nice Warning box!">

    Notice: To avoid bringing all page content, JS must get Page with "xpage=plain&outputSyntax=xxxx" (json or html) parameter.
  4. Finally add an XWiki.JavaScriptExtension xobject to this page and paste this 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' };
      $.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' };
    Target.fadeOut('slow','linear', function () {
    Target.load(Url, UrlParams, function( response, status, xhr ) {
        if ( status == "error" ) {
          var msg = "Sorry but there was an error: ";
           Target.html( msg + xhr.status + " " + xhr.statusText );

or import Xar example

Simply, import xar file attached on this page: AjaxDemo-1.2.xar and go to AjaxDemo page in Sanbox space.




Get Connected