3 - Handle Ajax in Django with JsonResponse

anuraganik · Oct 6, 2017 · d6acdc2 · d6acdc2
1 parent 1d4d7ca
commit d6acdc2
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 4 deletions.
diff --git a/src/carts/views.py b/src/carts/views.py
@@ -1,3 +1,4 @@
+from django.http import JsonResponse
 from django.shortcuts import render, redirect
 
 
@@ -19,8 +20,7 @@ def cart_home(request):
 
 def cart_update(request):
     product_id = request.POST.get('product_id')
-    if request.is_ajax():
-        print("Ajax request")
+
     if product_id is not None:
         try:
             product_obj = Product.objects.get(id=product_id)
@@ -30,10 +30,19 @@ def cart_update(request):
         cart_obj, new_obj = Cart.objects.new_or_get(request)
         if product_obj in cart_obj.products.all():
             cart_obj.products.remove(product_obj)
+            added = False
         else:
             cart_obj.products.add(product_obj) # cart_obj.products.add(product_id)
+            added = True
         request.session['cart_items'] = cart_obj.products.count()
         # return redirect(product_obj.get_absolute_url())
+        if request.is_ajax(): # Asynchronous JavaScript And XML / JSON
+            print("Ajax request")
+            json_data = {
+                "added": added,
+                "removed": not added,
+            }
+            return JsonResponse(json_data)
     return redirect("cart:home")
 
 

diff --git a/src/db.sqlite3 b/src/db.sqlite3
diff --git a/src/products/templates/products/snippets/update-cart.html b/src/products/templates/products/snippets/update-cart.html
@@ -4,10 +4,12 @@
     {% if in_cart %}
         <button type='submit' class='btn btn-link btn-sm' style="padding:0px;cursor: pointer;">Remove?</button>
     {% else %}
+        <span class='submit-span'>
         {% if product in cart.products.all %}
             In cart <button type='submit' class='btn btn-link'>Remove?</button>
         {% else %}
             <button type='submit'  class='btn btn-success'>Add to cart</button>
         {% endif %}
+        </span>
     {% endif %}
 </form>
diff --git a/src/templates/base.html b/src/templates/base.html
@@ -36,8 +36,12 @@
                   method: httpMethod,
                   data: formData,
                   success: function(data){
-                    console.log("success")
-                    console.log(data)
+                    var submitSpan = thisForm.find(".submit-span")
+                    if (data.added){
+                      submitSpan.html("In cart <button type='submit' class='btn btn-link'>Remove?</button>")
+                    } else {
+                      submitSpan.html("<button type='submit'  class='btn btn-success'>Add to cart</button>")
+                     }
                   },
                   error: function(errorData){
                     console.log("error")