data is not showing dynamically in modal window with ajax

Question

I have one modal window in which I am fetching data dynamically with the help of Ajax functionality, but data is not shown in the modal window.

Following is the HTML code for modal window.

<div id="tariffdetailModal" class="modal show fade" data-backdrop="static">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title">Dynamic Data</h6>
      </div>
      <input type="text" name="tmcode" id="tmcode" />
      <div class="modal-body pt-1">
        <div class="control-container" id="tariffdetail_data"> </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal"> <i class="fa fa-close"></i> Cancel </button>
      </div>
    </div>
  </div>
</div>

Following is the JavaScript code for loading data with Ajax function.

<script>
  $(document).ready(function(){

    $('#tariffdetailModal').on('show.bs.modal', function(e) {
      var tmcode = $(e.relatedTarget).data('book_id').tmcode;
      $(e.currentTarget).find('input[name="tmcode"]').val(tmcode);
      load_data();
    });

    function load_data(){
         $.ajax({
              url:"tariffdetaildata.php",
              method:"POST",
              //async: true,
              data:{},
              success:function(data){
                   $('#tariffdetail_data').html(data);
              }
         });

    }
  })
</script> 

Following is the php page for data which is called in the Ajax function....

<?php
    $output=''; 
    $output .='<input type="text" name="abcd" value="abcd" />';
    echo $output;
?>

Answer 1

I don't see any var tmcode = $(e.relatedTarget).data('book_id').tmcode; . Where's the attribute "book_id" coming from? .data('book_id) may be returning undefined or an empty value. Check that.