From 334bc34cbe37b235f9e98e0c563c244232035fb8 Mon Sep 17 00:00:00 2001
From: Ken Johnson <cktricky@gmail.com>
Date: Sun, 7 Dec 2025 21:10:39 +0000
Subject: [PATCH] Fix Bootstrap 5 modal compatibility in admin user editor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix "Illegal invocation" JavaScript error when opening edit modal:
- Remove Bootstrap 2 'hide' class from modal markup
- Add proper Bootstrap 5 modal structure (modal-dialog/modal-content)
- Update JavaScript to use Bootstrap 5 Modal API
- Load dynamic content into .modal-content instead of root modal
- Remove legacy data-toggle attribute from button

The modal now uses the correct Bootstrap 5.3 structure and API,
resolving selector-engine.js errors.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/views/admin/get_all_users.html.erb | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/app/views/admin/get_all_users.html.erb b/app/views/admin/get_all_users.html.erb
index bf092ea..f26efe1 100755
--- a/app/views/admin/get_all_users.html.erb
+++ b/app/views/admin/get_all_users.html.erb
@@ -29,13 +29,18 @@
               <%= u.admin ? %{<span class="fs1" aria-label="check" data-icon="&#xe0fe;"}.html_safe : nil %>
             </td>
             <td>
-              <%= link_to "Edit", "#", {:onClick => "javascript:openEditModal(#{u.id});", :role => "button", :style => "width:70px", :class => "btn btn-inverse", "data-toggle" => "modal"}%>
+              <%= link_to "Edit", "#", {:onClick => "javascript:openEditModal(#{u.id});", :role => "button", :style => "width:70px", :class => "btn btn-inverse"}%>
             </td>
           </tr>
      <% end %>
       </tbody>
     </table>
-  <div id="editAcct" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
+  <div id="editAcct" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <!-- Content will be loaded here dynamically -->
+      </div>
+    </div>
   </div>
     <div class="clearfix">
     </div>
@@ -46,8 +51,9 @@
 
 function openEditModal(id){
  var link = '/admin/'+ id +'/get_user';
- $("#editAcct").load(link);
- $("#editAcct").modal('show');
+ $("#editAcct .modal-content").load(link);
+ var modal = new bootstrap.Modal(document.getElementById('editAcct'));
+ modal.show();
 };
 
 function dataTablePagination(){