Example to display Json Data and HTML rendering (from other page) in the current page without reload it

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

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" != '')
     $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 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)
   
   {{/velocity}}

    inspired by Output JSON example.

2. 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}}
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
   
   {{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.
   
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' };
    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-1.2.xar and go to the AjaxDemo page in Sanbox space to see it in action.

Screenshot

Links

• JSON example can be found in Output JSON
• jQuery - AJAX Introduction
• Some precious advices by Marius:
  • http://xwiki.markmail.org/message/wsvaj4leg5atufwd
  • http://xwiki.markmail.org/message/ugblrsm6lzpqegoy
• XWiki Skin Extensions Tutorial