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

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
   {
   "greeting" : "Hello",
   "location": "World"
   }
   {{/velocity}}
    from 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 );
           }
         });
       });
     });
   });

or import Xar example

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

Screenshot

Links

• JSON example can be found in Output JSON
• jQuery - AJAX Introduction: http://www.w3schools.com/jquery/jquery_ajax_intro.asp