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 %> <%= u.admin ? %{<span class="fs1" aria-label="check" data-icon="&#xe0fe;"}.html_safe : nil %>
</td> </td>
<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> </td>
</tr> </tr>
<% end %> <% end %>
</tbody> </tbody>
</table> </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>
<div class="clearfix"> <div class="clearfix">
</div> </div>
@@ -46,8 +51,9 @@
function openEditModal(id){ function openEditModal(id){
var link = '/admin/'+ id +'/get_user'; var link = '/admin/'+ id +'/get_user';
$("#editAcct").load(link); $("#editAcct .modal-content").load(link);
$("#editAcct").modal('show'); var modal = new bootstrap.Modal(document.getElementById('editAcct'));
modal.show();
}; };
function dataTablePagination(){ function dataTablePagination(){