From 4cbdbf6625f9f8e93f0b113903774e98a16dc1ca Mon Sep 17 00:00:00 2001
From: Austin King <aust.a.king@gmail.com>
Date: Sat, 13 Jul 2019 14:36:15 -0700
Subject: [PATCH] Deleting Character Now Updates DOM - Issue #203  - Fixed
 back-end response to AJAX request  - jQuery now removes card from UI on
 success

---
 server/characters/character_routes.py         |  4 +-
 server/static/character_select.js             | 39 +++++++------------
 .../characters/character_select.html          |  4 +-
 3 files changed, 19 insertions(+), 28 deletions(-)

diff --git a/server/characters/character_routes.py b/server/characters/character_routes.py
index fa1cf40..4f0019b 100644
--- a/server/characters/character_routes.py
+++ b/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,
diff --git a/server/static/character_select.js b/server/static/character_select.js
index 55ecf26..46b8c65 100644
--- a/server/static/character_select.js
+++ b/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();
+      }
+    });
+  }
 })();
\ No newline at end of file
diff --git a/server/templates/characters/character_select.html b/server/templates/characters/character_select.html
index 8d12938..55ebfee 100644
--- a/server/templates/characters/character_select.html
+++ b/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>