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:
@@ -29,13 +29,18 @@
|
|||||||
<%= u.admin ? %{<span class="fs1" aria-label="check" data-icon=""}.html_safe : nil %>
|
<%= u.admin ? %{<span class="fs1" aria-label="check" data-icon=""}.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(){
|
||||||
|
|||||||
Reference in New Issue
Block a user