How do I load bootstrap modal content dynamically from a different html file using java script?

Question

I want to load the bootstrap model content located in another html file (record.html) dynamically on a button click. Please help me to resolve the issue. i had referred similar questions and tried different options but still not working. please help.

I get the following error when i inspect:

For reference please find my code below:

test2.html

<!DOCTYPE html>
<html lang="english">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Testing2</title>

  <!-- Bootstrap CSS CDN -->
    
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

  <!-- Our Custom CSS -->
  <link rel="stylesheet" href='style.css'>

</head>

<body>

  <button type="button" class="btn-modal" href="record.html" id="buttonCustom">
    launch modal
  </button> 

  <div class="modal fade" id="recordContent">
    <div class="modal-dialog modal-dialog-scrollable modal-lg">
      <div class="modal-content">
      </div>
    </div>
  </div>  

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

  <script>
    $("#buttonCustom").click(function(){           
      $('#recordContent').modal('show').find('.modal-content').load($(this).attr('href'));
    });
  </script>    

  <script>
    $(document).on("click","#closeButton",function(){
      $('#recordContent').modal('hide');
    });
  </script>

</body>

</html>

record.html

<div class="modal-header">    
    <h4 class="modal-title">Modal with Dynamic Content</h4>
    <button type="button" class="close" data-dismiss="modal"></button>
</div>

<div class="modal-body">
    hello this is modal content
</div>

<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal" id="closeButton">Close</button>
</div>

Answer 1

here is how you do it

/*This goes into your HTML page body*/

<div class="modal fade mt-5" role="dialog">
   <div class="modal-dialog modal-lg" id="modalID"></div>
</div>

/*This goes in your script tag*/

<script type="text/javascript">
$(document).ready(function() {
  // Page Modals
  $("#modalID").load("/path/to/your/file", function() {}); 
  /*empty callback but if you want you can do stuff here */
});
</script>

yourModal.html

<div class="modal-content">
  <div class="modal-header bg-white justify-content-center">
    <h5 class="modal-title font-weight-bold ml-auto">MOdal Title</h5>
    <button type="button" class="close text-elegant" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body bg-white">
    /* Your modal dialoge body goes in here
    */
  </div>
</div>

For this to work you will need jquery 3.3 or above

Answer 2

You can use below code:

 $(document).ready(function () {
                $(function () {
                    $("#buttonCustom").on('click', function (e) {
                        var url = $(this).attr('href');
                        $(".modal-content").html('<object data="' + url + '"/>');
                        $('#recordContent').modal('show');
                    });
                });
            });

How do I load bootstrap modal content dynamically from a different html file using java script?

Question

2 answers

solution1
0 2021-05-22 13:37:55

solution2
0 2021-05-22 13:53:29

How do I load bootstrap modal content dynamically from a different html file using java script?

Question

2 answers

solution1 0 2021-05-22 13:37:55

solution2 0 2021-05-22 13:53:29

solution1
0 2021-05-22 13:37:55

solution2
0 2021-05-22 13:53:29