From 62fe82b1709fc3c017ea8c4a360458bf3c6fc6ab Mon Sep 17 00:00:00 2001
From: KK <dev-kk@oeaw.ac.at>
Date: Thu, 3 Oct 2024 18:15:14 +0200
Subject: [PATCH 01/10] refactor(core): move script tag from include

Move <script> tag which embeds external Bootstrap 4
bundle from included partial template directly into
base.html, place it before bootstrap-multiselect
dependency, and remove partial.
---
 apis_core/core/templates/base.html                   | 6 +++++-
 apis_core/core/templates/partials/bootstrap4_js.html | 4 ----
 2 files changed, 5 insertions(+), 5 deletions(-)
 delete mode 100644 apis_core/core/templates/partials/bootstrap4_js.html

diff --git a/apis_core/core/templates/base.html b/apis_core/core/templates/base.html
index cd0991c71..8d71ccbb3 100644
--- a/apis_core/core/templates/base.html
+++ b/apis_core/core/templates/base.html
@@ -59,6 +59,11 @@
 
     {% block scriptHeader %}
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+      {# Bootstrap 4.6.2 bundle (without jQuery) #}
+      {# see https://getbootstrap.com/docs/4.6/getting-started/introduction/ #}
+      <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
+              integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
+              crossorigin="anonymous"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
@@ -240,7 +245,6 @@
     {% endblock footer %}
 
     {% block scripts %}
-      {% include "partials/bootstrap4_js.html" %}
       <script src="https://unpkg.com/htmx.org@1.9.10"></script>
       <script>
         document.body.addEventListener('htmx:beforeSwap', function(event) {
diff --git a/apis_core/core/templates/partials/bootstrap4_js.html b/apis_core/core/templates/partials/bootstrap4_js.html
deleted file mode 100644
index efdd42aea..000000000
--- a/apis_core/core/templates/partials/bootstrap4_js.html
+++ /dev/null
@@ -1,4 +0,0 @@
-{# the bootstrap 4.6.2 javascript, as suggested on https://getbootstrap.com/docs/4.6/getting-started/introduction/ #}
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
-        integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
-        crossorigin="anonymous"></script>

From 891ff506ed05adc10f25a0daf3ff067cc1655ae4 Mon Sep 17 00:00:00 2001
From: KK <dev-kk@oeaw.ac.at>
Date: Thu, 3 Oct 2024 18:19:52 +0200
Subject: [PATCH 02/10] refactor(core): move script tag, update attributes

Move <script> tag which embeds external HTMX
package from script block at bottom of base.html
template to block at top of file; add attributes
for subresource integrity and CORS.
---
 apis_core/core/templates/base.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apis_core/core/templates/base.html b/apis_core/core/templates/base.html
index 8d71ccbb3..b361920b4 100644
--- a/apis_core/core/templates/base.html
+++ b/apis_core/core/templates/base.html
@@ -67,6 +67,9 @@
       <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
+      <script src="https://unpkg.com/htmx.org@1.9.10"
+              integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
+              crossorigin="anonymous"></script>
       <script src="{% static "js/core.js" %}"></script>
       <script src="{% static 'js/E53_Place_popover.js' %}"></script>
     {% endblock %}
@@ -245,7 +248,6 @@
     {% endblock footer %}
 
     {% block scripts %}
-      <script src="https://unpkg.com/htmx.org@1.9.10"></script>
       <script>
         document.body.addEventListener('htmx:beforeSwap', function(event) {
           if (event.detail.xhr.status === 204) {

From 8ce3f10c1ad563f5eace0e7def7f818b935b60c7 Mon Sep 17 00:00:00 2001
From: KK <dev-kk@oeaw.ac.at>
Date: Thu, 3 Oct 2024 18:22:36 +0200
Subject: [PATCH 03/10] feat(core): add JS event listener

Add event listener for readystatechange
to core.js.
---
 apis_core/core/static/js/core.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/apis_core/core/static/js/core.js b/apis_core/core/static/js/core.js
index 4773e09ad..039d67974 100644
--- a/apis_core/core/static/js/core.js
+++ b/apis_core/core/static/js/core.js
@@ -5,3 +5,12 @@ $(document).ready(function() {
         enableFiltering: true
     });
 })
+
+document.addEventListener("readystatechange", (event) => {
+  if (event.target.readyState === "interactive") {
+    // equivalent to DOMContentLoaded; document has loaded, defered scripts
+    // have downloaded and executed, sub-resources may not be ready yet
+  } else if (event.target.readyState === "complete") {
+    // fired when fully loaded, incl. sub-resources and async scripts
+  }
+});

From d2b1cd05b6a25b4069ef047b47d84c06be22c2ba Mon Sep 17 00:00:00 2001
From: KK <dev-kk@oeaw.ac.at>
Date: Thu, 3 Oct 2024 18:26:39 +0200
Subject: [PATCH 04/10] refactor(core): multiselect config

Move jQuery config for multiselect widget to
own function, drop $(document).ready() wrapper
in favour of vanilla JS event listener,
update comments.
---
 apis_core/core/static/js/core.js | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/apis_core/core/static/js/core.js b/apis_core/core/static/js/core.js
index 039d67974..186506a26 100644
--- a/apis_core/core/static/js/core.js
+++ b/apis_core/core/static/js/core.js
@@ -1,10 +1,12 @@
-//script that converts the multi select element
-$(document).ready(function() {
-    $('select.selectmultiple').multiselect({
-        includeSelectAllOption: true,
-        enableFiltering: true
-    });
-})
+/* config for bootstrap-multiselect widget,
+see also https://davidstutz.github.io/bootstrap-multiselect/#configuration-options
+*/
+function configMultiSelect() {
+  $('select.selectmultiple').multiselect({
+    includeSelectAllOption: true,
+    enableFiltering: true
+  });
+}
 
 document.addEventListener("readystatechange", (event) => {
   if (event.target.readyState === "interactive") {
@@ -12,5 +14,7 @@ document.addEventListener("readystatechange", (event) => {
     // have downloaded and executed, sub-resources may not be ready yet
   } else if (event.target.readyState === "complete") {
     // fired when fully loaded, incl. sub-resources and async scripts
+
+    configMultiSelect();
   }
 });

From 040c19ccd3c1c07910fe1d0ad2d2221ad0693dbb Mon Sep 17 00:00:00 2001
From: KK <dev-kk@oeaw.ac.at>
Date: Thu, 3 Oct 2024 18:31:05 +0200
Subject: [PATCH 05/10] refactor(core): move XHTM config

Move event listener for XHTM swapping from
internal script in base.html to external core.js
file.
---
 apis_core/core/static/js/core.js   | 13 +++++++++++++
 apis_core/core/templates/base.html | 11 +----------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/apis_core/core/static/js/core.js b/apis_core/core/static/js/core.js
index 186506a26..6f5caa568 100644
--- a/apis_core/core/static/js/core.js
+++ b/apis_core/core/static/js/core.js
@@ -8,6 +8,18 @@ function configMultiSelect() {
   });
 }
 
+/* config HTMX events,
+* see also https://htmx.org/events/
+*/
+function configHtmx() {
+  document.body.addEventListener('htmx:beforeSwap', function(event) {
+    if (event.detail.xhr.status === 204) {
+      // Swap content even when the response is empty.
+      event.detail.shouldSwap = true;
+    }
+  });
+}
+
 document.addEventListener("readystatechange", (event) => {
   if (event.target.readyState === "interactive") {
     // equivalent to DOMContentLoaded; document has loaded, defered scripts
@@ -16,5 +28,6 @@ document.addEventListener("readystatechange", (event) => {
     // fired when fully loaded, incl. sub-resources and async scripts
 
     configMultiSelect();
+    configHtmx();
   }
 });
diff --git a/apis_core/core/templates/base.html b/apis_core/core/templates/base.html
index b361920b4..3643f7bbf 100644
--- a/apis_core/core/templates/base.html
+++ b/apis_core/core/templates/base.html
@@ -247,16 +247,7 @@
       </footer>
     {% endblock footer %}
 
-    {% block scripts %}
-      <script>
-        document.body.addEventListener('htmx:beforeSwap', function(event) {
-          if (event.detail.xhr.status === 204) {
-            // Swap content even when the response is empty.
-            event.detail.shouldSwap = true;
-          }
-        });
-      </script>
-    {% endblock %}
+    {% block scripts %}{% endblock %}
 
     {% block modal %}
       <!-- Modal -->

From 23590b1b421c4410cadedce5172552dd7580b5e1 Mon Sep 17 00:00:00 2001
From: KK <dev-kk@oeaw.ac.at>
Date: Wed, 9 Oct 2024 12:01:29 +0200
Subject: [PATCH 06/10] docs(core): add, update comments HTMX config

Add to, update formatting of existing comments
on HTMX swap config.
---
 apis_core/core/static/js/core.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apis_core/core/static/js/core.js b/apis_core/core/static/js/core.js
index 6f5caa568..93388e024 100644
--- a/apis_core/core/static/js/core.js
+++ b/apis_core/core/static/js/core.js
@@ -12,9 +12,10 @@ function configMultiSelect() {
 * see also https://htmx.org/events/
 */
 function configHtmx() {
+  // DOM content swapping behaviour
   document.body.addEventListener('htmx:beforeSwap', function(event) {
     if (event.detail.xhr.status === 204) {
-      // Swap content even when the response is empty.
+      // swap even when the response is empty
       event.detail.shouldSwap = true;
     }
   });

From 57ff120c6f0f0dd94a864c013947fd086d8c17a1 Mon Sep 17 00:00:00 2001
From: KK <dev-kk@oeaw.ac.at>
Date: Thu, 3 Oct 2024 18:33:27 +0200
Subject: [PATCH 07/10] refactor(core): move scroll button JS

Move internal script from included partial
template backtotopbtn.html to external core.js
file.
---
 apis_core/core/static/js/core.js              | 31 +++++++++++++++++++
 .../core/templates/partials/backtotopbtn.html | 27 ----------------
 2 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/apis_core/core/static/js/core.js b/apis_core/core/static/js/core.js
index 93388e024..48f259a0f 100644
--- a/apis_core/core/static/js/core.js
+++ b/apis_core/core/static/js/core.js
@@ -21,6 +21,36 @@ function configHtmx() {
   });
 }
 
+/* scroll-to-top button */
+function scrollButton() {
+
+  //Get the button
+  let mybutton = document.getElementById("btn-back-to-top");
+
+  // When the user scrolls down 20px from the top of the document, show the button
+  window.onscroll = function () {
+    scrollFunction();
+  };
+
+  function scrollFunction() {
+    if (
+      document.body.scrollTop > 20 ||
+      document.documentElement.scrollTop > 20
+    ) {
+      mybutton.style.display = "block";
+    } else {
+      mybutton.style.display = "none";
+    }
+  }
+  // When the user clicks on the button, scroll to the top of the document
+  mybutton.addEventListener("click", backToTop);
+
+  function backToTop() {
+    document.body.scrollTop = 0;
+    document.documentElement.scrollTop = 0;
+  }
+}
+
 document.addEventListener("readystatechange", (event) => {
   if (event.target.readyState === "interactive") {
     // equivalent to DOMContentLoaded; document has loaded, defered scripts
@@ -30,5 +60,6 @@ document.addEventListener("readystatechange", (event) => {
 
     configMultiSelect();
     configHtmx();
+    scrollButton();
   }
 });
diff --git a/apis_core/core/templates/partials/backtotopbtn.html b/apis_core/core/templates/partials/backtotopbtn.html
index 5718b2466..cbb8bb5b6 100644
--- a/apis_core/core/templates/partials/backtotopbtn.html
+++ b/apis_core/core/templates/partials/backtotopbtn.html
@@ -12,30 +12,3 @@
         id="btn-back-to-top">
   <span>&uarr;</span>
 </button>
-<script>
-//Get the button
-let mybutton = document.getElementById("btn-back-to-top");
-
-// When the user scrolls down 20px from the top of the document, show the button
-window.onscroll = function () {
-  scrollFunction();
-};
-
-function scrollFunction() {
-  if (
-    document.body.scrollTop > 20 ||
-    document.documentElement.scrollTop > 20
-  ) {
-    mybutton.style.display = "block";
-  } else {
-    mybutton.style.display = "none";
-  }
-}
-// When the user clicks on the button, scroll to the top of the document
-mybutton.addEventListener("click", backToTop);
-
-function backToTop() {
-  document.body.scrollTop = 0;
-  document.documentElement.scrollTop = 0;
-}
-</script>

From a08172d8029cafdc58cd2ab595497fb154a46f4b Mon Sep 17 00:00:00 2001
From: KK <dev-kk@oeaw.ac.at>
Date: Wed, 9 Oct 2024 11:55:30 +0200
Subject: [PATCH 08/10] docs(core): update comments scroll button

Improve wording, formatting of existing comments
on scroll button JavaScript.
---
 apis_core/core/static/js/core.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/apis_core/core/static/js/core.js b/apis_core/core/static/js/core.js
index 48f259a0f..927b76fd3 100644
--- a/apis_core/core/static/js/core.js
+++ b/apis_core/core/static/js/core.js
@@ -24,14 +24,14 @@ function configHtmx() {
 /* scroll-to-top button */
 function scrollButton() {
 
-  //Get the button
+  // get the button
   let mybutton = document.getElementById("btn-back-to-top");
 
-  // When the user scrolls down 20px from the top of the document, show the button
   window.onscroll = function () {
     scrollFunction();
   };
 
+  // show button when user has scrolled down 20px from top of document
   function scrollFunction() {
     if (
       document.body.scrollTop > 20 ||
@@ -42,7 +42,8 @@ function scrollButton() {
       mybutton.style.display = "none";
     }
   }
-  // When the user clicks on the button, scroll to the top of the document
+
+  // scroll back up on click on button
   mybutton.addEventListener("click", backToTop);
 
   function backToTop() {

From 13ba98bbf338f7cef1f0caad9a016dc4363aef5d Mon Sep 17 00:00:00 2001
From: KK <dev-kk@oeaw.ac.at>
Date: Thu, 3 Oct 2024 18:43:12 +0200
Subject: [PATCH 09/10] feat(core): defer external scripts

Set defer attribute on script tags for external
scripts.
---
 apis_core/core/templates/base.html | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/apis_core/core/templates/base.html b/apis_core/core/templates/base.html
index 3643f7bbf..03017a5b3 100644
--- a/apis_core/core/templates/base.html
+++ b/apis_core/core/templates/base.html
@@ -58,20 +58,26 @@
     {% endblock styles %}
 
     {% block scriptHeader %}
-      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"
+              defer></script>
       {# Bootstrap 4.6.2 bundle (without jQuery) #}
       {# see https://getbootstrap.com/docs/4.6/getting-started/introduction/ #}
       <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
               integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
-              crossorigin="anonymous"></script>
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.js"></script>
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
+              crossorigin="anonymous"
+              defer></script>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"
+              defer></script>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.js"
+              defer></script>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"
+              defer></script>
       <script src="https://unpkg.com/htmx.org@1.9.10"
               integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
-              crossorigin="anonymous"></script>
-      <script src="{% static "js/core.js" %}"></script>
-      <script src="{% static 'js/E53_Place_popover.js' %}"></script>
+              crossorigin="anonymous"
+              defer></script>
+      <script src="{% static "js/core.js" %}" defer></script>
+      <script src="{% static 'js/E53_Place_popover.js' %}" defer></script>
     {% endblock %}
 
   </head>

From 8a890b9947248dbf62a686842bfc760b7b9bea2a Mon Sep 17 00:00:00 2001
From: KK <dev-kk@oeaw.ac.at>
Date: Wed, 9 Oct 2024 12:41:46 +0200
Subject: [PATCH 10/10] style(apis_relations): reformat internal JS

Reformat JavaScript in <script> tag mixed with
template language syntax for readability.
Includes conversion of comments formatted for
JavaScript to Django template syntax.
---
 .../apis_entities/abstractentity_form.html    | 212 +++++++++---------
 1 file changed, 108 insertions(+), 104 deletions(-)

diff --git a/apis_core/apis_relations/templates/apis_core/apis_entities/abstractentity_form.html b/apis_core/apis_relations/templates/apis_core/apis_entities/abstractentity_form.html
index 2aa40d5e9..ac3ce74d4 100644
--- a/apis_core/apis_relations/templates/apis_core/apis_entities/abstractentity_form.html
+++ b/apis_core/apis_relations/templates/apis_core/apis_entities/abstractentity_form.html
@@ -11,125 +11,129 @@
 {% block scripts %}
   {{ block.super }}
   <script type="text/javascript">
-{% with object|opts as opts %}
-{% with opts.object_name|lower as modelname %}
-function GetFormAjax(FormName , ObjectID , ButtonText) {
-    function add_form(data) {
-        // update our tooltip content with our returned data and cache it
-        $('#tab_'+data.tab).find('div:eq(1)').remove();
-        $('#tab_'+data.tab).append(data.form);
-            $('#form_PersonInstitutionForm div:first div:first select').focus();
-        $('#tab_'+data.tab+" select.listselect2").each(function( index, element ){
-            console.log($(this).data("autocompleteLightUrl"))
-        $(this).select2({
-            escapeMarkup: function(markup) {
-            return markup;
-        },
-        templateResult: function(data) {
-            return data.text;
-        },
-        templateSelection: function(data) {
-            return data.text;
-        },
-            ajax: {
-            url: $(this).data("autocompleteLightUrl"),
-            dataType: 'json'
-            // Additional AJAX parameters go here; see the end of this chapter for the full code of this example
-            },
-        })
+    {% with object|opts as opts %}
+      {% with opts.object_name|lower as modelname %}
 
+        function GetFormAjax(FormName, ObjectID, ButtonText) {
+          function add_form(data) {
+            {#update our tooltip content with our returned data and cache it#}
+            $("#tab_" + data.tab).find("div:eq(1)").remove();
+            $("#tab_" + data.tab).append(data.form);
+            $("#form_PersonInstitutionForm div:first div:first select").focus();
+            $("#tab_" + data.tab + " select.listselect2").each(function(index, element) {
+              console.log($(this).data("autocompleteLightUrl"))
+              $(this).select2({
+                escapeMarkup: function(markup) {
+                return markup;
+                },
+                templateResult: function(data) {
+                  return data.text;
+                },
+                templateSelection: function(data) {
+                  return data.text;
+                },
+                ajax: {
+                  url: $(this).data("autocompleteLightUrl"),
+                  dataType: "json"
+                  {#Additional AJAX parameters go here; see the end of this chapter for the full code of this example#}
+                },
+              })
+            })
+            {#$(".form.ajax_form").unbind()#}
+            console.log($("#tab_" + data.tab + " select.listselect2"))
 
-        })            //$(".form.ajax_form").unbind()
-        console.log($('#tab_'+data.tab+" select.listselect2"))
-        {% if apis_bibsonomy %}
-        reinitialize_bibsonomy_tooltips()
-        {% endif %}
-	$('#tab_'+data.tab).each(function() {
-	        htmx.process(this);
-	});
-    };
-    if (!$.ApisForms) {
-        $.ApisForms = {}
-    };
-    if (ObjectID === undefined) {
-        if ($.ApisForms[FormName+'_'+'{{object}}']) {
-            var new_data = $.ApisForms[FormName+'_'+'{{modelname}}']
-            new_data.form = new_data.form.replace('##ENT_PK##', {{object.pk}});
-            add_form(new_data);
-            return;
-        };
-    };
-    if (ButtonText === undefined) {
-        ButtonText = 'create/modify';
-    };
-    return $.ajax(
-        {
-            type: 'POST',
-            url: '{% url 'apis_core:apis_relations:get_form_ajax' %}',
+            {% if apis_bibsonomy %}
+              reinitialize_bibsonomy_tooltips()
+            {% endif %}
+
+            $("#tab_" + data.tab).each(function() {
+              htmx.process(this);
+            });
+          }
+
+          if (!$.ApisForms) {
+            $.ApisForms = {}
+          }
+          if (ObjectID === undefined) {
+            if ($.ApisForms[FormName + "_" + "{{object}}"]) {
+              var new_data = $.ApisForms[FormName + "_" + "{{modelname}}"]
+              new_data.form = new_data.form.replace("##ENT_PK##", {{object.pk}});
+              add_form(new_data);
+              return;
+            }
+          }
+          if (ButtonText === undefined) {
+            ButtonText = "create/modify";
+          }
+
+          return $.ajax({
+            type: "POST",
+            url: "{% url 'apis_core:apis_relations:get_form_ajax' %}",
             beforeSend: function(request) {
-                var csrftoken = getCookie('csrftoken');
-                request.setRequestHeader("X-CSRFToken", csrftoken);
+              var csrftoken = getCookie("csrftoken");
+              request.setRequestHeader("X-CSRFToken", csrftoken);
             },
             data: {
-                'FormName':FormName,
-                'SiteID':{{object.pk}},
-                'ObjectID':ObjectID,
-                'ButtonText':ButtonText,
-                'entity_type': '{{modelname}}',
+              "FormName": FormName,
+              "SiteID": {{object.pk}},
+              "ObjectID": ObjectID,
+              "ButtonText": ButtonText,
+              "entity_type": "{{modelname}}",
             },
             success: function(data) {
-		console.log(data);
-                add_form(data);
-                if (!ObjectID) {
-                    $.ApisForms[FormName+'_'+'{{modelname}}'] = data;
-                    $.ApisForms[FormName+'_'+'{{modelname}}'].form = $.ApisForms[FormName+'_'+'{{modelname}}'].form
-                    .replace('/{{object.pk}}/', '/##ENT_PK##/');
-                };
+              console.log(data);
+              add_form(data);
+              if (!ObjectID) {
+                $.ApisForms[FormName + "_" + "{{modelname}}"] = data;
+                $.ApisForms[FormName + "_" + "{{modelname}}"].form = $.ApisForms[FormName + "_" + "{{modelname}}"].form.replace("/{{object.pk}}/", "/##ENT_PK##/");
+              }
             },
             error: function(error) {
-                console.log(error)
+              console.log(error)
             }
+          });
+         }
+
+      {% endwith %}
+    {% endwith %}
+
+    function EntityRelationForm_response(response) {
+      if (response.test == false) {
+        $("#" + response.DivID).replaceWith(response.form);
+        {#$(".form.ajax_form").unbind();#}
+        if ($.ApisHigh.tt_instance_detail) {
+          if ($.ApisHigh.tt_instance_detail["__state"] == "stable") {
+            $.ApisHigh.tt_instance_detail.content(response.form);
+          }
         }
-    );
-}
-{% endwith %}
-{% endwith %}
+      } else {
+        console.log("test did not fail");
+        $("#tab_" + response.tab).find("div").remove();
+        $("#tab_" + response.tab).append(response.table_html);
 
-function EntityRelationForm_response(response){
-  if (response.test == false) {
-      $('#'+response.DivID).replaceWith(response.form);
-      //$(".form.ajax_form").unbind();
-      if ($.ApisHigh.tt_instance_detail) {
-      if ($.ApisHigh.tt_instance_detail["__state"] == 'stable') {
-          $.ApisHigh.tt_instance_detail.content(response.form);
-      } }
-  } else {
-      console.log('test did not fail');
-       $('#tab_'+response.tab).find('div').remove();
-       $('#tab_'+response.tab).append(response.table_html);
-       {% if object %}
-       if (response.right_card) {
-         GetFormAjax(response.tab);
-       };
-       if ($.ApisHigh){
-         if ($.ApisHigh.tt_instance_detail["__state"] == 'stable') {
-            $.ApisHigh.tt_instance_detail.close()
-         } else {
-            $('.reldelete').addClass('disabled')
-         }
-       }
-       {% endif %}
-  };
-}
+        {% if object %}
+          if (response.right_card) {
+            GetFormAjax(response.tab);
+          }
+          if ($.ApisHigh) {
+           if ($.ApisHigh.tt_instance_detail["__state"] == "stable") {
+             $.ApisHigh.tt_instance_detail.close()
+           } else {
+             $(".reldelete").addClass("disabled")
+           }
+          }
+        {% endif %}
+      }
+    }
   </script>
   {% object_relations as object_relations %}
   <script type="text/javascript">
-function activate_editing(){
-       {% for obj in object_relations %}
+    function activate_editing() {
+     {% for obj in object_relations %}
        GetFormAjax("{{obj.2}}");
-       //unbind_ajax_forms();
-       {% endfor %}
-};
-activate_editing();
+       {#unbind_ajax_forms();#}
+     {% endfor %}
+    }
+    activate_editing();
   </script>
 {% endblock scripts %}