如何在Bootstrap V4模態中傳遞值？

Question

如您在下面看到的，我有一個php生成的表，其中包含一個td ，同時包含edit和delete anchors 。 我將$ data ['id']放入錨的data-id屬性中，並通過jquery將其傳遞給模式。 但是，文章的ID不會顯示在模式上。 有人可以告訴我代碼有什么問題嗎？ 是php，html還是jquery？ 謝謝！

<?php
     require "../connection.php";
     $query = mysqli_query($conn, "SELECT * FROM `articles`");
     while($data = mysqli_fetch_array($query)) {
         echo '<tr>';
         echo '<th scope="row">'.$data['id'].'</th>';
         echo '<td><div align="center"><a href="#myModal" data-id="'.$data['id'].'" data-toggle="modal" class="btn btn-success btn-sm">Edit</a><a href="#" data-toggle="modal" data-target="#" class="btn btn-danger btn-sm">Delete</a></div></td>';
         echo '</tr>';
     }
?>

PHP生成的表

<!-- Modal-->
<div id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" class="modal fade text-left">
     <div role="document" class="modal-dialog">
          <div class="modal-content">
               <div class="modal-header">
                    <h5 id="exampleModalLabel" class="modal-title">Edit Article</h5>
                    <button type="button" data-dismiss="modal" aria-label="Close" class="close">
                    <span aria-hidden="true">×</span></button>
               </div>
          <div class="modal-body">
          <p>Please save your changes after editing the article.</p>
          <form id="myForm">
               <div class="form-group">
               <label>ID</label>
               <input type="text" value="" name="articleId" id="articleId" class="form-control">
          </form>
     </div>
     <div class="modal-footer">
          <button type="button" data-dismiss="modal" class="btn btn-secondary">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
     </div>
 </div>

HTML模態

$('#myModal').on('show.bs.modal', function (e) {
  // get information to update quickly to modal view as loading begins
  var opener=e.relatedTarget;//this holds the element who called the modal

   //we get details from attributes
  var myArticleId=$(opener).attr('data-id');

//set what we got to our form
  $('#myForm').find('[name="articleId"]').val(myArticleId);

});

JQUERY

<table class="table table-striped table-hover">
 <thead>
  <tr>
  <th>ID</th>
  <th>Title</th>
  <th>Summary</th>
  <th>Content</th>
  <th><div align="center">Date Published</div></th>
  <th><div align="center">Date Last Edited</div></th>
  <th><div align="center">Action</div></th>
  </tr>
 </thead>
 <tbody>
  <tr>
  <th scope="row">1</th>
   <td><div align="center"><a href="#articleEditModal" data-id="1" data-toggle="modal" class="btn btn-success btn-sm">Edit</a><a href="#" data-toggle="modal" data-target="#" class="btn btn-danger btn-sm">Delete</a></div>
   </td>
  </tr>
  <tr>
   <th scope="row">2</th>
    <td><div align="center"><a href="#articleEditModal" data-id="2" data-toggle="modal" class="btn btn-success btn-sm">Edit</a><a href="#" data-toggle="modal" data-target="#" class="btn btn-danger btn-sm">Delete</a></div>
    </td>
  </tr>
  <tr>
   <th scope="row">3</th>
    <td><div align="center"><a href="#articleEditModal" data-id="3" data-toggle="modal" class="btn btn-success btn-sm">Edit</a><a href="#" data-toggle="modal" data-target="#" class="btn btn-danger btn-sm">Delete</a></div>
    </td>
  </tr>                    
 </tbody>
</table>

檢查頁-表

$('#articleEditModal').on('show.bs.modal', function (e) {

上面的此行顯示錯誤：

未捕獲的ReferenceError：$在cms.php：162中未定義

Answer 1

var opener = $(e.relatedTarget); 而不是var opener=e.relatedTarget;

參考自舉模式

希望這可以幫助！

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" crossorigin="anonymous"></script>

<table>
    <tr>
        <th scope="row">2</th>
        <td>
            <a href="#articleEditModal" data-article-id="2" data-toggle="modal" class="btn btn-success btn-sm">Edit</a> 
            <a href="#" data-toggle="modal" data-target="#" class="btn btn-danger btn-sm">Delete</a>
        </td>
    </tr>
</table>


<!-- Modal-->
<div id="articleEditModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" class="modal fade text-left">
   <div class="modal-content">
      <div class="modal-header">
         <h5 id="exampleModalLabel" class="modal-title">Edit Article</h5>
         <button type="button" data-dismiss="modal" aria-label="Close" class="close">
         <span aria-hidden="true">×</span></button>
      </div>
      <div class="modal-body">
         <p>Please save your changes after editing the article.</p>
         <form id="myForm">
            <div class="form-group">
               <label>ID</label>
               <input type="text" value="" name="articleId" id="articleId" class="form-control">
         </form>
         </div>
         <div class="modal-footer">
            <button type="button" data-dismiss="modal" class="btn btn-secondary">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
         </div>
      </div>
   </div>
</div>

<script>
$('#articleEditModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget);

    var article_id = button.attr('data-article-id')
    // take advantage of data attribute
    // var article_id = button.data('article-id'); 

    var modal = $(this)
    modal.find('.modal-title').text('Article ' + article_id)
    modal.find('.modal-body input').val(article_id)
})
</script>

//樣本php數據

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" crossorigin="anonymous"></script>

<?php
     require "../connection.php";
     $query = mysqli_query($conn, "SELECT * FROM `articles`");
     while($data = mysqli_fetch_array($query)) {
        echo '<tr>';
        echo '<th scope="row">'.$data['id'].'</th>';
        echo '<td><div align="center"><a href="#myModal" data-id="'.$data['id'].'" data-toggle="modal" class="btn btn-success btn-sm">Edit</a><a href="#" data-toggle="modal" data-target="#" class="btn btn-danger btn-sm">Delete</a></div></td>';
        echo '</tr>';
     }
?>
<!-- Modal-->
<div id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" class="modal fade text-left">
     <div role="document" class="modal-dialog">
          <div class="modal-content">
               <div class="modal-header">
                    <h5 id="exampleModalLabel" class="modal-title">Edit Article</h5>
                    <button type="button" data-dismiss="modal" aria-label="Close" class="close">
                    <span aria-hidden="true">×</span></button>
               </div>
          <div class="modal-body">
          <p>Please save your changes after editing the article.</p>
          <form id="myForm">
               <div class="form-group">
               <label>ID</label>
               <input type="text" value="" name="articleId" id="articleId" class="form-control">
          </form>
     </div>
     <div class="modal-footer">
          <button type="button" data-dismiss="modal" class="btn btn-secondary">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
     </div>
 </div>

<script>
$('#myModal').on('show.bs.modal', function (e) {
  // get information to update quickly to modal view as loading begins
  var opener=$(e.relatedTarget);//this holds the element who called the modal

   //we get details from attributes
  var myArticleId=$(opener).attr('data-id');

//set what we got to our form
  $('#myForm').find('[name="articleId"]').val(myArticleId);

});

</script>