update examples with async reinstantiateModalForms

Author: trco

examples/templates/index.html

@@ -119,7 +119,7 @@ <h4>
                   dataUrl: "books/",
                   dataElementId: "#books-table",
                   dataKey: "table",
-                  addModalFormFunction: updateBookModalForm
+                  addModalFormFunction: reinstantiateModalForms
                 }
             });
           }
@@ -153,22 +153,35 @@ <h4>
                   dataUrl: "books/",
                   dataElementId: "#books-table",
                   dataKey: "table",
-                  addModalFormFunction: updateBookModalForm
+                  addModalFormFunction: reinstantiateModalForms
                 }
               });
             });
           }
           updateBookModalForm();
 
           // Delete book buttons - formURL is retrieved from the data of the element
-          $(".delete-book").each(function () {
-              $(this).modalForm({formURL: $(this).data("form-url"), isDeleteForm: true});
-          });
+          function deleteBookModalForm() {
+            $(".delete-book").each(function () {
+                $(this).modalForm({formURL: $(this).data("form-url"), isDeleteForm: true});
+            });
+          }
+          deleteBookModalForm();
 
           // Read book buttons
-          $(".read-book").each(function () {
-              $(this).modalForm({formURL: $(this).data("form-url")});
-          });
+          function readBookModalForm() {
+            $(".read-book").each(function () {
+                $(this).modalForm({formURL: $(this).data("form-url")});
+            });
+          }
+          readBookModalForm();
+
+          function reinstantiateModalForms() {
+            createBookAsyncModalForm();
+            readBookModalForm();
+            updateBookModalForm();
+            deleteBookModalForm();
+          }
 
           // Filter books button
           $("#filter-book").each(function () {