Modal will not open. Throwing Uncaught error...

[Moorcam]

Hi guys,

When I try to open a Bootstrap 5 Modal I get the following error in console:

vendor.bundle.base.js:9 Uncaught TypeError: Cannot read properties of undefined (reading 'backdrop')
    at On._initializeBackDrop (vendor.bundle.base.js:9:52555)
    at new On (vendor.bundle.base.js:9:51462)
    at On.getOrCreateInstance (vendor.bundle.base.js:9:7913)
    at HTMLAnchorElement.<anonymous> (vendor.bundle.base.js:9:55451)
    at HTMLDocument.n (vendor.bundle.base.js:9:4238)

Here is the link to open the modal:

<li class="nav-item"> <a class="nav-link" data-bs-toggle="modal" data-bs-target="#websettingsModal" href="#"><?php echo lang('WEBSITE_SETTINGS'); ?></a></li>

And the modal itself:

<div class="modal fade" id="websettingsModal" tabindex="-1" aria-labelledby="websettings" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="websettings">Modal title</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>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

If anyone could help that would be great.

Thanks,

Dan

[requinix]

https://www.google.com/search?q=bootstrap+modal+undefined+backdrop

Looks relevant.

[Moorcam]

15 minutes ago, requinix said:

https://www.google.com/search?q=bootstrap+modal+undefined+backdrop

Looks relevant.

I had a look at those. Funny thing is, and I should have mentioned this, I have other Modals, with same links and same modal types that open with no issue. Just this one that is throwing that error.

[requinix]

Then, as before, there's something wrong with this particular modal or its setup.

[Moorcam]

Just now, requinix said:

Then, as before, there's something wrong with this particular modal or its setup.

Yeah I'm guessing that too. However, strange as it may seem, I created a new empty Modal from Bootstrap website and a new link to open that Modal, with a new ID etc, and same issue. It's really strange how the other Modals, which are called from the same file, modals.php, are working fine.

[Moorcam]

Ok, the issue only seems to happen when I wrap the Modal in php:

  if(ISSET($_POST['websettings_save'])){
	$charter_max = $_POST['charter_max'];
 
    $sql = "UPDATE web_settings SET charter_max='$charter_max'";

if (mysqli_query($conn, $sql)) {
$msg = '<div id="msg"><h4 class="text-success">Website settings updated successfully!</h4></div>';

} else {
  $msg = '<div id="msg"><h4 class="text-danger">Error updating Website settings: ' . mysqli_error($conn) . '</h4></div>';
}

  }
 // SELECT FROM Web Settings
$sql = "SELECT * FROM web_settings";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
  // output data of each row
  while($row = $result->fetch_assoc()) {
  ?>
<div class="modal fade" id="websettingsModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel"><?php echo lang('WEB_SETTINGS'); ?></h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
	  <form method="POST">
      <div class="modal-body">
        <p class="text-muted"><?php echo lang('UPDATE_WEB_SETTINGS'); ?></p>
          <div class="mb-3">
            <label for="charter_max" class="col-form-label"><?php echo lang('CHARTER_MAX'); ?>:</label>
            <input type="text" class="form-control" name="charter_max" id="charter_max" value="<?php echo $row['charter_max']; ?>">
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i class="fa fa-close"></i> <?php echo lang('CLOSE'); ?></button>
        <button type="submit" onclick="javascript:window.location.reload()" name="settings_save" id="save" class="btn btn-success"><i class="fa fa-save"></i> <?php echo lang('SAVE'); ?></button>
      </div>
	  </form>
    </div>
  </div>
</div>

<?php
  }
}
  ?>

But, other Modals are done the same way with no issue.

[kicken]

Assuming your while loop is running more than once, you're duplicating your element IDs which results in invalid HTML.  ID values must be unique within the document.

[Moorcam]

All sorted.

Don't know exactly what I was doing wrong. Rewrote the php and it worked.