NEW Wait for promises before submitting forms

silverstripe · Jun 26, 2024 · 21713fe · 21713fe
1 parent 49d5750
commit 21713fe
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 62 deletions.
diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js
diff --git a/client/src/legacy/LeftAndMain.js b/client/src/legacy/LeftAndMain.js
@@ -1,7 +1,7 @@
 /**
  * File: LeftAndMain.js
  */
-import $ from 'jquery';
+import $, { event } from 'jquery';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import IframeDialog from 'components/IframeDialog/IframeDialog';
@@ -460,77 +460,93 @@ $.entwine('ss', function($) {
       // default to first button if none given - simulates browser behaviour
       if(!button) button = this.find('.btn-toolbar :submit:first');
 
-      form.trigger('beforesubmitform');
-      this.trigger('submitform', {form: form, button: button});
+      var beforeSubmitFormEventData = {
+        // array of promises that must resolve(true) before the form is submitted
+        promises: [],
+        // callbacks that are called on ajax success after submitted the form
+        onAjaxSuccessCallbacks: [],
+      };
+      form.trigger('beforesubmitform', beforeSubmitFormEventData);
 
-      // set button to "submitting" state
-      $(button).addClass('btn--loading loading');
-      $(button).prop('disabled', true);
+      Promise.all(beforeSubmitFormEventData.promises).then(function(results) {
 
-      if($(button).is('button')) {
-        $(button).data('original-text', $(button).text());
+        for (const result of results) {
+          if (!result) {
+            return false;
+          }
+        }
 
-        $(button).append($(
-          '<div class="btn__loading-icon">'+
-            '<span class="btn__circle btn__circle--1"></span>'+
-            '<span class="btn__circle btn__circle--2"></span>'+
-            '<span class="btn__circle btn__circle--3"></span>'+
-          '</div>'));
+        self.trigger('submitform', {form: form, button: button});
 
-        $(button).css($(button).outerWidth() + 'px');
-      }
+        // set button to "submitting" state
+        $(button).addClass('btn--loading loading');
+        $(button).prop('disabled', true);
 
-      // validate if required
-      var validationResult = form.validate();
+        if($(button).is('button')) {
 
-      var clearButton = function() {
-        $(button).removeClass('btn--loading loading');
-        $(button).prop('disabled', false);
-        $(button).find('.btn__loading-icon').remove();
-        $(button).css('width', 'auto');
-        $(button).text($(button).data('original-text'));
-      }
+          $(button).append($(
+            '<div class="btn__loading-icon">'+
+              '<span class="btn__circle btn__circle--1"></span>'+
+              '<span class="btn__circle btn__circle--2"></span>'+
+              '<span class="btn__circle btn__circle--3"></span>'+
+            '</div>'));
 
-      if(typeof validationResult!=='undefined' && !validationResult) {
-        statusMessage("Validation failed.", "bad");
-        clearButton();
-      }
+          $(button).css($(button).outerWidth() + 'px');
+        }
 
-      // get all data from the form
-      var formData = form.serializeArray();
-      // add button action
-      formData.push({name: $(button).attr('name'), value:'1'});
-      // Artificial HTTP referer, IE doesn't submit them via ajax.
-      // Also rewrites anchors to their page counterparts, which is important
-      // as automatic browser ajax response redirects seem to discard the hash/fragment.
-      formData.push({ name: 'BackURL', value: document.URL.replace(/\/$/, '') });
-
-      // Save tab selections so we can restore them later
-      this.saveTabState(window.ss.tabStateUrl(), false);
-
-      // Standard Pjax behaviour is to replace the submitted form with new content.
-      // The returned view isn't always decided upon when the request
-      // is fired, so the server might decide to change it based on its own logic,
-      // sending back different `X-Pjax` headers and content
-      jQuery.ajax(jQuery.extend({
-        headers: {"X-Pjax" : "CurrentForm,Breadcrumbs,ValidationResult"},
-        url: form.attr('action'),
-        data: formData,
-        type: 'POST',
-        complete: function() {
-          clearButton()
-        },
-        success: function(data, status, xhr) {
-          clearButton();
-          form.removeClass('changed');
-          if(callback) callback(data, status, xhr);
+        // validate if required
+        var validationResult = form.validate();
 
-          var newContentEls = self.handleAjaxResponse(data, status, xhr);
-          if(!newContentEls) return;
+        var clearButton = function() {
+          $(button).removeClass('btn--loading loading');
+          $(button).prop('disabled', false);
+          $(button).find('.btn__loading-icon').remove();
+          $(button).css('width', 'auto');
+          $(button).text($(button).data('original-text'));
+        }
 
-          newContentEls.filter('form').trigger('aftersubmitform', {status: status, xhr: xhr, formData: formData});
+        if(typeof validationResult!=='undefined' && !validationResult) {
+          statusMessage("Validation failed.", "bad");
+          clearButton();
         }
-      }, ajaxOptions));
+
+        // get all data from the form
+        var formData = form.serializeArray();
+        // add button action
+        formData.push({name: $(button).attr('name'), value:'1'});
+        // Artificial HTTP referer, IE doesn't submit them via ajax.
+        // Also rewrites anchors to their page counterparts, which is important
+        // as automatic browser ajax response redirects seem to discard the hash/fragment.
+        formData.push({ name: 'BackURL', value: document.URL.replace(/\/$/, '') });
+
+        // Save tab selections so we can restore them later
+        self.saveTabState(window.ss.tabStateUrl(), false);
+
+        // Standard Pjax behaviour is to replace the submitted form with new content.
+        // The returned view isn't always decided upon when the request
+        // is fired, so the server might decide to change it based on its own logic,
+        // sending back different `X-Pjax` headers and content
+        jQuery.ajax(jQuery.extend({
+          headers: {"X-Pjax" : "CurrentForm,Breadcrumbs,ValidationResult"},
+          url: form.attr('action'),
+          data: formData,
+          type: 'POST',
+          complete: function() {
+            clearButton()
+          },
+          success: function(data, status, xhr) {
+            beforeSubmitFormEventData.onAjaxSuccessCallbacks.forEach(fn => fn());
+            clearButton();
+            form.removeClass('changed');
+            if(callback) callback(data, status, xhr);
+
+            var newContentEls = self.handleAjaxResponse(data, status, xhr);
+            if(!newContentEls) return;
+
+            newContentEls.filter('form').trigger('aftersubmitform', {status: status, xhr: xhr, formData: formData});
+          }
+        }, ajaxOptions));
+      });
 
       return false;
     },