Attach events to HTML elements with javascript

diff --git a/src/pgwui_sql/static/pgwui_sql.js b/src/pgwui_sql/static/pgwui_sql.js
index 89e04b5417c2032aef37fde91121afb001557f0c..d87adff04068c1b3545f8e6e48ccef9ae1670189 100644 (file)
--- a/src/pgwui_sql/static/pgwui_sql.js
+++ b/src/pgwui_sql/static/pgwui_sql.js
@@ -61,6 +61,13 @@ function getSheet(url) {
             return sheet;
         }}}
 
+function attachEvents() {
+    const new_entry_button = document.getElementById('new_entry_window_id');
+    if (new_entry_button !== null) {
+        new_entry_button.addEventListener("click", openSqlEdit);
+    }
+}
+
 function initializeStyling() {
     // Apply a checkbox when it exists
     function applyCheckbox(id, initFunc) {
@@ -76,4 +83,5 @@ function initializeStyling() {
 /* Initialization */
 globalThis.tdSqltextSheet = getSheet(pgwuiSqlShowWhitespaceURL());
 globalThis.horizontalRuleSheet = getSheet(pgwuiSqlBackgroundRulesURL());
+attachEvents();
 initializeStyling();

diff --git a/src/pgwui_sql/static/sql_edit.js b/src/pgwui_sql/static/sql_edit.js
index 0f2a3532f75c9abd047cdefd06e12266e15bdff0..9ecac76d540bfd79905bc650ab8f10851e567a0f 100644 (file)
--- a/src/pgwui_sql/static/sql_edit.js
+++ b/src/pgwui_sql/static/sql_edit.js
@@ -21,7 +21,7 @@
   Karl O. Pinc <kop@karlpinc.com>
 */
 
-function show_search_path() {
+function showSearchPath() {
   fetch('${request.route_path("pgwui_sql_db_search_path")|n}')
     .then((response) => {
           if (!response.ok) {
@@ -58,3 +58,28 @@ function toggleEOLInfoRow() {
         expanded.setAttribute('hidden', 'hidden');
     }
 }
+
+
+/* Initialization */
+
+function attachEvents() {
+    document.getElementById('show_search_path_btn_id')
+        .addEventListener("click", showSearchPath);
+
+    const expand_eol_info = document.getElementById('expand_eol_info_id');
+    const collapse_eol_info = document.getElementById('collapse_eol_info_id');
+    expand_eol_info.addEventListener("click", toggleEOLInfoRow);
+    collapse_eol_info.addEventListener("click", toggleEOLInfoRow);
+    expand_eol_info.addEventListener("keydown", toggleEOLInfoRow);
+    collapse_eol_info.addEventListener("keydown", toggleEOLInfoRow);
+
+    document.getElementById('tab_delimited_help_id')
+        .addEventListener("click", () =>
+            window.alert(
+              'Caution: Tabs are not removed from SQL results.'
+              + '  Data containing tab characters will introduce'
+              + ' spurious/extra columns.'
+            ));
+}
+
+attachEvents();

diff --git a/src/pgwui_sql/templates/sql.mak b/src/pgwui_sql/templates/sql.mak
index 69157b579a96a5dd940c95cf4a052a7137bb79bd..f6d8ba6b9786fd356470e274cc48cc107aca99c1 100644 (file)
--- a/src/pgwui_sql/templates/sql.mak
+++ b/src/pgwui_sql/templates/sql.mak
@@ -202,7 +202,7 @@
      <input value="Login" tabindex="${tab_index.val}" type="submit" />
    % else:
      <button type="button" tabindex="${tab_index.val}"
-             onclick="openSqlEdit();"
+             id="new_entry_window_id"
      >New SQL Entry Window</button>
    % endif
    <% tab_index.inc() %>

diff --git a/src/pgwui_sql/templates/sql_edit.mak b/src/pgwui_sql/templates/sql_edit.mak
index efc8a97674cf0af30df1046caeeb6fbc5961ee81..7ce75d8a706b1520ae3bba69fe000fec7ad18274 100644 (file)
--- a/src/pgwui_sql/templates/sql_edit.mak
+++ b/src/pgwui_sql/templates/sql_edit.mak
@@ -81,7 +81,7 @@
         </%self.lib:td_input>
         <td>
           <button type="button" tabindex="${tab_index.val}"
-                  onclick="show_search_path();"
+                  id="show_search_path_btn_id"
           >Reset</button>
           <% tab_index.inc() %>
         </td>
@@ -144,12 +144,12 @@
 <%def name="eol_info_row(tab_index)">
       <tr class="eol_info">
         <td colspan="4"><span id="collapsed_eol_info_id"
-          ><p onclick="toggleEOLInfoRow()" onkeydown="toggleEOLInfoRow()"
+          ><p id="expand_eol_info_id"
               tabindex="${tab_index.val}"
           >▲ Important information about the end-of-line marker characters
             within text</p></span><span
             id="expanded_eol_info_id" hidden><p
-            onclick="toggleEOLInfoRow()" onkeydown="toggleEOLInfoRow()"
+            id="collapse_eol_info_id"
             tabindex="${tab_index.val}"
           >▼ Important information about the end-of-line marker characters
             within text</p>
@@ -222,11 +222,7 @@
                  ${tab_checked | n}
                  />
           <label class="label" for="download_fmt_tab_id">Tab delimited</label><span
-            onclick="window.alert(
-              'Caution: Tabs are not removed from SQL results.'
-              + '  Data containing tab characters will introduce'
-              + ' spurious/extra columns.'
-              )"
+            id="tab_delimited_help_id"
             class="help">⁈</span>
         </%self.lib:td_input>
       </tr>