technology

Modal Dialog for Jersey, Gson and DataTables

Today, I will add a modal dialog to add new users.

First, the table presentation is updated to use the appropriate bootstrap table presentation. The base table class defines light padding with horizontal dividers. I add the table-striped class to add zebra-striping and the table-bordered class to add borders on all sides of the table and cells. 

1
2
3
4
5
6
7
8
9
@@ -20,7 +20,7 @@
       <div class="row">
         <div class="col-md-8">
           <h2>DataTable with ajax object feed</h2>
-          <table id="users" class="display">
+          <table id="users" class="table table-striped table-bordered">
             <thead>
               <tr>
                 <th>email</th>

Next, a button to open the new modal dialog and the new modal dialog containing a simple form for user entry. Note that the form input names match the json key names. This will allow us to automate the generation of json from the form. 

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
@@ -31,6 +31,57 @@
           </table>
         </div>
       </div>
+      <div class="row">
+        <div class="col-md-8">
+          <p/>
+          <p>
+            <button data-toggle="modal" href="#add-user-modal" class="btn btn-primary pull-right">Add User</button>
+          </p>
+        </div>
+      </div>
+
+      <!-- -->
+      <div class="modal fade" id="add-user-modal">
+       <div class="modal-dialog modal-md">
+         <div class="modal-content">
+           <div class="modal-header">
+             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+             <h4 class="modal-title">Add User</h4>
+           </div>
+           <div class="modal-body">
+             <form class="form-horizontal row-border" id="add-user">
+                <div class="row">
+                 <div class="form-group">
+                   <label class="col-md-3 control-label">email address</label>
+                   <div class="col-md-6">
+                     <input name="email" class="form-control" type="email" placeholder="user@example.com" id="add-user-email"/>
+                   </div>
+                 </div>
+                </div>
+                <div class="row">
+                  <div class="form-group">
+                   <label class="col-md-3 control-label">Name</label>
+                   <div class="col-md-4">
+                     <label class="sr-only">Given Name</label>
+                     <input name="givenName" class="form-control" type="text" placeholder="Given Name (Mononym)"/>
+                   </div>
+                   <div class="col-md-4">
+                     <label class="sr-only">Surname</label>
+                     <input name="surName" class="form-control" type="text" placeholder="Surname"/>
+                   </div>
+                  </div>
+               </div>
+                <div class="form-actions">
+                  <p>
+                    <button type="submit" class="btn btn-primary" data-dismiss="modal" id="user-post">Submit</button>
+                    <button type="button" class="btn" data-dismiss="modal">Cancel</button>
+                  </p>
+                </div>
+             </form>
+           </div>
+         </div><!-- /.modal-content -->
+       </div><!-- /.modal-dialog -->
+      </div><!-- /.modal -->
     </div>
 
     <script type="text/javascript" class="init">

And finally, some javascript to pull it all together.

  1. A utility function (FormToJson) to extract a JSON object from a form.
  2. A function (userPost) to post the form values to the backend. On success, I reset the form to clear the old values and refresh the table to display the new value.
  3. I attach the userPost function to the user-post button.
  4. And I set the focus to the email form element when the add-user-modal is shown.
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
28
29
30
31
32
33
34
@@ -44,7 +95,32 @@
                   ]
               });
       });
+      function FormToJson(form){
+          var array  = $(form).serializeArray();
+          var json   = {};
+          $.each(array,function(){
+              json[this.name] = this.value || '';
+          });
+          return json;
+      }
+      function userPost() {
+          var form = $('form#add-user');
+          var json = FormToJson(form);
+          $.ajax({
+              type:        "POST",
+              url:         "webapi/myresource/user/post",
+              data:        JSON.stringify(json),
+              contentType: "application/json; charset=utf-8",
+              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){
+          $('#add-user-email').focus();
+      });
     </script>
-        
   </body>
 </html>

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

04 Oct: Jersey, Gson and DataTables
23 Oct: DataTables Column Render