Merge pull request #35255 from dimagi/revert-35240-jls/drop-ajax-submit

Revert "Remove dependency on jquery-form"
dimagi · Oct 23, 2024 · 28856ea · 28856ea
2 parents 060e4b7 + bcde9c4
commit 28856ea
Show file tree

Hide file tree

Showing 17 changed files with 116 additions and 109 deletions.
diff --git a/corehq/apps/accounting/static/accounting/js/payment_method_handler.js b/corehq/apps/accounting/static/accounting/js/payment_method_handler.js
@@ -63,11 +63,7 @@ hqDefine('accounting/js/payment_method_handler', [
         self.paymentMethod = ko.observable();
 
         self.submitForm = function () {
-            const $form = $('#' + self.formId);
-            $.ajax({
-                url: $form.attr("action"),
-                data: Object.fromEntries(new FormData($form.get(0))),
-                method: 'POST',
+            $('#' + self.formId).ajaxSubmit({
                 success: self.handleSuccess,
                 error: self.handleGeneralError,
             });
@@ -204,13 +200,10 @@ hqDefine('accounting/js/payment_method_handler', [
         self.removeSavedCard = function () {
             self.isRemovingCard(true);
             self.showConfirmRemoveCard(false);
-            const $form = $('#' + self.formId);
-            let formData = new FormData($form.get(0));
-            formData.set("removeCard", true);
-            $.ajax({
-                url: $form.attr("action"),
-                method: "POST",
-                data: Object.fromEntries(formData),
+            $('#' + self.formId).ajaxSubmit({
+                data: {
+                    removeCard: true,
+                },
                 success: function (response) {
                     self.handleProcessingErrors(response);
                     for (var i = 0; i < self.handlers.length; i++) {

diff --git a/corehq/apps/groups/static/groups/js/group_members.js b/corehq/apps/groups/static/groups/js/group_members.js
@@ -109,21 +109,15 @@ hqDefine("groups/js/group_members", [
                     };
                 _showMembershipUpdating();
                 $(this).find(':button').prop('disabled', true);
-                $.ajax({
-                    url: $(this).attr("action"),
-                    method: "POST",
-                    data: Object.fromEntries(new FormData(this)),
+                $(this).ajaxSubmit({
                     success: outcome(true, "Group membership", "#edit_membership", "Edit Group Membership", _hideMembershipUpdating),
                     error: outcome(false, "Group membership", "#edit_membership", _hideMembershipUpdating),
                 });
                 return false;
             });
             $('#edit-group-settings').submit(function () {
                 $(this).find('.modal-footer :button').disableButton();
-                $.ajax({
-                    url: $(this).attr("action"),
-                    method: "POST",
-                    data: Object.fromEntries(new FormData(this)),
+                $(this).ajaxSubmit({
                     success: outcome(true, "Group settings", "#edit-group-settings", "Edit Settings"),
                     error: outcome(false, "Group settings", "#edit-group-settings"),
                 });
@@ -138,10 +132,7 @@ hqDefine("groups/js/group_members", [
             });
             $('#group-data-form').submit(function () {
                 $(this).find(':button').prop('disabled', true);
-                $.ajax({
-                    url: $(this).attr("action"),
-                    method: "POST",
-                    data: Object.fromEntries(new FormData(this)),
+                $(this).ajaxSubmit({
                     success: outcome(true, "Group data", "#group-data-form", "Edit Group Data"),
                     error: outcome(false, "Group data", "#group-data-form"),
                 });

diff --git a/corehq/apps/hqwebapp/static/hqwebapp/js/bootstrap3/crud_paginated_list.js b/corehq/apps/hqwebapp/static/hqwebapp/js/bootstrap3/crud_paginated_list.js
@@ -57,7 +57,7 @@ hqDefine("hqwebapp/js/bootstrap3/crud_paginated_list", [
         });
 
         self.isPaginatedListEmpty = ko.computed(function () {
-            return self.paginatedList().length === 0;
+            return self.paginatedList().length == 0;
         });
 
         self.isNewListVisible = ko.computed(function () {
@@ -88,14 +88,12 @@ hqDefine("hqwebapp/js/bootstrap3/crud_paginated_list", [
         });
 
         self.allPages = ko.computed(function () {
-            var lastIndex = self.maxPage() + 1;
-            if (self.maxPage() <= 5 || self.currentPage() <= 3) {
-                return _.range(1, Math.min(lastIndex, 6));
-            }
-            if (self.currentPage() >= self.maxPage() - 2) {
-                return _.range(self.maxPage() - 4, lastIndex);
-            }
-            return _.range(self.currentPage() - 2, Math.min(lastIndex, self.currentPage() + 3));
+            var last_ind = self.maxPage() + 1;
+            if (self.maxPage() <= 5 || self.currentPage() <= 3)
+                return _.range(1, Math.min(last_ind, 6));
+            if (self.currentPage() >= self.maxPage() - 2)
+                return _.range(self.maxPage() - 4, last_ind);
+            return _.range(self.currentPage() - 2, Math.min(last_ind, self.currentPage() + 3));
         });
 
         self.utils = {
@@ -145,15 +143,16 @@ hqDefine("hqwebapp/js/bootstrap3/crud_paginated_list", [
         };
 
         self.initCreateForm = function () {
-            const $createForm = $("#create-item-form");
+            var $createForm = $("#create-item-form");
             $createForm.submit(function (e) {
                 e.preventDefault();
-                let formData = new FormData($createForm.get(0));
-                formData.set("action", "create");
-                $.ajax({
-                    method: 'POST',
+                $createForm.ajaxSubmit({
+                    url: "",
+                    type: 'post',
                     dataType: 'json',
-                    data: Object.fromEntries(formData),
+                    data: {
+                        'action': 'create',
+                    },
                     statusCode: self.handleStatusCode,
                     success: function (data) {
                         $createForm[0].reset();
@@ -198,7 +197,7 @@ hqDefine("hqwebapp/js/bootstrap3/crud_paginated_list", [
             self.changePage(1);
         };
 
-        self.deleteItem = function (paginatedItem) {
+        self.deleteItem = function (paginatedItem, event) {
             var pList = self.paginatedList();
             paginatedItem.dismissModals();
             self.paginatedList(_(pList).without(paginatedItem));
@@ -247,10 +246,9 @@ hqDefine("hqwebapp/js/bootstrap3/crud_paginated_list", [
             return null;
         };
 
-        self.initRow = function () {
+        self.initRow = function (rowElems, paginatedItem) {
             // Intended to be overridden with additional initialization for
             // each row in the paginated list.
-            // Arguments: rowElems, paginatedItem
         };
 
         return self;
@@ -298,12 +296,14 @@ hqDefine("hqwebapp/js/bootstrap3/crud_paginated_list", [
             var $updateForm = $(elems).find('.update-item-form');
             if ($updateForm) {
                 $updateForm.submit(function (e) {
-                    let formData = new FormData($updateForm.get(0));
-                    formData.set("action", "update");
                     e.preventDefault();
-                    $.ajax({
-                        method: 'POST',
-                        data: Object.fromEntries(formData),
+                    $updateForm.ajaxSubmit({
+                        url: "",
+                        type: 'post',
+                        dataType: 'json',
+                        data: {
+                            action: 'update',
+                        },
                         success: function (data) {
                             if (data.updatedItem) {
                                 self.dismissModals();

diff --git a/corehq/apps/hqwebapp/static/hqwebapp/js/bootstrap3/email-request.js b/corehq/apps/hqwebapp/static/hqwebapp/js/bootstrap3/email-request.js
@@ -1,6 +1,7 @@
 hqDefine('hqwebapp/js/bootstrap3/email-request', [
     "jquery",
     "knockout",
+    "jquery-form/dist/jquery.form.min",
     "hqwebapp/js/bootstrap3/hq.helpers",
 ], function ($, ko) {
 
@@ -65,15 +66,11 @@ hqDefine('hqwebapp/js/bootstrap3/email-request', [
             } else if (!self.isRequestReportSubmitting) {
                 self.$submitBtn.button('loading');
                 self.cancelBtnEnabled(false);
-                self.reportUrl(location.href);
-                self.isRequestReportSubmitting = true;
-                $.ajax({
-                    method: "POST",
+                self.$formElement.ajaxSubmit({
+                    type: "POST",
                     url: self.$formElement.attr('action'),
-                    data: new FormData(self.$formElement.get(0)),
-                    contentType: false,
-                    processData: false,
-                    enctype: 'multipart/form-data',
+                    beforeSerialize: hqwebappRequestReportBeforeSerialize,
+                    beforeSubmit: hqwebappRequestReportBeforeSubmit,
                     success: hqwebappRequestReportSucccess,
                     error: hqwebappRequestReportError,
                 });
@@ -87,7 +84,7 @@ hqDefine('hqwebapp/js/bootstrap3/email-request', [
 
         self.resetForm = function () {
             self.$formElement.find("button[type='submit']").button('reset');
-            self.$formElement.get(0).reset();
+            self.$formElement.resetForm();
             self.cancelBtnEnabled(true);
             self.$submitBtn.button('reset');
             resetErrors();
@@ -109,6 +106,14 @@ hqDefine('hqwebapp/js/bootstrap3/email-request', [
             self.recipientsErrorMessage(null);
         }
 
+        function hqwebappRequestReportBeforeSerialize() {
+            self.reportUrl(location.href);
+        }
+
+        function hqwebappRequestReportBeforeSubmit() {
+            self.isRequestReportSubmitting = true;
+        }
+
         function hqwebappRequestReportSucccess() {
             self.isRequestReportSubmitting = false;
             self.isReportSent = true;

diff --git a/corehq/apps/hqwebapp/static/hqwebapp/js/bootstrap5/crud_paginated_list.js b/corehq/apps/hqwebapp/static/hqwebapp/js/bootstrap5/crud_paginated_list.js
@@ -59,7 +59,7 @@ hqDefine("hqwebapp/js/bootstrap5/crud_paginated_list", [
         });
 
         self.isPaginatedListEmpty = ko.computed(function () {
-            return self.paginatedList().length === 0;
+            return self.paginatedList().length == 0;
         });
 
         self.isNewListVisible = ko.computed(function () {
@@ -90,14 +90,12 @@ hqDefine("hqwebapp/js/bootstrap5/crud_paginated_list", [
         });
 
         self.allPages = ko.computed(function () {
-            var lastIndex = self.maxPage() + 1;
-            if (self.maxPage() <= 5 || self.currentPage() <= 3) {
-                return _.range(1, Math.min(lastIndex, 6));
-            }
-            if (self.currentPage() >= self.maxPage() - 2) {
-                return _.range(self.maxPage() - 4, lastIndex);
-            }
-            return _.range(self.currentPage() - 2, Math.min(lastIndex, self.currentPage() + 3));
+            var last_ind = self.maxPage() + 1;
+            if (self.maxPage() <= 5 || self.currentPage() <= 3)
+                return _.range(1, Math.min(last_ind, 6));
+            if (self.currentPage() >= self.maxPage() - 2)
+                return _.range(self.maxPage() - 4, last_ind);
+            return _.range(self.currentPage() - 2, Math.min(last_ind, self.currentPage() + 3));
         });
 
         self.utils = {
@@ -147,15 +145,16 @@ hqDefine("hqwebapp/js/bootstrap5/crud_paginated_list", [
         };
 
         self.initCreateForm = function () {
-            const $createForm = $("#create-item-form");
+            var $createForm = $("#create-item-form");
             $createForm.submit(function (e) {
                 e.preventDefault();
-                let formData = new FormData($createForm.get(0));
-                formData.set("action", "create");
-                $.ajax({
-                    method: 'POST',
+                $createForm.ajaxSubmit({
+                    url: "",
+                    type: 'post',
                     dataType: 'json',
-                    data: Object.fromEntries(formData),
+                    data: {
+                        'action': 'create',
+                    },
                     statusCode: self.handleStatusCode,
                     success: function (data) {
                         $createForm[0].reset();
@@ -251,10 +250,9 @@ hqDefine("hqwebapp/js/bootstrap5/crud_paginated_list", [
             return null;
         };
 
-        self.initRow = function () {
+        self.initRow = function (rowElems, paginatedItem) {
             // Intended to be overridden with additional initialization for
             // each row in the paginated list.
-            // Arguments: rowElems, paginatedItem
         };
 
         return self;
@@ -296,12 +294,14 @@ hqDefine("hqwebapp/js/bootstrap5/crud_paginated_list", [
             var $updateForm = $(elems).find('.update-item-form');
             if ($updateForm) {
                 $updateForm.submit(function (e) {
-                    let formData = new FormData($updateForm.get(0));
-                    formData.set("action", "update");
                     e.preventDefault();
-                    $.ajax({
-                        method: 'POST',
-                        data: Object.fromEntries(formData),
+                    $updateForm.ajaxSubmit({
+                        url: "",
+                        type: 'post',
+                        dataType: 'json',
+                        data: {
+                            action: 'update',
+                        },
                         success: function (data) {
                             if (data.updatedItem) {
                                 self.dismissModals();

diff --git a/corehq/apps/hqwebapp/static/hqwebapp/js/bootstrap5/email-request.js b/corehq/apps/hqwebapp/static/hqwebapp/js/bootstrap5/email-request.js
@@ -2,6 +2,7 @@ hqDefine('hqwebapp/js/bootstrap5/email-request', [
     "jquery",
     "knockout",
     "es6!hqwebapp/js/bootstrap5_loader",
+    "jquery-form/dist/jquery.form.min",
     "hqwebapp/js/bootstrap5/hq.helpers",
 ], function ($, ko, bootstrap) {
     'use strict';
@@ -68,15 +69,11 @@ hqDefine('hqwebapp/js/bootstrap5/email-request', [
             } else if (!self.isRequestReportSubmitting) {
                 self.$submitBtn.changeButtonState('loading');
                 self.cancelBtnEnabled(false);
-                self.reportUrl(location.href);
-                self.isRequestReportSubmitting = true;
-                $.ajax({
-                    method: "POST",
+                self.$formElement.ajaxSubmit({
+                    type: "POST",
                     url: self.$formElement.attr('action'),
-                    data: new FormData(self.$formElement.get(0)),
-                    contentType: false,
-                    processData: false,
-                    enctype: 'multipart/form-data',
+                    beforeSerialize: hqwebappRequestReportBeforeSerialize,
+                    beforeSubmit: hqwebappRequestReportBeforeSubmit,
                     success: hqwebappRequestReportSucccess,
                     error: hqwebappRequestReportError,
                 });
@@ -90,7 +87,7 @@ hqDefine('hqwebapp/js/bootstrap5/email-request', [
 
         self.resetForm = function () {
             self.$formElement.find("button[type='submit']").changeButtonState('reset');
-            self.$formElement.get(0).reset();
+            self.$formElement.resetForm();
             self.cancelBtnEnabled(true);
             self.$submitBtn.changeButtonState('reset');
             resetErrors();
@@ -112,6 +109,14 @@ hqDefine('hqwebapp/js/bootstrap5/email-request', [
             self.recipientsErrorMessage(null);
         }
 
+        function hqwebappRequestReportBeforeSerialize() {
+            self.reportUrl(location.href);
+        }
+
+        function hqwebappRequestReportBeforeSubmit() {
+            self.isRequestReportSubmitting = true;
+        }
+
         function hqwebappRequestReportSucccess() {
             self.isRequestReportSubmitting = false;
             self.isReportSent = true;

diff --git a/corehq/apps/hqwebapp/templates/hqwebapp/includes/core_libraries.html b/corehq/apps/hqwebapp/templates/hqwebapp/includes/core_libraries.html
@@ -20,6 +20,7 @@
 
 <script src="{% static 'jquery/dist/jquery.min.js' %}"></script>
 {% compress js %}
+    <script src="{% static 'jquery-form/dist/jquery.form.min.js' %}"></script>
     <script src="{% static 'jquery.cookie/jquery.cookie.js' %}"></script>
     <script src="{% static 'jquery.rmi/jquery.rmi.js' %}"></script>
 {% endcompress %}

diff --git a/corehq/apps/hqwebapp/templatetags/tests/rendered/javascript_libraries_hq.html b/corehq/apps/hqwebapp/templatetags/tests/rendered/javascript_libraries_hq.html
@@ -5,6 +5,7 @@
 <script src="{% static 'hqwebapp/js/lib/modernizr.js' %}"></script>
 
 <script src="{% static 'jquery/dist/jquery.min.js' %}"></script>
+<script src="{% static 'jquery-form/dist/jquery.form.min.js' %}"></script>
 <script src="{% static 'jquery.cookie/jquery.cookie.js' %}"></script>
 <script src="{% static 'jquery.rmi/jquery.rmi.js' %}"></script>
 <script src="{% static 'bootstrap/dist/js/bootstrap.min.js' %}"></script>

diff --git a/corehq/apps/hqwebapp/templatetags/tests/rendered/javascript_libraries_hq_bootstrap5.html b/corehq/apps/hqwebapp/templatetags/tests/rendered/javascript_libraries_hq_bootstrap5.html
@@ -5,6 +5,7 @@
 <script src="{% static 'hqwebapp/js/lib/modernizr.js' %}"></script>
 
 <script src="{% static 'jquery/dist/jquery.min.js' %}"></script>
+<script src="{% static 'jquery-form/dist/jquery.form.min.js' %}"></script>
 <script src="{% static 'jquery.cookie/jquery.cookie.js' %}"></script>
 <script src="{% static 'jquery.rmi/jquery.rmi.js' %}"></script>
 <script src="{% static 'bootstrap5/dist/js/bootstrap.bundle.min.js' %}"></script>

diff --git a/corehq/apps/hqwebapp/templatetags/tests/rendered/javascript_libraries_jquery_only.html b/corehq/apps/hqwebapp/templatetags/tests/rendered/javascript_libraries_jquery_only.html
@@ -1,5 +1,6 @@
 {% load hq_shared_tags %}
 <script src="{% static 'jquery/dist/jquery.min.js' %}"></script>
+<script src="{% static 'jquery-form/dist/jquery.form.min.js' %}"></script>
 <script src="{% static 'jquery.cookie/jquery.cookie.js' %}"></script>
 <script src="{% static 'jquery.rmi/jquery.rmi.js' %}"></script>
 <script src="{% static 'bootstrap/dist/js/bootstrap.min.js' %}"></script>