198 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
XPages Tip: Adding a Bootstrap Class to All Labels via the Theme (Redux)
Wed, Jul 20th 2016 2
XPages Tip: Overriding, Concatenating, and Conditionally Adding Control Properties via a Theme
Wed, Jul 20th 2016 2
XPages Tip: Displaying Bootstrap Applications Properly on Mobile Devices
Tue, May 31st 2016 3
Efficiently Keeping an XPages Session Alive with JSON RPC
Wed, May 25th 2016 3
Browser Session Lifespan – Idle Session Timeout vs LTPA Token Expiration
Tue, May 24th 2016 4
XPages Tip: Passing an Array to a Custom Control Property
Tue, Apr 12th 2016 3
XPages Tip: Beware Server-Side code in Multiple onClientLoad Events
Thu, Apr 7th 2016 0
Top 10
Dojo in XPages – 9: Manipulating DOM Element Styles and Classes
Tue, Mar 4th 2014 9
Dojo in XPages 11 – Using Loading Images to Improve Perceived Responsiveness
Mon, Mar 10th 2014 9
Dojo in XPages – 22: Displaying an Image Gallery of Attachments
Thu, May 8th 2014 9
Dojo in XPages – 23: Using a Lightbox to Display Image Attachments
Thu, May 15th 2014 9
Computing Custom Date Format Patterns Throughout an Application
Mon, Aug 18th 2014 9
Gridx in XPages – Creating a Simple Grid
Thu, Nov 6th 2014 9
Dojo in XPages – 14: Custom Animations
Tue, Mar 18th 2014 8
Dojo in XPages – 5: Array Utilities
Tue, Feb 18th 2014 7
Dojo in XPages – 6: Selecting a DOM Element with dojo.byId()
Thu, Feb 20th 2014 7
Gridx in XPages – 5: Modularizing Common Resources
Tue, Nov 11th 2014 7


Dojo in XPages – 20: Handling Successful or Failed AJAX Requests
Twitter Google+ Facebook LinkedIn Addthis Email Gmail Flipboard Reddit Tumblr WhatsApp StumbleUpon Yammer Evernote Delicious
Brad Balassaitis    

In the last post, I showed how to use an xhr.get() request in Dojo to asynchronously retrieve information from a REST service. In this post, we’ll look at how to execute code when the request is completed or returns an error within an example that demonstrates how to display the response (or an error message) on the page.

Dojo in XPages Series

Dojo in XPages — All Blog Posts

XHR Callbacks

The Dojo xhr requests provide the opportunity to define up to 3 callback functions that run after the request is completed. The xhr request is generally asynchronous (although there’s a parameter to change that), so it doesn’t block the user from interacting with the rest of the page while data is retrieved. The callback functions are useful in that they can see the results of the request and respond accordingly. All callbacks are anonymous javascript functions that automatically receive at least one parameter.

load – the ‘success’ callback

As shown in the last post, the load callback is executed when the request is completed and data has been retrieved successfully. The function automatically receives a parameter that contains the data that was returned by the request, in the format specified by the handleAs parameter (generally text, json, or xml).

error – the ‘failure’ callback

The error callback is executed when the request cannot be completed successfully. The function automatically receives a parameter defining the error and can also use a second parameter to determine the HTTP status code (among other things).

handle – the ‘always’ callback

In addition to load and error, there is another callback option called handle. This callback runs regardless of whether the call was successful or failed. You can review the response and determine whether it was successful based on the data. This is an option if you want to have some code run regardless of the response and you don’t want to duplicate it in both the load and error callbacks.

An Example

Building on the example shown in the last post, this code will request data from a REST service. If successful, it will write the data onto the page in the form of a table (assuming there’s a passthru HTML div on the page with the ID “resultsDiv”). If it fails, it will display a message in that div in red.

dojo.xhr.get({
  url:"REST.xsp/People",
  handleAs:"json",
  load: function(data){
    var output = '<table>';

    // Build the header row by inspecting column names
    output += '<tr>';
    for (var col in data[0]) {
        output += '<th>' + col + '</th>';
    }
    output += '</tr>';

    // Build the data rows
    for(var i in data){
      output += '<tr>';
      for (col in data[i]) {
        output += '<td>' + data[i][col] + '</td>';
      }
      output += '</tr>';
    }
    output += '</table>';
    dojo.byId('resultsDiv').innerHTML = output;
  },
  error: function(msg, args) {
    dojo.style('resultsDiv', 'color', 'red');
    dojo.byId('resultsDiv').innerHTML = 'Status: ' + args.xhr.status + '<br />' + msg;
  }
});

When successful, in inspects the structure of the data returned and builds a table to display it:

Dojo 20 - A - Display REST Data

To test out the error code, just point it at a page that doesn’t exist.

Dojo 20 - B - Display REST Error




---------------------
http://xcellerant.net/2014/04/23/dojo-in-xpages-20-ajax-callbacks/
Apr 23, 2014
7 hits



Recent Blog Posts




Created and Maintained by Yancy Lent - About - Planet Lotus Blog - Advertising - Mobile Edition