From c6a6e97dc62aae1b3d5442d90dabd44fc0477930 Mon Sep 17 00:00:00 2001
From: Dwight Shih <dshih@dwightshih.com>
Date: Sat, 27 Jun 2015 16:50:15 -0400
Subject: [PATCH 1/2] Update README.md to include latest blog post

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 6a56d79..0b10722 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,7 @@ mvn test -Dbrowser=chrome
 
 Read about the project (from most recent to oldest):
 
+1. [jQuery Ajax and Selenium](http://ideoplex.com/2015/06/21/jquery-ajax-and-selenium/)
 1. [DataTables and Selenium](http://ideoplex.com/2015/06/14/datatables-and-selenium/)
 1. [Bootstrap Modals and Selenium](http://ideoplex.com/2015/06/07/bootstrap-modals-and-selenium/)
 1. [DataTables ajax error handling](http://ideoplex.com/2014/11/16/datatables-ajax-error-handling/)

From e3f850c2de23393c60ec98db69621a83a5c8198c Mon Sep 17 00:00:00 2001
From: Dwight Shih <dshih@dwightshih.com>
Date: Sun, 12 Jul 2015 15:19:01 -0400
Subject: [PATCH 2/2] Update application to add and edit the local DataTables
 data set rather than reloading the full data set from the backend.

---
 README.md                  |  5 ++++-
 pom.xml                    |  2 +-
 src/main/webapp/index.html | 17 ++++++++++++-----
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 0b10722..96bc7ea 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,9 @@
 jersey-gson
 ===========
 
-Sample java web application with jersey and gson that displays a list of users in a [Datatables](http://datatables.net/) table. The application retrieves the users via Datatables ajax.
+Sample java web application with jersey and gson that displays a list of users in a [Datatables](http://datatables.net/) table.
+The application retrieves the users via Datatables ajax.
+User edits are submitted to the server and successful response is applied to the local data set in the browser.
 
 Users can be added via a [Bootstrap](http://getbootstrap.com/) Modal dialog. Users are kept in memory and are not persisted.
 
@@ -27,6 +29,7 @@ mvn test -Dbrowser=chrome
 
 Read about the project (from most recent to oldest):
 
+1. [DataTables edit Locally](http://ideoplex.com/2015/07/12/datatables-edit-locally/)
 1. [jQuery Ajax and Selenium](http://ideoplex.com/2015/06/21/jquery-ajax-and-selenium/)
 1. [DataTables and Selenium](http://ideoplex.com/2015/06/14/datatables-and-selenium/)
 1. [Bootstrap Modals and Selenium](http://ideoplex.com/2015/06/07/bootstrap-modals-and-selenium/)
diff --git a/pom.xml b/pom.xml
index 3ab2b84..318325d 100644
--- a/pom.xml
+++ b/pom.xml
@@ -57,7 +57,7 @@
                 <systemPropertyVariables>
                   <baseurl>http://localhost:8080/</baseurl>
                   <browser>firefox</browser>
-                  <waitajax>no</waitajax>
+                  <waitajax>on</waitajax>
                 </systemPropertyVariables>
               </configuration>
             </plugin>
diff --git a/src/main/webapp/index.html b/src/main/webapp/index.html
index 4cbbd99..fe25daa 100644
--- a/src/main/webapp/index.html
+++ b/src/main/webapp/index.html
@@ -77,7 +77,7 @@ <h4 class="modal-title">Add User</h4>
                 <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>
+		    <button type="button" class="btn" data-dismiss="modal" id="cancel-post">Cancel</button>
                   </p>
                 </div>
 	      </form>
@@ -94,7 +94,7 @@ <h4 class="modal-title">Add User</h4>
        userMap = userMap + window.location.search;
      }
      $(document).ready(function() {
-       $('#users').dataTable({
+       $('#users').DataTable({
          "ajax":  userMap,
          "columns": [
            { "data": "email" },
@@ -104,7 +104,7 @@ <h4 class="modal-title">Add User</h4>
              "orderable": false,
              "searchable": false,
              "render": function(data,type,row,meta) {
-               var a = '<a onclick="setUserEdit(\''+row.email+'\',\'' + row.givenName + '\',\'' + row.surname + '\')"><i class="fa fa-edit"></i></a>';
+               var a = '<a onclick="setUserEdit.call(this,\''+row.email+'\',\'' + row.givenName + '\',\'' + row.surname + '\')"><i class="fa fa-edit"></i></a>';
                return a;
              }
            }
@@ -132,7 +132,7 @@ <h4 class="modal-title">Add User</h4>
          },
          success:     function(data,status,xhr){
            form[0].reset();
-           $('#users').dataTable().api().ajax.reload();
+           $('#users').DataTable().row.add(JSON.parse(data)).draw(false);
          }
        });
      }
@@ -146,14 +146,17 @@ <h4 class="modal-title">Add User</h4>
          contentType: "application/json; charset=utf-8",
          error:       function(xhr,status,error) {
            bootbox.alert(xhr.responseText);
+           $('#users tbody tr.selected').removeClass('selected');
          },
          success:     function(data,status,xhr){
            form[0].reset();
-           $('#users').dataTable().api().ajax.reload();
+           $('#users').DataTable().row('.selected').data(JSON.parse(data)).draw(false);
+           $('#users tbody tr.selected').removeClass('selected');
          }
        });
      }
      $('button#user-post').click(userPost);
+     $('button#cancel-post').click(cancelPost);
      $('#add-user-modal').on('shown.bs.modal',function(e){
        if ( modeAdd ) {
          $('#add-user-email').focus();
@@ -162,6 +165,7 @@ <h4 class="modal-title">Add User</h4>
        }
      });
      function setUserEdit(email, givenName, surname ) {
+       $(this).closest('tr').addClass('selected');
        var form = $('form#add-user')[0];
        form.reset();
        form.elements['email'].value = email;
@@ -180,6 +184,9 @@ <h4 class="modal-title">Add User</h4>
        $('#user-post').bind('click',userPost);
        $('#add-user-modal').modal('show');
      }
+     function cancelPost() {
+       $('#users tbody tr.selected').removeClass('selected');
+     }
     </script>
   </body>
 </html>