From 8f88eae575960b397cf3cbaae677128d984e86ca Mon Sep 17 00:00:00 2001
From: PaulVua <paulvuarambon@gmail.com>
Date: Tue, 17 Mar 2026 18:48:38 +0100
Subject: [PATCH] Revert optimisations sidebar/fetch qui causaient des blocages
 navigateur

Retour a l'etat 408ab76. Les tentatives d'optimisation du nombre
de fetch (sidebar unique, config partagee, sequencement) causaient
des blocages sur Chrome/Firefox. On garde les features (forget wifi,
hotspot badge, UI wifi) mais on revient au chargement d'origine.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 html/admin.html               |  29 ++++----
 html/assets/js/topbar-logo.js |  35 ++++------
 html/database.html            |  46 +++++++------
 html/index.html               |  35 +++++-----
 html/logs.html                |  29 ++++----
 html/map.html                 |  29 ++++----
 html/saraR4.html              |  29 ++++----
 html/screen.html              |  57 ++++++++--------
 html/sensors.html             |  35 +++++-----
 html/terminal.html            |  25 ++++---
 html/wifi.html                | 125 +++++++++++++++++++++-------------
 11 files changed, 255 insertions(+), 219 deletions(-)

diff --git a/html/admin.html b/html/admin.html
index 75113d1..c71143f 100755
--- a/html/admin.html
+++ b/html/admin.html
@@ -412,20 +412,23 @@
 
 <script>
  document.addEventListener('DOMContentLoaded', function () {
-    // Load topbar
-    fetch('topbar.html')
-        .then(r => r.text())
-        .then(data => { document.getElementById('topbar').innerHTML = data; })
-        .catch(e => console.error('Error loading topbar:', e));
+    const elementsToLoad = [
+        { id: 'topbar', file: 'topbar.html' },
+        { id: 'sidebar', file: 'sidebar.html' },
+        { id: 'sidebar_mobile', file: 'sidebar.html' }
+    ];
 
-    // Load sidebar once, reuse for desktop + mobile
-    fetch('sidebar.html')
-        .then(r => r.text())
-        .then(data => {
-            document.getElementById('sidebar').innerHTML = data;
-            document.getElementById('sidebar_mobile').innerHTML = data;
-        })
-        .catch(e => console.error('Error loading sidebar:', e));
+    elementsToLoad.forEach(({ id, file }) => {
+        fetch(file)
+            .then(response => response.text())
+            .then(data => {
+                const element = document.getElementById(id);
+                if (element) {
+                    element.innerHTML = data;
+                }
+            })
+            .catch(error => console.error(`Error loading ${file}:`, error));
+    });
 });
 
 //end  document.addEventListener
diff --git a/html/assets/js/topbar-logo.js b/html/assets/js/topbar-logo.js
index 5803700..5ea5ccc 100644
--- a/html/assets/js/topbar-logo.js
+++ b/html/assets/js/topbar-logo.js
@@ -5,31 +5,25 @@
  * - Shows/Hides "Screen" sidebar tab based on device type
  * - Updates sidebar device name
  * - Shows hotspot badge in sidebar when in hotspot mode
- *
- * Fetches config at window.onload (not DOMContentLoaded) to avoid
- * saturating the browser's 6-connection-per-domain limit.
  */
