Issue #203 Fixed: Deleting Character Now Updates DOM

server/characters/character_routes.py

@@ -6,7 +6,7 @@
 import pdb
 from ..security import security
 import pdb
-from flask import Blueprint, render_template, request, redirect, session, escape, flash
+from flask import Blueprint, render_template, request, redirect, session, escape, flash, jsonify
 
 character_blueprint = Blueprint('character_blueprint', __name__, template_folder='templates')
 
@@ -76,7 +76,7 @@ def delete_character(pk_id):
         return redirect("/show/character")
     characters.delete_character(pk_id_int)
     flash("Deleted Character successfully.")
-    return redirect("/character/mine")
+    return jsonify(success=True, id=pk_id_int)
 
 """ Endpoint for updating an existing character. Attempting to emulate a
 RESTful API endpoint where the route is the same to add new, update existing,

server/static/character_select.js

@@ -1,30 +1,21 @@
-
 //This file uses AJAX to reach out to the github API to retrieve and display news on recent development.
 (function(){
-    $(document).ready(initialize)
-
-    function initialize(){
-        console.log("Starting character select javascript.");
-
-        $(".deleteButton").click(deleteCharacter); 
-
-        //$("#saveCharacterButton").click(saveCharacter);
-
-        console.log("done initializing character select javascript.");
-    }
+  $(document).ready(initialize)
 
-    function deleteCharacter(){
-        var pk_id = $(this).attr("pk_id");
-        $.ajax({
-            url:'/character/modify/' + pk_id,
-            type:'DELETE',
-            success: function(result){
-                //notify of success
-                console.log("Deleted Character with pk_id " + pk_id);
-                location.reload();
-            }
-        });
-    }
+  function initialize(){
+    $(".delete-button").click(deleteCharacter);
+  }
 
+  function deleteCharacter(){
+    var pk_id = $(this).attr("pk_id");
+    var url = '/character/modify/' + pk_id;
 
+    $.ajax(url, {
+      method:'DELETE',
+      success: function(result){
+          console.log("Deleted character with pk_id " + result.id);
+          $("#" + result.id).remove();
+      }
+    });
+  }
 })();

server/templates/characters/character_select.html

@@ -17,7 +17,7 @@ <h1> Your Characters </h1>
 					</div>
 				</div>
 				{% for character in characters %}
-				<div class="col-lg-3">
+				<div class="col-lg-3" id="{{character['pk_id']}}">
 					<div class="card">
 						<div class="card-header"><h3> {{character.name}} </h3> </div>
 						<div class="card-body">
@@ -35,7 +35,7 @@ <h1> Your Characters </h1>
 								</form>
 							</div>
 							<div class="row">
-									<input class="btn btn-danger deleteButton" type="button" value="Delete Character" pk_id="{{character['pk_id']}}" name="deletechar">
+									<input class="btn btn-danger delete-button" type="button" value="Delete Character" pk_id="{{character['pk_id']}}" name="deletechar">
 							</div>
 						</div>
 					</div>