Abstracted jquery code to load a modal form

- static/scripts/modal_form.js
- bindModalForm function takes care of the mechanics

InvenTree/part/templates/part/index.html

@@ -32,56 +32,12 @@
 
 {% block javascript %}
 
+<script type='text/javascript' src="{% static 'script/modal_form.js' %}"></script>
+
 <script type="text/javascript">
 $(document).ready(function () {
 
-    $(".js-create-cat").click(function () {
+    bindModalForm('#modal-cat', '.js-create-cat', "{% url 'category-create' %}", {category: 1});
-        $.ajax({
-            url: '/part/category/new/',
-            type: 'get',
-            dataType: 'json',
-            beforeSend: function () {
-                $("#modal-cat").modal("show");
-            },
-            success: function (data) {
-                if (data.html_form) {
-                    $("#modal-cat .modal-content").html(data.html_form);
-                }
-                else {
-                    alert('JSON response missing form data');
-                    $("#modal-cat").modal("hide");
-                }
-            },
-            error: function (xhr, ajaxOptions, thrownError) {
-                alert("Error requesting form data:\n" + thrownError);
-                $("#modal-cat").modal("hide");
-            }
-        });
-    });
-
-    $("#modal-cat").on("submit", ".js-modal-form", function () {
-      var form = $(this);
-
-      $.ajax({
-          url: form.attr('action'),
-          data: form.serialize(),
-          type: form.attr('method'),
-          dataType: 'json',
-          success: function (data) {
-              if (data.html_form) {
-                  $("#modal-cat .modal-content").html(data.html_form);
-              }
-              else {
-                  alert('No form data!');
-              }
-          },
-          error: function (xhr, ajaxOptions, thrownError) {
-              alert("Error submitting form data:\n" + thrownError);
-          }
-      });
-
-      return false;
-    });
 });
 </script>
 

InvenTree/static/script/modal_form.js

@@ -0,0 +1,59 @@
+/* Bind a button to launch a modal form and handle AJAX requests */
+function bindModalForm(modal, button, url, data) {
+    $(button).click(function () {
+        $.ajax({
+            url: url,       // Where to request the data from
+            type: 'get',    // GET request
+            data: data,     // Any additional context data (e.g. initial values)
+            dataType: 'json',
+            beforeSend: function() {
+                $(modal).modal('show');
+            },
+            success: function(response) {
+                if (response.html_form) {
+                    var target = modal + ' .modal-content';
+                    $(target).html(response.html_form);
+                } else {
+                    alert('JSON response missing form data');
+                    $(modal).modal('hide');
+                }
+            },
+            error: function (xhr, ajaxOptions, thrownError) {
+                alert('Error requesting form data:\n' + thrownError);
+                $(modal).modal('hide');
+            }
+        });
+    });
+
+    $(modal).on('submit', '.js-modal-form', function() {
+        var form = $(this);
+
+        $.ajax({
+            url: form.attr('action'),
+            data: form.serialize(),
+            type: form.attr('method'),
+            dataType: 'json',
+            success: function (response) {
+                if (response.form_valid) {
+                    alert("Success!");
+                    $(modal).modal('hide');
+                }
+                else if (response.html_form) {
+                    var target = modal + ' .modal-content';
+                    $(target).html(response.html_form);
+                }
+                else {
+                    alert('JSON response missing form data');
+                    $(modal).modal('hide');
+                }
+            },
+            error: function (xhr, ajaxOptions, thrownError) {
+                alert("Error posting form data:\n" + thrownError);
+                $(modal).modal('hide');
+            }
+        });
+
+        // Override the default form submit functionality
+        return false;
+    });
+}