CODEWITHSUNDEEP
javascriptjquerybootstrap-5
griffgj
griffgj

Reputation: 71

Bootstrap v5 modal show issue

I decided to go ahead and update my site to the latest version of Bootstrap, version 5.0 and am having difficulty getting modals to work. Reading the migration guide said nothing about breaking modals and my site worked perfectly before. My code uses javascript/jQuery to fire off the modal after the ajax loads the text. The ajax part still works fine, but it's not firing the modal after it retrieves it. I'm using the latest bootstrap.bundle.min.js.

$( document ).ready(function() {
$('.hourModal').click(function(){
    var obj_id = $(this).data('id');
    $.ajax({
        url: 'ajax-multi.php',
        type: 'POST',
        data: {obj_id: obj_id,role:'some_role'},
        //dataType: 'html',
        success: function(response){ 
            $('.modal-body').html(response);
            //$('#hourModal').modal('show'); //Old way that worked great
            var hourModal = new bootstrap.Modal(document.getElementById('hourModal'));
            hourModal.show(); // New way I tried from the Bootstrap documentation
        }
    });
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">

<!-- Button -->
<button type="button" class="btn btn-secondary btn-sm py-0 me-1 hourModal" data-id="1">Blocks</button>

<!-- Modal -->
<div class="modal fade" id="hourModal" tabindex="-1">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Object Times</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">  </button>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

The error I get is: Uncaught TypeError: BACKDROP: Option "rootElement" provided type "null" but expected type "element".

Any help is greatly appreciated!

UPDATE: As described below, I had to move bootstrap.min.js to the end of the page, after </body> and leave where I call jquery.min.js at the top in the header. Anyone have any idea why it has to be done this way?

Upvotes: 7

Views: 6393

Answers (6)

caner
caner

Reputation: 575

In bootstrap 4 or 5 you maybe forgetting the '#' in

data-bs-target="#exampleModal"

Upvotes: 0

Anton Maminov
Anton Maminov

Reputation: 532

UPDATE:

Fixed in Bootstrap 5.0.1

I had the same problem. The only difference I use Webpack to build.

If you want to load your scripts from head section you can try to add async option.

This fixed the issue for me.

<script src="..." async="async"></script>

Upvotes: 4

G-Unit
G-Unit

Reputation: 61

This issue is fixed in currently available 5.0.1

Upvotes: 6

Ed Gonzalez
Ed Gonzalez

Reputation: 43

mamantoha's suggestion seems to be the better way to handle this since it doesn't require moving the outside the section, and some people may have dependencies that require bootstrap to be loaded ahead of other scripts in the section.

Upvotes: 1

kastenieks
kastenieks

Reputation: 121

Move your <script> with bootstrap at the end of the <body>. It fixed my Bootstrap 5 modal issue.

Upvotes: 12

Kenedy Morais
Kenedy Morais

Reputation: 31

I had the same problem. I called jquery.js and bootstrap.js at the end of the html and before /body and it worked correctly.

Upvotes: 3

Related Questions