QfqForm.js: Form refresh is now known as form update. Form updates receive...

QfqForm.js: Form refresh is now known as form update. Form updates receive more elaborate response from server.

javascript/src/QfqForm.js

@@ -33,7 +33,7 @@ if (!QfqNS) {
         this.getNewButton().click(this.handleNewClick.bind(this));
         this.getDeleteButton().click(this.handleDeleteClick.bind(this));
 
-        this.setupRefreshHandler();
+        this.setupFormUpdateHandler();
     };
 
     n.QfqForm.prototype.setBsTabs = function (bsTabs) {
@@ -61,11 +61,11 @@ if (!QfqNS) {
         }
     };
 
-    n.QfqForm.prototype.setupRefreshHandler = function () {
-        $('input[data-load]').on('change', this.refreshHandler.bind(this));
+    n.QfqForm.prototype.setupFormUpdateHandler = function () {
+        $('input[data-load]').on('change', this.formUpdateHandler.bind(this));
     };
 
-    n.QfqForm.prototype.refreshHandler = function () {
+    n.QfqForm.prototype.formUpdateHandler = function () {
         var that = this;
         $.post(this.dataRefreshUrl, this.form.serialize(), "json")
             .fail(function (jqXHR, textStatus, errorThrown) {
@@ -73,11 +73,36 @@ if (!QfqNS) {
                 alert.show();
             })
             .done(function (data) {
-                this.applyElementConfiguration(data);
+                this.handleFormUpdate(data);
             }.bind(that));
 
     };
 
+    n.QfqForm.prototype.handleFormUpdate = function (data) {
+        if (!data.status) {
+            throw new Error("Expected 'status' attribute to be present.");
+        }
+
+        if (data.status === "error") {
+            var alert = new QfqNS.Alert("Error while updating form:<br>" + (data.message ? data.message : "No reason" +
+                " given"), "error");
+            alert.show();
+            return;
+        }
+
+        if (data.status === "success") {
+            if (!data['form-update']) {
+                throw new Error("'form-update' attribute missing in form update data");
+            }
+
+
+            this.applyElementConfiguration(data['form-update']);
+            return;
+        }
+
+        throw new Error("Unexpected status: '" + data.status + "'");
+    };
+
     /**
      * @private
      */

mockup/api/form_refresh.json

 {
-  "text": {
-    "value": "value. Now its enabled",
-    "disabled": false,
-    "readonly": true
-  },
-  "select": {
-    "value": [
-      {
-        "value": 100,
-        "text": "a",
-        "selected": true
-      },
-      {
-        "value": 200,
-        "text": "b",
-        "selected": false
-      }
-    ]
-  },
-  "radio": {
-    "value": "a",
-    "disabled": false
-  },
-  "checkbox": {
-    "value": true,
-    "readonly": true
-  },
-  "trigger": {
-    "value": false
-  }
-}
\ No newline at end of file
+  "status": "success",
+  "message": "ok",
+  "form-update": [
+    {
+      "form-element": "text",
+      "value": "value. Now its enabled",
+      "disabled": false,
+      "readonly": true
+    },
+    {
+      "form-element": "select",
+      "value": [
+        {
+          "value": 100,
+          "text": "a",
+          "selected": true
+        },
+        {
+          "value": 200,
+          "text": "b",
+          "selected": false
+        }
+      ]
+    },
+    {
+      "form-element": "radio",
+      "value": "a",
+      "disabled": false
+    },
+    {
+      "form-element": "checkbox",
+      "value": true,
+      "readonly": true
+    },
+    {
+      "form-element": "trigger",
+      "value": false
+    }
+  ]
+}

mockup/api/form_refresh_error.json

+{
+  "status": "error",
+  "message": "Sample error message",
+  "form-update": [
+    {
+      "form-element": "text",
+      "value": "value. Now its enabled",
+      "disabled": false,
+      "readonly": true
+    },
+    {
+      "form-element": "select",
+      "value": [
+        {
+          "value": 100,
+          "text": "a",
+          "selected": true
+        },
+        {
+          "value": 200,
+          "text": "b",
+          "selected": false
+        }
+      ]
+    },
+    {
+      "form-element": "radio",
+      "value": "a",
+      "disabled": false
+    },
+    {
+      "form-element": "checkbox",
+      "value": true,
+      "readonly": true
+    },
+    {
+      "form-element": "trigger",
+      "value": false
+    }
+  ]
+}

mockup/elementconfiguration.html

@@ -14,37 +14,53 @@
 </head>
 <body>
 
+<label>Refresh URL
+    <select name="refreshUrl" id="refreshUrl">
+        <option>404 error</option>
+        <option>form_refresh.json</option>
+        <option>form_refresh_error.json</option>
+    </select>
+</label>
+
 <div style="float: right">
 <pre id="sample">
-{
-  "text": {
-    "value": "value. Now its enabled",
-    "disabled": false,
-   "readonly": true
-  },
-  "select": {
-    "value": [
-      {
-        "value": 1,
-        "text": "a",
-        "selected": true
-      },
-      {
-        "value": 2,
-        "text": "b",
-        "selected": false
-      }
-    ]
-  },
- "radio": {
-  "value": "a",
- "disabled": false
-},
- "checkbox": {
-   "value": true,
-  "readonly": true
- }
-}
+    [
+    {
+      "form-element": "text",
+      "value": "value. Now its enabled",
+      "disabled": false,
+      "readonly": true
+    },
+    {
+      "form-element": "select",
+      "value": [
+        {
+          "value": 100,
+          "text": "a",
+          "selected": true
+        },
+        {
+          "value": 200,
+          "text": "b",
+          "selected": false
+        }
+      ]
+    },
+    {
+      "form-element": "radio",
+      "value": "a",
+      "disabled": false
+    },
+    {
+      "form-element": "checkbox",
+      "value": true,
+      "readonly": true
+    },
+    {
+      "form-element": "trigger",
+      "value": false
+    }
+  ]
 </pre>
     <button id="copy">Copy</button>
 </div>
@@ -162,7 +178,7 @@
 <script src="../js/qfq.debug.js"></script>
 <script type="text/javascript">
     $(function () {
-        var form = new QfqNS.QfqForm("myForm", 'none', 'none', 'api/form_refresh.json');
+        var form = new QfqNS.QfqForm("myForm", 'none', 'none', 'api/' + $("#refreshUrl").val());
         QfqNS.Log.level = 0;
 
         $("#applyconfig").click(function () {
@@ -174,7 +190,13 @@
 
         $("#copy").click(function () {
             $("#configuration").val($("#sample").text());
-        })
+        });
+
+        $("#refreshUrl").on("change", function (evt) {
+            form.dataRefreshUrl = 'api/' + $(evt.target).val();
+        });
+
+
     });
 </script>
 </body>