AJAX example

Version 13.1 by Pascal Bastien on 2015/03/25 10:17
Warning: For security reasons, the document is displayed in restricted mode as it is not the current version. There may be differences and errors due to this.

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:

    Failed to execute the [velocity] macro. Cause: [Nested scripts are not allowed. Current Script Macro [velocity] (source [snippets:ExtensionCode.ExtensionSheet]) is executed inside Script Macro [velocity] (source [snippets:ExtensionCode.ExtensionSheet])]. Click on this message for details.

     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