Use ajax for form requests too.

assets/js/app.js

@@ -37,6 +37,7 @@ require( 'datatables.net-buttons/js/buttons.print.js' );
 require( 'datatables.net-fixedheader-bs4' );
 require( 'datatables.net-select-bs4' );
 require('bootstrap-select');
+require('jquery-form');
 
 //require('bootstrap-treeview/src/js/bootstrap-treeview');
 

assets/ts_src/ajax_ui.ts

@@ -75,6 +75,7 @@ class AjaxUI {
     {
         console.info("AjaxUI started!");
         this.registerLinks();
+        this.registerForm();
     }
 
     /**
@@ -95,6 +96,26 @@ class AjaxUI {
         console.debug('Links registered!');
     }
 
+    /**
+     * Register all forms for loading via ajax.
+     */
+    protected registerForm()
+    {
+        let options : JQueryFormOptions = {
+            success: this.onAjaxComplete,
+            beforeSubmit: function (arr, $form, options) : boolean {
+                //When data-with-progbar is specified, then show progressbar.
+                if($form.data("with-progbar") != undefined) {
+                    ajaxUI.showProgressBar();
+                }
+                return true;
+            }
+        }
+        $('form').not('[data-no-ajax]').ajaxForm(options);
+
+        console.debug('Forms registered!');
+    }
+
 
     public showProgressBar()
     {
@@ -204,6 +225,7 @@ class AjaxUI {
 
         //Do things on the new dom
         ajaxUI.registerLinks();
+        ajaxUI.registerForm();
 
 
     }

assets/tsconfig.json

@@ -4,7 +4,7 @@
     "target": "es5",
     "sourceMap": true,
     "typeRoots": ["../node_modules"],
-    "types": ["jquery", "js-cookie", "bootstrap"]
+    "types": ["jquery", "js-cookie", "bootstrap", "jquery.form"]
   },
   "exclude": [
     "node_modules"