fixed embedded chart double-initialization

Fixed a bug where embedded card contents would be initialized multiple times, potentially causing issues with some components (such as the chart component) when embedded in a card.

Author: lovasoa

CHANGELOG.md

@@ -19,6 +19,7 @@
 - Fixed a display bug where the table search box would disappear when scrolling horizontally in a large table.
 - Remove small blank padding around tables in the table component
 - Fixed a bug in the table component where searching for "xy" would match a row with a cell that contains "x" followed by a cell that contains "y". This should match "x y" but not "xy".
+- Fixed a bug where embedded card contents would be initialized multiple times, potentially causing issues with some components (such as the chart component) when embedded in a card.
 
 ## 0.30.1 (2024-10-31)
 - fix a bug where table sorting would break if table search was not also enabled.

examples/official-site/sqlpage/migrations/01_documentation.sql

@@ -667,7 +667,7 @@ to the path of the file you want to include, followed by `?_sqlpage_embed`.
         json('[
             {"component":"card", "title":"A dashboard with multiple graphs on the same line", "columns": 2},
             {"embed": "/examples/chart.sql?color=green&n=42&_sqlpage_embed", "footer_md": "You can find the sql file that generates the chart [here](https://github.com/lovasoa/SQLpage/tree/main/examples/official-site/examples/chart.sql)" },
-            {"embed": "/examples/chart.sql?_sqlpage_embed" },
+            {"embed": "/examples/chart.sql?_sqlpage_embed" }
         ]'));
 
 INSERT INTO component(name, icon, description) VALUES

sqlpage/sqlpage.js

@@ -3,13 +3,12 @@ const nonce = document.currentScript.nonce;
 
 function sqlpage_card() {
   for (const c of document.querySelectorAll("[data-pre-init=card]")) {
-    const source = c.dataset.embed;
+    c.removeAttribute("data-pre-init");
     fetch(c.dataset.embed)
       .then((res) => res.text())
       .then((html) => {
         const body = c.querySelector(".card-content");
         body.innerHTML = html;
-        c.removeAttribute("data-pre-init");
         const spinner = c.querySelector(".card-loading-placeholder");
         if (spinner) {
           spinner.parentNode.removeChild(spinner);