reusable button

f5devcentral · Apr 29, 2024 · af7930d · af7930d
1 parent 0cfa33f
commit af7930d
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 20 deletions.
diff --git a/labapp/app/markdown/lb.md b/labapp/app/markdown/lb.md
@@ -58,25 +58,8 @@ Build an origin pool and load balancer based on the following criteria:
 </div>
 <div id="result1" class="mt-3"></div>
 <script>
-document.getElementById('requestBtn1').addEventListener('click', async () => {
-    const button = document.getElementById('requestBtn1');
-    const resultDiv = document.getElementById('result1');
-    button.disabled = true;
-    try {
-        const response = await axios.get('/_lb1');
-        if (response.data.status === 'success') {
-            const prettyJson = JSON.stringify(response.data.data, null, 4);
-            resultDiv.innerHTML = `<pre class="alert alert-success"><b>Success:</b><br><code>${prettyJson}</code></pre>`;
-        } else {
-            const errJson = JSON.stringify(response.data.error, null, 4);
-            resultDiv.innerHTML = `<div class="alert alert-danger"><b>Request Failed:</b>&nbsp;&nbsp;<code>${errJson}</code></div>`;
-        }
-    } catch (error) {
-        resultDiv.innerHTML = `<div class="alert alert-danger">Error: ${error.message}</div>`;
-    } finally {
-        button.disabled = false;
-        resultDiv.scrollIntoView({ behavior: 'smooth', block: 'end' }); // Smooth scroll to the resultDiv
-    }
+document.getElementById('requestBtn1').addEventListener('click', () => {
+    makeHttpRequest('requestBtn1', '/_lb1', 'result1'); // Now passing 'result1' as the result div ID
 });
 </script>
 

diff --git a/labapp/app/templates/base.html b/labapp/app/templates/base.html
@@ -65,7 +65,26 @@
           }
           return null;
       }
-
+      async function makeHttpRequest(buttonId, requestUrl, resultDivId) {
+        const button = document.getElementById(buttonId);
+        const resultDiv = document.getElementById(resultDivId);
+        button.disabled = true;
+        try {
+            const response = await axios.get(requestUrl);
+            if (response.data.status === 'success') {
+                const prettyJson = JSON.stringify(response.data.data, null, 4);
+                resultDiv.innerHTML = `<pre class="alert alert-success"><b>Success:</b><br><code>${prettyJson}</code></pre>`;
+            } else {
+                const errJson = JSON.stringify(response.data.error, null, 4);
+                resultDiv.innerHTML = `<div class="alert alert-danger"><b>Request Failed:</b>&nbsp;&nbsp;<code>${errJson}</code></div>`;
+            }
+        } catch (error) {
+            resultDiv.innerHTML = `<div class="alert alert-danger">Error: ${error.message}</div>`;
+        } finally {
+            button.disabled = false;
+            resultDiv.scrollIntoView({ behavior: 'smooth', block: 'end' });
+        }
+      }
       </script>
 
 </head>