AJAX Example

Last modified by Manuel Leduc on 2023/10/10 16:38

cogExample to display Json Data and HTML rendering (from other page) in the 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 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)

  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 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)


    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 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 );

Packaged XAR Example

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





Get Connected