technology

DataTables ajax error handling

Today, I’ll add the ability to edit users. This will be easy, as most of the pieces are already in place. First, I’ll add a new editUser method that accepts an updated user object, verifies that the user exists and then saves the updated user object. The only differences between the new editUser method and the existing postUser method are:

  1. Invert the test on users.containsKey() to throw an error when the user does not exist (editUser) rather than when the user already exists (postUser).
  2. New method name and @Path annotation
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
diff --git a/src/main/java/com/ideoplex/tutorial/MyResource.java b/src/main/java/com/ideoplex/tutorial/MyResource.java
index 60f818f..effd194 100644
--- a/src/main/java/com/ideoplex/tutorial/MyResource.java
+++ b/src/main/java/com/ideoplex/tutorial/MyResource.java
@@ -72,4 +72,22 @@ public class MyResource {
             return user;
         }
     }
+
+    @POST
+    @Path("user/edit")
+    @Consumes(MediaType.APPLICATION_JSON)
+    public User editUser(User user) {
+        String email = user.getEmail();
+        if ( !users.containsKey(email) ) {
+            throw new WebApplicationException(Response
+                                              .status(Response.Status.BAD_REQUEST)
+                                              .type(MediaType.TEXT_PLAIN)
+                                              .entity("User email \"" + email + "\" does not exist")
+                                              .build());
+        }
+        else {
+            users.put(email, user);
+            return user;
+        }
+    }
 }

Next, I added support for error handling to the existing userPost javascript function. This required the:

  1. Addition of bootbox for bootstrap based dialogs.
  2. Addition of an error function to the jQuery ajax invocation.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
diff --git a/src/main/webapp/index.html b/src/main/webapp/index.html
index 5639a4c..076bacc 100644
--- a/src/main/webapp/index.html
+++ b/src/main/webapp/index.html
@@ -14,6 +14,7 @@
     <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
     <script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+    <script src="js/bootbox.min.js"></script>
   </head>
 
   <body>
@@ -122,6 +123,9 @@
          url:         "webapi/myresource/user/post",
          data:        JSON.stringify(json),
          contentType: "application/json; charset=utf-8",
+         error:       function(xhr,status,error) {
+           bootbox.alert(xhr.responseText);
+         },
          success:     function(data,status,xhr){
            form[0].reset();
            $('#users').dataTable().api().ajax.reload();

Finally, I fleshed out the userEdit function by copying the body of the userPost function. The only difference here is in the url value used by the jQuery ajax function.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@@ -129,7 +133,21 @@
        });
      }
      function userEdit() {
-       alert('userEdit');
+       var form = $('form#add-user');
+       var json = FormToJson(form);
+       $.ajax({
+         type:        "POST",
+         url:         "webapi/myresource/user/edit",
+         data:        JSON.stringify(json),
+         contentType: "application/json; charset=utf-8",
+         error:       function(xhr,status,error) {
+           bootbox.alert(xhr.responseText);
+         },
+         success:     function(data,status,xhr){
+           form[0].reset();
+           $('#users').dataTable().api().ajax.reload();
+         }
+       });
      }
      $('button#user-post').click(userPost);
      $('#add-user-modal').on('shown.bs.modal',function(e){

The current source for jersey-gson is available on github.

23 Oct: DataTables Column Render
07 Jun: Bootstrap Modals and Selenium