plot div id can be selected

Author: Marco Zocca

htmx-plotly.js

@@ -3,31 +3,23 @@
 htmx.defineExtension('htmx-plotly', {
     transformResponse : (text, xhr, elt) => {
 
-        // const dataCurr = window['plotlyTestData']
-        // console.log('htmx-plotly: plotlyTestData:' + JSON.stringify(dataCurr) ) // debug
-
-        const dataNew = JSON.parse(text)
-        // console.log('htmx-plotly: new data: ' + JSON.stringify(dataNew))
-        // window['plotlyTestData'] = dataNew
-        Plotly.restyle('my-plot', dataNew);
+        var plotEl = htmx.closest(elt, "[plot-id]"); // closest including div element
+        if (plotEl) {
+            const dataNew = JSON.parse(text)
+            const plotId = plotEl.getAttribute('plot-id');  // lookup value of ? in < .. plot-id="?">
+            var plotDiv = htmx.find("#" + plotId); // div element pointed at
+            if (plotDiv) {
+                // https://plotly.com/javascript/plotlyjs-function-reference/#plotlyrestyle 
+                Plotly.restyle(plotId, dataNew)
+            } else {
+                throw "Cannot find plot id: " + plotId
+            }
+        } else {
+            console.log('No plot-id attribute defined')
+        }
 
         return ''
 
-        // var plotIdAttr = htmx.closest(elt, "[plot-id]"); // closest including div element
-        // if (plotIdAttr) {
-        //     var data = JSON.parse(text);
-        //     var plotId = plotIdAttr.getAttribute('plot-id'); // < .. plot-id="?"> value of ?
-            
-        //     var plotDiv = htmx.find("#" + plotId); // div element pointed at
-        //     if (plotDiv) {
-        //         // https://plotly.com/javascript/plotlyjs-function-reference/#plotlyrestyle 
-        //         Plotly.restyle(plotId, 'y', [data]);
-
-        //     } else {
-        //         throw "Cannot find plot id:" + plotDiv
-        //     }
-        // }
-
     }
 }
 )

index.html

@@ -9,7 +9,7 @@
 
 
 <div hx-ext="htmx-plotly">
-    <a href="#" hx-post="/get-data" hx-swap="none"><h1>UPDATE</h1></a>
+    <a href="#" hx-post="/get-data" hx-swap="none" plot-id="my-plot"><h1>UPDATE</h1></a>
     <div id="my-plot"></div>
 </div>