203 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 5
XPages Tip: Overriding, Concatenating, and Conditionally Adding Control Properties via a Theme
Wed, Jul 20th 2016 8
XPages Tip: Displaying Bootstrap Applications Properly on Mobile Devices
Tue, May 31st 2016 4
Efficiently Keeping an XPages Session Alive with JSON RPC
Wed, May 25th 2016 5
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 4
XPages Tip: Beware Server-Side code in Multiple onClientLoad Events
Thu, Apr 7th 2016 4
Top 10
Implementing Font Awesome 4.0.3 in XPages
Mon, Apr 7th 2014 10
Dojo in XPages – 23: Using a Lightbox to Display Image Attachments
Thu, May 15th 2014 10
Set Focus on a Field when Showing a Bootstrap 3 Modal
Wed, Aug 6th 2014 10
Client-Side JavaScript Debugging Tip — Using XSP.dumpObject() and XSP.log()
Wed, Oct 1st 2014 10
Dojo in XPages – 8: Processing Each Element in a NodeList with forEach()
Thu, Feb 27th 2014 9
Adding Event Handlers to Font Awesome Icons in XPages
Wed, Apr 9th 2014 9
Computing Custom Date Format Patterns Throughout an Application
Mon, Aug 18th 2014 9
Gridx in XPages – 18: Formatting Date and Currency Columns
Thu, Dec 18th 2014 9
Order of execution for client-side JavaScript event handlers and callbacks
Mon, Jun 16th 2014 8
XPages Tip: Filtering a View Data Source with URL Parameters
Mon, Jul 7th 2014 8

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.

  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

Apr 23, 2014
4 hits

Recent Blog Posts

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