Fix setting up widgets containing HTMX code and unify the flow for results and widgets

core/templates/ui/drilldown/drilldown.html

@@ -83,13 +83,11 @@
     // 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;
+      container.outerHTML = "";
+
       grid.addWidget(widgetelement);
 
       htmx.process(widgetelement);

core/templates/widgets/drilldown.html

@@ -11,24 +11,18 @@
         </p>
         <div class="panel-block is-active">
           <div class="control">
-            <div id="results">
             {% include 'window-content/drilldown.html' %}
           </div>
         </div>
       </div>
     </div>
   </div>
-  </div>
 </div>
+
 <script>
-  //var contents = $("#drilldown-widget").outerHTML;
-  var contents = document.getElementById("drilldown-widget");
-  var grid = document.getElementById("grid-stack-main").gridstack;
-  grid.addWidget(contents.innerHTML);
-  contents.outerHTML = "";
-  grid.compact();
+  var widget_event = new Event('load-widget');
+  document.dispatchEvent(widget_event);
   // because we remove the element the JS runs in
   // so we need to run it again here
   initTabs("{{ unique }}");
-
 </script>

core/templates/widgets/table_results.html

@@ -1,6 +1,6 @@
 {% load static %}
 
-<div id="drilldown-widget" style="display: block;">
+<div id="drilldown-widget">
   <div id="drilldown-widget-results" class="grid-stack-item" gs-w="10" gs-h="30" gs-y="10" gs-x="1">
     <div class="grid-stack-item-content">
       <div class="panel">
@@ -52,16 +52,7 @@
 </div>
 
 <script>
-  // let container = htmx.find('#drilldown-widget');
-  // var scripts = container.getElementsByTagName("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);
-  // }
+  grid.removeWidget("drilldown-widget-results");
   var widget_event = new Event('load-widget');
   document.dispatchEvent(widget_event);
 </script>