Make widgets play nice with HTMX

core/templates/ui/drilldown/drilldown.html

@@ -70,6 +70,35 @@
       </div>
     </div>
   </div>
+
+  <script>
+    var grid = GridStack.init({
+      cellHeight: 20,
+      cellWidth: 50,
+      auto: true,
+      float: true,
+      draggable: {handle: '.panel-heading', scroll: false, appendTo: 'body'},
+      removable: false,
+    });
+    // GridStack.init();
+    setupTags();
+    document.addEventListener('load-widget', function(event) {
+      grid.removeWidget("drilldown-widget-results");
+
+      let container = htmx.find('#drilldown-widget');
+      var scripts = htmx.findAll(container, "script");
+      let widgetelement = container.firstElementChild.cloneNode(true);
+      container.firstElementChild.remove();
+      //let grid = document.querySelector('.grid-stack').gridstack;
+      grid.addWidget(widgetelement);
+
+      htmx.process(widgetelement);
+      for (var i = 0; i < scripts.length; i++) {
+        eval(scripts[i].innerHTML);
+      }
+    });
+  </script>
+
   <div id="modals-here">
   </div>
   <div id="items-here">
@@ -82,31 +111,7 @@
     {% endif %}
   </div>
   <script>
-    var grid = GridStack.init({
-      cellHeight: 20,
-      cellWidth: 50,
-      auto: true,
-      float: true,
-      draggable: {handle: '.panel-heading', scroll: false, appendTo: 'body'},
-      removable: false,
-    });
-    // GridStack.init();
-    setupTags();
 
   </script>
-  {% if table %}
-    <script>
-    //var contents = $("#drilldown-widget").outerHTML;
-    var contents = document.getElementById("drilldown-widget");
-    var scripts = contents.getElementsByTagName("script");
-    var grid = document.getElementById("grid-stack-main").gridstack;
-    grid.addWidget(contents.innerHTML);
-    contents.outerHTML = "";
-    // restore scripts that aren't going to be run
-    for (var i = 0; i < scripts.length; i++) {
-      eval(scripts[i].innerHTML);
-    }
-    </script>
     
-  {% endif %}
 {% endblock %}