AJAX Example

Version 21.1 by Eduard Moraru on 2021/03/18 11:26

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

Pascal Bastien

Rating
0 Votes
LicenseGNU Lesser General Public License 2.1

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

BeforeAjaxDemo
AfterAjaxDemo

Links

     

Get Connected