JSFiddle - React, Tailwind, and code Playground

by Hifni Nazeer

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-account-id="JKB673130569VN00">
  Launch demo modal
</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">
        ...
      </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);

    //call api
    $.ajax({
        url: 'https://jksbapiapp.azurewebsites.net/api/accountstatements',
        data: { "id": accountId },
        dataType: 'json',
        cache: false
    })
    .done(function (response) {
    		alert(response);
    });


    modal.find('.modal-title').text('A/c ' + accountId);
    modal.find('.modal-body input').val(accountId);
  })
});