AJAX example

Version 5.2 by Pascal Bastien on 2015/03/20 19:14

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

Here an short example how to do it in SandBox space.
We have 3 Page:

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

Example

  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="/xwiki/bin/view/Sandbox/JsonHello"
    var UrlParam="xpage=plain&outputSyntax=plain"
    Launcher.click(function(){
      $.get( Url + '?' + UrlParam, 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="/xwiki/bin/view/Sandbox/HtmlHello"
    var UrlParam="xpage=plain&outputSyntax=html"
    Launcher.click(function(){
    Target.fadeOut('slow','linear', function () {
    Target.load(Url, UrlParam, 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 );
            }
          });
        });
      });
    });
  5. or you can import xar file attached on this page: AjaxDemo.xar

Screenshot

BeforeAjaxDemo
AfterAjaxDemo

Links

Get Connected