如何在bootstrap v4模式中传递值？

时间：2017-10-14 05:28:27

标签： php jquery bootstrap-modal bootstrap-4

如下所示，我有一个php生成的表格，其中 td 包含编辑和删除锚点。我将 $ 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 MODAL 

$('#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>

INSPECTED PAGE - TABLE 

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

上面这一行显示错误：

  

未捕获的ReferenceError：$未定义       在cms.php：162

1 个答案:

答案 0 :(得分：0)

var opener = $(e.relatedTarget);代替var opener=e.relatedTarget;

参考Bootstrap Modal

希望这有帮助！

<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>
相关问题
最新问题