Merge pull request #19 from ideoplex/work

Add/Edit local DataTables data set

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,8 @@ 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/)
 1. [DataTables ajax error handling](http://ideoplex.com/2014/11/16/datatables-ajax-error-handling/)

pom.xml

@@ -57,7 +57,7 @@
                 <systemPropertyVariables>
                   <baseurl>http://localhost:8080/</baseurl>
                   <browser>firefox</browser>
-                  <waitajax>no</waitajax>
+                  <waitajax>on</waitajax>
                 </systemPropertyVariables>
               </configuration>
             </plugin>

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>