Modal Content Fill

by Hifni Nazeer

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<label>Click This you will be getting content in a Modal</label><br>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-account-id="JKB673130569VN00">
  Cash Statement
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="modalExampleBody">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

JavaScript

$(document).ready(function() {
  alert('hello');

  //Modal
  $('#exampleModal').on('show.bs.modal', function(event) {
    var button = $(event.relatedTarget);
    var accountId = button.data('account-id');
    var modal = $(this);

		modal.find('.modal-body').html('<h4>Loading....</h4>');

    //api
    $.getJSON("https://jksbapiapp.azurewebsites.net/api/accountstatements", {
        'id': accountId
      })
      .done(function(json) {
        var data = json.Data;
        var htmlBody = data.HtmlValue;
        
        alert(htmlBody);
        
        modal.find('.modal-title').text('A/c ' + accountId);
        modal.find('.modal-body').html(htmlBody);
      })
      .fail(function(jqxhr, textStatus, error) {
        var err = textStatus + ", " + error;
        console.log("Request Failed: " + err);
        modal.find('.modal-title').val(err);
      });
  });
});