How to pass data to modal in Bootstrap 3?

Question

I've tried passing data to a modal like the example from the Bootstrap documentation on my own website but it still doesn't work?

My first guess would be that it has something to do with includes or that position of each include.

I couldn't find out why it doesn't work so I hope you can help.

My modal is launched by pressing a table row. It looks like this:

<tr data-toggle="modal" data-id="' . $trans['id'] . '" data-target="#transferModal">
    <td>' . $trans['id'] . '</td>
    <td>' . $trans['restaurant'] . '</td>
    <td>' . $trans['korer'] . '</td>
    <td>' . $trans['dato'] . '</td>
    <td>' . $trans['tillader'] . '</td>
  </tr>

My modal looks like this:

<div class="modal fade" id="transferModal" tabindex="-1" role="dialog" aria-labelledby="transferModalLabel">
  <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>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
    <div class="modal-body">
    <form>
      <div class="form-group">
        <label for="recipient-name" class="control-label">Recipient:</label>
        <input type="text" class="form-control" id="recipient-name">
      </div>
      <div class="form-group">
        <label for="message-text" class="control-label">Message:</label>
        <textarea class="form-control" id="message-text"></textarea>
      </div>
    </form>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Send message</button>
  </div>
</div>

This is the JavaScript that's controlling the data-id :

$('#transferModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('id') // Extract info from data-* attributes
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

When I click the table row, the modal opens but the data-id is not inserted anywhere.

Included files are included as listed (same order)

• bootstrap.css // Included in head
• style.css // Own css-file - Included in head
• jquery.min.js // Included last in file
• bootstrap.js // Included last in file

Answer 1

I think you can try,

id = $(event.relatedTarget).attr('data-id'); , which I used in one of my modals.

Answer 2

您忽略了带有模态内容的脚本标签位于调用jQuery的脚本标签上方。

Answer 3

Perhaps you may try my answer, hope this help.

 $(document).ready(function(){ $(".thehide").hide(); $(document).on("click", "table button", function(){ $("#trigger_modal").trigger("click"); $("#myModal .modal-title").html("COMPLETE INFO"); $("#myModal .modal-body").html($("#partial_container").html()); $('#myModal input[name="fullname"]').val($(this).closest("tr").find("td:nth-child(1)").text()); $('#myModal input[name="age"]').val($(this).closest("tr").find("td:nth-child(2)").text()); $('#myModal input[name="civil_status"]').val($(this).closest("tr").find("td:nth-child(3)").text()); }); }); 

 .thehide{display: none;} .display_table{display: table;} .center{margin-left: auto; margin-right: auto;} .margin_zero{margin: 0px !important;} .text_align_center{text-align: center;} .text_align_left{text-align: left;} .text_transform_uppercase{text-transform: uppercase;} .divider{height: 15px; width: 100%; clear: both; float: none;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <table class="table table-hover"> <thead> <tr> <th class="text_align_left text_transform_uppercase">Full Name</th> <th class="text_align_center text_transform_uppercase">Age</th> <th class="text_align_center text_transform_uppercase">Gender</th> <th class="text_align_center text_transform_uppercase">Civil Status</th> <th></th> </tr> </thead> <tbody> <tr> <td class="text_align_left">Full Name 1</td> <td class="text_align_center">20</td> <td class="text_align_center">Single</td> <td> <div class="display_table center"> <button class="btn btn-sucess">View</button> </div> </td> </tr> <tr> <td class="text_align_left">Full Name 2</td> <td class="text_align_center">15</td> <td class="text_align_center">Widow</td> <td> <div class="display_table center"> <button class="btn btn-sucess">View</button> </div> </td> </tr> </tbody> </table> <!-- Button trigger modal --> <button type="button" id="trigger_modal" class="thehide btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <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> <h4 class="modal-title" id="myModalLabel"></h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- the partial container --> <div class="thehide" id="partial_container"> <form> <fieldset> <div class="container-fluid"> <div class="row"> <div class="col-sm-12"> <div class="form-group"> <label>FULL NAME:</label> <input type="text" name="fullname" class="form-control" /> </div> </div> <div class="col-sm-12"> <div class="form-group"> <label>AGE:</label> <input type="text" name="age" class="form-control" /> </div> </div> <div class="col-sm-12"> <div class="form-group"> <label>CIVILS STATUS:</label> <input type="text" name="civil_status" class="form-control" /> </div> </div> </div> </div> </fieldset> <div class="divider"></div> <div class="display_table center"> <button class="btn btn-sucess">Save</button> </div> </form> </div>