2 - Ajax-ify a Form

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

Hide file tree

Showing 5 changed files with 41 additions and 3 deletions.
diff --git a/src/carts/views.py b/src/carts/views.py
@@ -19,6 +19,8 @@ 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)

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
@@ -1,4 +1,4 @@
-<form method='POST' action='{% url "cart:update" %}' class="form"> {% csrf_token %}
+<form class='form-product-ajax' method='POST' action='{% url "cart:update" %}' class="form"> {% csrf_token %}
     <input type='hidden' name='product_id' value='{{ product.id }}' />
 
     {% if in_cart %}

diff --git a/src/templates/base.html b/src/templates/base.html
@@ -18,5 +18,40 @@
 
 
         {% include 'base/js.html' %}
+
+        <script>
+          $(document).ready(function(){
+            var productForm = $(".form-product-ajax") // #form-product-ajax
+
+            productForm.submit(function(event){
+                event.preventDefault();
+                console.log("Form is not sending")
+                var thisForm = $(this)
+                var actionEndpoint = thisForm.attr("action");
+                var httpMethod = thisForm.attr("method");
+                var formData = thisForm.serialize();
+
+                $.ajax({
+                  url: actionEndpoint,
+                  method: httpMethod,
+                  data: formData,
+                  success: function(data){
+                    console.log("success")
+                    console.log(data)
+                  },
+                  error: function(errorData){
+                    console.log("error")
+                    console.log(errorData)
+                  }
+                })
+
+            })
+
+
+
+
+          })
+
+        </script>
     </body>
   </html>
diff --git a/src/templates/base/js.html b/src/templates/base/js.html
@@ -1,6 +1,7 @@
 {% load static %}
 <!-- Optional JavaScript -->
-<!-- jQuery first, then Popper.js, then Bootstrap JS -->
-<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+<!-- jQuery first, then Popper.js, then Bootstrap JS
+slim is missing ajax -->
+<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>