-(function() {
+document.addEventListener('DOMContentLoaded', () => {
     let config = null;
 
-    // Observe DOM changes to apply config when sidebar/topbar are loaded
+    // Fetch config once
+    fetch('launcher.php?type=get_config_sqlite')
+        .then(response => response.json())
+        .then(data => {
+            config = data;
+            applyConfig(); // Apply immediately if elements are ready
+        })
+        .catch(error => console.error('Error loading config:', error));
+
+    // Observe DOM changes to handle dynamically loaded elements (sidebar, topbar)
     const observer = new MutationObserver(() => {
         if (config) applyConfig();
     });
-    observer.observe(document.body, { childList: true, subtree: true });
 
-    // Fetch config after all initial resources are loaded
-    window.addEventListener('load', () => {
-        fetch('launcher.php?type=get_config_sqlite')
-            .then(response => response.json())
-            .then(data => {
-                config = data;
-                window._nebuleairConfig = data;
-                applyConfig();
-                document.dispatchEvent(new CustomEvent('nebuleair-config-ready', { detail: data }));
-            })
-            .catch(error => console.error('Error loading config:', error));
-    });
+    observer.observe(document.body, { childList: true, subtree: true });
 
     function applyConfig() {
         if (!config) return;
@@ -39,12 +33,13 @@
         // 1. Topbar Logo Logic
         const logo = document.getElementById('topbar-logo');
         if (logo && isModuleAirPro) {
+            // prevent unnecessary re-assignments
             if (!logo.src.includes('logoModuleAir.png')) {
                 logo.src = 'assets/img/logoModuleAir.png';
             }
         }
 
-        // 2. Sidebar Screen Tab Logic
+        // 2. Sidebar Screen Tab Logic - Use class since ID might be duplicated (desktop/mobile)
         const navScreenElements = document.querySelectorAll('.nav-screen-item');
         if (navScreenElements.length > 0) {
             navScreenElements.forEach(navScreen => {
@@ -73,4 +68,4 @@
             badge.style.display = (config.WIFI_status === 'hotspot') ? '' : 'none';
         });
     }
-})();
+});
diff --git a/html/database.html b/html/database.html
index c25582e..7b5924b 100755
--- a/html/database.html
+++ b/html/database.html
@@ -181,6 +181,15 @@
  document.addEventListener('DOMContentLoaded', function () {
     console.log("DOMContentLoaded");
 
+    const elementsToLoad = [
+        { id: 'topbar', file: 'topbar.html' },
+        { id: 'sidebar', file: 'sidebar.html' },
+        { id: 'sidebar_mobile', file: 'sidebar.html' }
+    ];
+
+    let loadedCount = 0;
+    const totalElements = elementsToLoad.length;
+
     function applyTranslationsWhenReady() {
         if (typeof i18n !== 'undefined' && i18n.translations && Object.keys(i18n.translations).length > 0) {
             console.log("Applying translations to dynamically loaded content");
@@ -191,28 +200,23 @@
         }
     }
 
-    let loadedCount = 0;
+    elementsToLoad.forEach(({ id, file }) => {
+        fetch(file)
+            .then(response => response.text())
+            .then(data => {
+                const element = document.getElementById(id);
+                if (element) {
+                    element.innerHTML = data;
+                }
+                loadedCount++;
 
-    // Load topbar
-    fetch('topbar.html')
-        .then(r => r.text())
-        .then(data => {
-            document.getElementById('topbar').innerHTML = data;
-            loadedCount++;
-            if (loadedCount === 2) applyTranslationsWhenReady();
-        })
-        .catch(e => console.error('Error loading topbar:', e));
-
-    // Load sidebar once, reuse for desktop + mobile
-    fetch('sidebar.html')
-        .then(r => r.text())
-        .then(data => {
-            document.getElementById('sidebar').innerHTML = data;
-            document.getElementById('sidebar_mobile').innerHTML = data;
-            loadedCount++;
-            if (loadedCount === 2) applyTranslationsWhenReady();
-        })
-        .catch(e => console.error('Error loading sidebar:', e));
+                // Re-apply translations after all dynamic content is loaded
+                if (loadedCount === totalElements) {
+                    applyTranslationsWhenReady();
+                }
+            })
+            .catch(error => console.error(`Error loading ${file}:`, error));
+    });
 
     // Also listen for language change events to re-apply translations
     document.addEventListener('languageChanged', function() {
diff --git a/html/index.html b/html/index.html
index d5007f2..0e7cbb8 100755
--- a/html/index.html
+++ b/html/index.html
@@ -136,28 +136,27 @@
 
   <script>
     document.addEventListener('DOMContentLoaded', function () {
-      // Load topbar
-      fetch('topbar.html')
-          .then(r => r.text())
-          .then(data => {
-            document.getElementById('topbar').innerHTML = data;
-            if (window.i18n && typeof window.i18n.applyTranslations === 'function') {
-              window.i18n.applyTranslations();
-            }
-          })
-          .catch(e => console.error('Error loading topbar:', e));
+      const elementsToLoad = [
+        { id: 'topbar', file: 'topbar.html' },
+        { id: 'sidebar', file: 'sidebar.html' },
+        { id: 'sidebar_mobile', file: 'sidebar.html' }
+      ];
 
-      // Load sidebar once, reuse for desktop + mobile
-      fetch('sidebar.html')
-          .then(r => r.text())
+      elementsToLoad.forEach(({ id, file }) => {
+        fetch(file)
+          .then(response => response.text())
           .then(data => {
-            document.getElementById('sidebar').innerHTML = data;
-            document.getElementById('sidebar_mobile').innerHTML = data;
-            if (window.i18n && typeof window.i18n.applyTranslations === 'function') {
-              window.i18n.applyTranslations();
+            const element = document.getElementById(id);
+            if (element) {
+              element.innerHTML = data;
+              // Apply translations after loading dynamic content
+              if (window.i18n && typeof window.i18n.applyTranslations === 'function') {
+                window.i18n.applyTranslations();
+              }
             }
           })
-          .catch(e => console.error('Error loading sidebar:', e));
+          .catch(error => console.error(`Error loading ${file}:`, error));
+      });
 
 
     });
diff --git a/html/logs.html b/html/logs.html
index 7ea819a..03a3c5e 100755
--- a/html/logs.html
+++ b/html/logs.html
@@ -96,20 +96,23 @@
 
 <script>
  document.addEventListener('DOMContentLoaded', function () {
-    // Load topbar
-    fetch('topbar.html')
-        .then(r => r.text())
-        .then(data => { document.getElementById('topbar').innerHTML = data; })
-        .catch(e => console.error('Error loading topbar:', e));
+    const elementsToLoad = [
+        { id: 'topbar', file: 'topbar.html' },
+        { id: 'sidebar', file: 'sidebar.html' },
+        { id: 'sidebar_mobile', file: 'sidebar.html' }
+    ];
 
-    // Load sidebar once, reuse for desktop + mobile
-    fetch('sidebar.html')
-        .then(r => r.text())
-        .then(data => {
-            document.getElementById('sidebar').innerHTML = data;
-            document.getElementById('sidebar_mobile').innerHTML = data;
-        })
-        .catch(e => console.error('Error loading sidebar:', e));
+    elementsToLoad.forEach(({ id, file }) => {
+        fetch(file)
+            .then(response => response.text())
+            .then(data => {
+                const element = document.getElementById(id);
+                if (element) {
+                    element.innerHTML = data;
+                }
+            })
+            .catch(error => console.error(`Error loading ${file}:`, error));
+    });
 
     const loop_card_content = document.getElementById('card_loop_content');
     const boot_card_content = document.getElementById('card_boot_content');
diff --git a/html/map.html b/html/map.html
index a41b3bc..2cfda32 100755
--- a/html/map.html
+++ b/html/map.html
@@ -121,20 +121,23 @@
 
 <script>
  document.addEventListener('DOMContentLoaded', function () {
-    // Load topbar
-    fetch('topbar.html')
-        .then(r => r.text())
-        .then(data => { document.getElementById('topbar').innerHTML = data; })
-        .catch(e => console.error('Error loading topbar:', e));
+    const elementsToLoad = [
+        { id: 'topbar', file: 'topbar.html' },
+        { id: 'sidebar', file: 'sidebar.html' },
+        { id: 'sidebar_mobile', file: 'sidebar.html' }
+    ];
 
-    // Load sidebar once, reuse for desktop + mobile
-    fetch('sidebar.html')
-        .then(r => r.text())
-        .then(data => {
-            document.getElementById('sidebar').innerHTML = data;
-            document.getElementById('sidebar_mobile').innerHTML = data;
-        })
-        .catch(e => console.error('Error loading sidebar:', e));
+    elementsToLoad.forEach(({ id, file }) => {
+        fetch(file)
+            .then(response => response.text())
+            .then(data => {
+                const element = document.getElementById(id);
+                if (element) {
+                    element.innerHTML = data;
+                }
+            })
+            .catch(error => console.error(`Error loading ${file}:`, error));
+    });
 
 
 
diff --git a/html/saraR4.html b/html/saraR4.html
index e9789c7..749ed6d 100755
--- a/html/saraR4.html
+++ b/html/saraR4.html
@@ -397,20 +397,23 @@
 
 <script>
 document.addEventListener('DOMContentLoaded', function () {
-  // Load topbar
-  fetch('topbar.html')
-      .then(r => r.text())
-      .then(data => { document.getElementById('topbar').innerHTML = data; })
-      .catch(e => console.error('Error loading topbar:', e));
+  const elementsToLoad = [
+      { id: 'topbar', file: 'topbar.html' },
+      { id: 'sidebar', file: 'sidebar.html' },
+      { id: 'sidebar_mobile', file: 'sidebar.html' }
+  ];
 
-  // Load sidebar once, reuse for desktop + mobile
-  fetch('sidebar.html')
-      .then(r => r.text())
-      .then(data => {
-          document.getElementById('sidebar').innerHTML = data;
-          document.getElementById('sidebar_mobile').innerHTML = data;
-      })
-      .catch(e => console.error('Error loading sidebar:', e));
+  elementsToLoad.forEach(({ id, file }) => {
+      fetch(file)
+          .then(response => response.text())
+          .then(data => {
+              const element = document.getElementById(id);
+              if (element) {
+                  element.innerHTML = data;
+              }
+          })
+          .catch(error => console.error(`Error loading ${file}:`, error));
+  });
 
   //OLD way to retreive data from JSON
   /*
diff --git a/html/screen.html b/html/screen.html
index 9e8daca..14b49f6 100644
--- a/html/screen.html
+++ b/html/screen.html
@@ -108,37 +108,34 @@
 
     <script>
         document.addEventListener('DOMContentLoaded', function () {
-            // Load topbar
-            fetch('topbar.html')
-                .then(r => r.text())
-                .then(data => {
-                    document.getElementById('topbar').innerHTML = data;
-                    if (window.i18n && typeof window.i18n.applyTranslations === 'function') {
-                        window.i18n.applyTranslations();
-                    }
-                })
-                .catch(e => console.error('Error loading topbar:', e));
+            const elementsToLoad = [
+                { id: 'topbar', file: 'topbar.html' },
+                { id: 'sidebar', file: 'sidebar.html' },
+                { id: 'sidebar_mobile', file: 'sidebar.html' }
+            ];
 
-            // Load sidebar once, reuse for desktop + mobile
-            fetch('sidebar.html')
-                .then(r => r.text())
-                .then(data => {
-                    const sidebar = document.getElementById('sidebar');
-                    const sidebarMobile = document.getElementById('sidebar_mobile');
-                    sidebar.innerHTML = data;
-                    sidebarMobile.innerHTML = data;
-                    if (window.i18n && typeof window.i18n.applyTranslations === 'function') {
-                        window.i18n.applyTranslations();
-                    }
-                    // Ensure the screen tab is visible in both sidebars
-                    setTimeout(() => {
-                        [sidebar, sidebarMobile].forEach(el => {
-                            const navScreenElements = el.querySelectorAll('.nav-screen-item');
-                            navScreenElements.forEach(item => item.style.display = 'flex');
-                        });
-                    }, 100);
-                })
-                .catch(e => console.error('Error loading sidebar:', e));
+            elementsToLoad.forEach(({ id, file }) => {
+                fetch(file)
+                    .then(response => response.text())
+                    .then(data => {
+                        const element = document.getElementById(id);
+                        if (element) {
+                            element.innerHTML = data;
+                            // Apply translations after loading dynamic content
+                            if (window.i18n && typeof window.i18n.applyTranslations === 'function') {
+                                window.i18n.applyTranslations();
+                            }
+                            // Ensure the screen tab is visible here as well
+                            if (id.includes('sidebar')) {
+                                setTimeout(() => {
+                                    const navScreenElements = element.querySelectorAll('.nav-screen-item');
+                                    navScreenElements.forEach(el => el.style.display = 'flex');
+                                }, 100);
+                            }
+                        }
+                    })
+                    .catch(error => console.error(`Error loading ${file}:`, error));
+            });
 
             // Translation fallback for now if keys are missing
             setTimeout(() => {
diff --git a/html/sensors.html b/html/sensors.html
index 894426a..3729264 100755
--- a/html/sensors.html
+++ b/html/sensors.html
@@ -89,28 +89,27 @@
 
   <script>
     document.addEventListener('DOMContentLoaded', function () {
-      // Load topbar
-      fetch('topbar.html')
-          .then(r => r.text())
-          .then(data => {
-            document.getElementById('topbar').innerHTML = data;
-            if (window.i18n && typeof window.i18n.applyTranslations === 'function') {
-              window.i18n.applyTranslations();
-            }
-          })
-          .catch(e => console.error('Error loading topbar:', e));
+      const elementsToLoad = [
+        { id: 'topbar', file: 'topbar.html' },
+        { id: 'sidebar', file: 'sidebar.html' },
+        { id: 'sidebar_mobile', file: 'sidebar.html' }
+      ];
 
-      // Load sidebar once, reuse for desktop + mobile
-      fetch('sidebar.html')
-          .then(r => r.text())
+      elementsToLoad.forEach(({ id, file }) => {
+        fetch(file)
+          .then(response => response.text())
           .then(data => {
-            document.getElementById('sidebar').innerHTML = data;
-            document.getElementById('sidebar_mobile').innerHTML = data;
-            if (window.i18n && typeof window.i18n.applyTranslations === 'function') {
-              window.i18n.applyTranslations();
+            const element = document.getElementById(id);
+            if (element) {
+              element.innerHTML = data;
+              // Apply translations after loading dynamic content
+              if (window.i18n && typeof window.i18n.applyTranslations === 'function') {
+                window.i18n.applyTranslations();
+              }
             }
           })
-          .catch(e => console.error('Error loading sidebar:', e));
+          .catch(error => console.error(`Error loading ${file}:`, error));
+      });
     });
 
     function getNPM_values(port) {
diff --git a/html/terminal.html b/html/terminal.html
index e6ee87a..df1ea87 100644
--- a/html/terminal.html
+++ b/html/terminal.html
@@ -179,20 +179,23 @@
 
   <script>
     document.addEventListener('DOMContentLoaded', function () {
-      // Load topbar
-      fetch('topbar.html')
-          .then(r => r.text())
-          .then(data => { document.getElementById('topbar').innerHTML = data; })
-          .catch(e => console.error('Error loading topbar:', e));
+      const elementsToLoad = [
+        { id: 'topbar', file: 'topbar.html' },
+        { id: 'sidebar', file: 'sidebar.html' },
+        { id: 'sidebar_mobile', file: 'sidebar.html' }
+      ];
 
-      // Load sidebar once, reuse for desktop + mobile
-      fetch('sidebar.html')
-          .then(r => r.text())
+      elementsToLoad.forEach(({ id, file }) => {
+        fetch(file)
+          .then(response => response.text())
           .then(data => {
-            document.getElementById('sidebar').innerHTML = data;
-            document.getElementById('sidebar_mobile').innerHTML = data;
+            const element = document.getElementById(id);
+            if (element) {
+              element.innerHTML = data;
+            }
           })
-          .catch(e => console.error('Error loading sidebar:', e));
+          .catch(error => console.error(`Error loading ${file}:`, error));
+      });
 
       // Initialize elements
       initializeElements();
diff --git a/html/wifi.html b/html/wifi.html
index e91b136..cfd19fd 100755
--- a/html/wifi.html
+++ b/html/wifi.html
@@ -215,24 +215,23 @@
  document.addEventListener('DOMContentLoaded', function () {
     console.log("DOMContentLoaded");
 
-    // Load topbar
-    fetch('topbar.html')
-        .then(r => r.text())
-        .then(data => { document.getElementById('topbar').innerHTML = data; })
-        .catch(e => console.error('Error loading topbar:', e));
+    const elementsToLoad = [
+        { id: 'topbar', file: 'topbar.html' },
+        { id: 'sidebar', file: 'sidebar.html' },
+        { id: 'sidebar_mobile', file: 'sidebar.html' }
+    ];
 
-    // Load sidebar once, reuse for desktop + mobile
-    fetch('sidebar.html')
-        .then(r => r.text())
-        .then(data => {
-            document.getElementById('sidebar').innerHTML = data;
-            document.getElementById('sidebar_mobile').innerHTML = data;
-            // Re-apply translations to dynamically loaded sidebar
-            if (typeof i18n !== 'undefined' && i18n.translations) {
-                i18n.applyTranslations();
-            }
-        })
-        .catch(e => console.error('Error loading sidebar:', e));
+    elementsToLoad.forEach(({ id, file }) => {
+        fetch(file)
+            .then(response => response.text())
+            .then(data => {
+                const element = document.getElementById(id);
+                if (element) {
+                    element.innerHTML = data;
+                }
+            })
+            .catch(error => console.error(`Error loading ${file}:`, error));
+    });
 
     
 });
@@ -564,40 +563,68 @@ function get_internet(){
 
 
   
-    // Wait for config loaded by topbar-logo.js (fires after window.onload)
-    document.addEventListener('nebuleair-config-ready', function(e) {
-      const data = e.detail;
-      console.log("Config loaded (wifi page):");
-      console.log(data);
+    window.onload = function() {
+      $.ajax({
+        url: 'launcher.php?type=get_config_sqlite',
+        dataType: 'json',
+        method: 'GET',
+        success: function(data) {
+          console.log("Getting SQLite config table (wifi page):");
+          console.log(data);
 
-      const WIFI_statusElement = document.getElementById("wifi-status");
-      console.log("WIFI is: " + data.WIFI_status);
+          // WiFi connection status — toggle cards
+          const WIFI_statusElement = document.getElementById("wifi-status");
+          console.log("WIFI is: " + data.WIFI_status);
 
-      if (data.WIFI_status === "connected") {
-        WIFI_statusElement.textContent = "Connected";
-        WIFI_statusElement.className = "badge text-bg-success";
-        document.getElementById('btn-forget-wifi').style.display = 'inline-block';
-        document.getElementById('card-connection-info').style.display = '';
-        document.getElementById('card-hotspot-info').style.display = 'none';
-        document.getElementById('card-wifi-scan').style.display = 'none';
-        get_internet();
-      } else if (data.WIFI_status === "hotspot") {
-        WIFI_statusElement.textContent = "Hotspot";
-        WIFI_statusElement.className = "badge text-bg-warning";
-        document.getElementById('btn-forget-wifi').style.display = 'none';
-        document.getElementById('card-connection-info').style.display = 'none';
-        document.getElementById('card-hotspot-info').style.display = '';
-        document.getElementById('card-wifi-scan').style.display = '';
-        wifi_scan();
-      } else {
-        WIFI_statusElement.textContent = "Unknown";
-        WIFI_statusElement.className = "badge text-bg-secondary";
-        document.getElementById('btn-forget-wifi').style.display = 'none';
-        document.getElementById('card-connection-info').style.display = 'none';
-        document.getElementById('card-hotspot-info').style.display = 'none';
-        document.getElementById('card-wifi-scan').style.display = '';
-      }
-    });
+          if (data.WIFI_status === "connected") {
+            WIFI_statusElement.textContent = "Connected";
+            WIFI_statusElement.className = "badge text-bg-success";
+            document.getElementById('btn-forget-wifi').style.display = 'inline-block';
+            document.getElementById('card-connection-info').style.display = '';
+            document.getElementById('card-hotspot-info').style.display = 'none';
+            document.getElementById('card-wifi-scan').style.display = 'none';
+            // Auto-load connection details
+            get_internet();
+          } else if (data.WIFI_status === "hotspot") {
+            WIFI_statusElement.textContent = "Hotspot";
+            WIFI_statusElement.className = "badge text-bg-warning";
+            document.getElementById('btn-forget-wifi').style.display = 'none';
+            document.getElementById('card-connection-info').style.display = 'none';
+            document.getElementById('card-hotspot-info').style.display = '';
+            document.getElementById('card-wifi-scan').style.display = '';
+            // Auto-load cached scan results in hotspot mode
+            wifi_scan();
+          } else {
+            WIFI_statusElement.textContent = "Unknown";
+            WIFI_statusElement.className = "badge text-bg-secondary";
+            document.getElementById('btn-forget-wifi').style.display = 'none';
+            document.getElementById('card-connection-info').style.display = 'none';
+            document.getElementById('card-hotspot-info').style.display = 'none';
+            document.getElementById('card-wifi-scan').style.display = '';
+          }
+
+          // Always load ethernet info
+          load_ethernet_info();
+        },
+        error: function(xhr, status, error) {
+          console.error('AJAX request failed:', status, error);
+        }
+      });
+
+      // Load RTC time
+      $.ajax({
+        url: 'launcher.php?type=RTC_time',
+        dataType: 'text',
+        method: 'GET',
+        success: function(response) {
+          const RTC_Element = document.getElementById("RTC_time");
+          if (RTC_Element) RTC_Element.textContent = response;
+        },
+        error: function(xhr, status, error) {
+          console.error('AJAX request failed:', status, error);
+        }
+      });
+    }
 
 </script>