Javascript DOM click() does not work to open modal

Question

if the page is loaded with GET parameter status=deleteSuccess (ex. localhost/index.php?status=deleteSuccess) php will insert script containing javascript DOM click() to a hidden button to open a modal. but it does not work.

I'm using bootstrap 4.3.1, I'm new at and set it up using https://getbootstrap.com/docs/4.3/getting-started/introduction/#starter-template

I've checked the javascript on console, it worked. I've checked the html generated by PHP, it successfully inserted the script. I've added console.log("test") on the script, it can run.

<button type="button" id="deleteSuccessBtn" style="display: none;" data-toggle="modal" data-target="#deleteSuccess"></button>


<div class="modal fade" id="deleteSuccess" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" align="center">
        <i class="fa fa-check-circle-o" style="font-size:48px;color:green"></i>
        <h5>Data Telah Dihapus</h5>
      </div>
    </div>
  </div>
</div>

<?php
  if (isset($_GET['status'])) {
    ?>
    <script type="text/javascript">
      document.getElementById("deleteSuccessBtn").click();
    </script>
    <?php
  }
?>

I expect to see a modal on page loaded, but it doesn't open

Answer 1

You can manually show or toggle the modal:

<?php
  if (isset($_GET['status'])) {
?>
  <script>
    // assuming jQuery is available
    $('#deleteSuccess').modal('show'); // or 'toggle'
  </script>
<?php
  }
?>

text/javascript is also the default type for script tags, so you don't need to add that.

See: https://getbootstrap.com/docs/4.0/components/modal/#methods for more information on the Modal events.