Fix Bootstrap 5 modal compatibility in admin user editor

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>
This commit is contained in:
Ken Johnson
2025-12-07 21:10:39 +00:00
parent 5601fc174f
commit 334bc34cbe
+10 -4
View File
@@ -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(){