Fix for database query editor not loading when route is loaded via htmx

This commit is contained in:
Peter Stockings
2025-12-03 16:09:31 +11:00
parent 46339cc4cf
commit 9311893c57

View File

@@ -23,8 +23,7 @@
class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 py-4 px-1 text-sm font-medium cursor-pointer"> class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 py-4 px-1 text-sm font-medium cursor-pointer">
Login History Login History
</a> </a>
<a hx-get="{{ url_for('settings.account') }}" hx-target="#container" hx-swap="innerHTML" <a hx-get="{{ url_for('settings.account') }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true"
hx-push-url="true"
class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 py-4 px-1 text-sm font-medium cursor-pointer"> class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 py-4 px-1 text-sm font-medium cursor-pointer">
Account Account
</a> </a>
@@ -160,14 +159,20 @@ erDiagram
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.0/ace.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.0/ace.js"></script>
<script> <script>
const sqlEditor = ace.edit("sql-editor"); // Clean up existing editor if it exists (for HTMX reloads)
sqlEditor.setTheme("ace/theme/monokai"); if (window.sqlEditor) {
sqlEditor.session.setMode("ace/mode/sql"); window.sqlEditor.destroy();
sqlEditor.setOptions({ fontSize: "14px", showPrintMargin: false, showGutter: true, highlightActiveLine: true, enableLiveAutocompletion: true }); window.sqlEditor.container.remove();
sqlEditor.setValue(`SELECT * FROM http_functions`, -1); }
window.sqlEditor = ace.edit("sql-editor");
window.sqlEditor.setTheme("ace/theme/monokai");
window.sqlEditor.session.setMode("ace/mode/sql");
window.sqlEditor.setOptions({ fontSize: "14px", showPrintMargin: false, showGutter: true, highlightActiveLine: true, enableLiveAutocompletion: true });
window.sqlEditor.setValue(`SELECT * FROM http_functions`, -1);
document.getElementById('run-query-btn').addEventListener('click', async () => { document.getElementById('run-query-btn').addEventListener('click', async () => {
const query = sqlEditor.getValue().trim(); const query = window.sqlEditor.getValue().trim();
const runBtn = document.getElementById('run-query-btn'); const runBtn = document.getElementById('run-query-btn');
if (!query) { showMessage('Please enter a SQL query', 'error'); return; } if (!query) { showMessage('Please enter a SQL query', 'error'); return; }
runBtn.disabled = true; runBtn.disabled = true;
@@ -182,7 +187,7 @@ erDiagram
}); });
document.getElementById('clear-query-btn').addEventListener('click', () => { document.getElementById('clear-query-btn').addEventListener('click', () => {
sqlEditor.setValue('', -1); window.sqlEditor.setValue('', -1);
document.getElementById('query-message').classList.add('hidden'); document.getElementById('query-message').classList.add('hidden');
document.getElementById('query-results').classList.add('hidden'); document.getElementById('query-results').classList.add('hidden');
}); });