CODEWITHSUNDEEP
phpjquerybootstrap-modalbootstrap-4
Matthew Miranda
Matthew Miranda

Reputation: 148

How to pass value in bootstrap v4 modal?

As you can see below, I have a php-generated table with a td that contains both edit and delete anchors. I put the $data['id'] inside the data-id attribute of the anchor and I pass it to the modal via jquery. However, the ID of the article is not being displayed on the modal. Can someone tell what is wrong with my codes? Is it the php, the html, or the jquery? Thanks!

<?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-GENERATED TABLE

<!-- 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) {

An error shows on this line above:

Uncaught ReferenceError: $ is not defined at cms.php:162

Upvotes: 0

Views: 1522

Answers (1)

Sivaraj S
Sivaraj S

Reputation: 340

var opener = $(e.relatedTarget); instead of var opener=e.relatedTarget;

Reference Bootstrap Modal

Hope this helps!

<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>

// Sample php data

<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>

Upvotes: 1

Related Questions