Pass datatable row value to modal

Question

Dears,

I am trying to pass a column value in a row to a modal when I click on edit, but that is not working. I am not sure how to do that honestly. When I click on edit, a modal should open. My goal is to display the current image name in a disabled field and let the admin enter the new name to rename it.

My admin template source => https://startbootstrap.com/theme/sb-admin-2

datatable code :

<tbody>
    <?php
        foreach ($imagesPath as $imageId=>$imagePath) {
            echo "<tr>";
                echo "  <td> <img src=".$imagePath." border='0' height=200px width=200px /> </td>";
                echo "  <td name='imageName'>".substr($imagePath, 59)."</td>";
                echo "  <td>
                            <a href='#' class='btn btn-info btn-circle' data-toggle='modal' data-target='#editModal' data-val=".$imagesPath[$imageId].">
                                <i class='fas fa-edit'></i>
                            </a>
                            <a href='#' class='btn btn-danger btn-circle'>
                                <i class='fas fa-trash'></i>
                            </a>
                        </td>";
            echo "</tr>";
        }
    ?>
</tbody>

Modal Code:

<!-- Edit Modal-->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="renameModal"
aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="renameModal">Rename Image</h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <label class="control-label" for="oldImageName">Old Image Name</label>
                <input id="oldImageName" class="form-control form-control-user" disabled></input><br>
                <label class="control-label" for="newImageName">New Image Name</label>
                <input id="newImageName" class="form-control form-control-user" type="text" ></input>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                <a class="btn btn-primary" href="#">Rename</a>
            </div>
        </div>
    </div>
</div>

js code:

<script>
    $('#editModal').on('show.bs.modal', function(e) {
        var oldImageValue = $(event.relatedTarget).data('val');
        $(e.currentTarget).find('input[id="oldImageName"]').val(oldImageValue);
    });
</script>

What I tried to implement is a solution mentioned in Passing data to a bootstrap modal . But it did not work. Can you please assist with the above?

andrewJames · Accepted Answer · 2021-08-21T22:14:06.910

In your HTML, you are using the following attribute:

data-val=".$imagesPath[$imageId]."

And then you appear to be trying to access it in your JavaScript using:

var oldImageValue = $(event.relatedTarget).data('val');

There are 3 problems with this:

(1) it's an attribute, not data

(2) its name is data-val not val

(3) your function refers to the event as e, not as event.

Therefore you need to use:

var oldImageValue = $(e.relatedTarget).attr('data-val');

After that, I suspect you will have some additional issues...

The above change will cause the value from .$imagesPath[$imageId]. to be populated in the modal - and I assume that is not what you want.

How you fix this depends on information outside of your question, but you could, for example, change your HTML to include additional attributes - for example, something like this:

data-image-id=".$imagesPath[$imageId]."
data-image-name=".$imagesPath[$imageName]."
... and whatever else you may need...

The above is just a suggestion - you may need to adapt it to your needs.

A demo using the above changes:

$(document).ready(function() {

  var table = $('#example').DataTable();

  $('#editModal').on('show.bs.modal', function(e) {
    var oldPersonValue = $(e.relatedTarget).attr('data-name');
    $(e.currentTarget).find('input[id="oldPersonName"]').val(oldPersonValue);
  });

} );

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>

  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.css"/>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.css"/>
 
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.js"></script>

</head>

<body>

<div style="margin: 20px;">

    <table id="example" class="display dataTable cell-border" style="width:100%">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>123</td>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>
                    <a href="#" 
                       class="btn btn-info btn-circle" 
                       data-toggle="modal" 
                       data-target="#editModal" 
                       data-val="123"
                       data-name="Tiger Nixon">
                        <i class='fas fa-edit'></i>edit
                    </a>
                </td>
            </tr>
            <tr>
                <td>234</td>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>
                    <a href="#" 
                       class="btn btn-info btn-circle" 
                       data-toggle="modal" 
                       data-target="#editModal" 
                       data-id="234"
                       data-name="Garrett Winters">
                        <i class='fas fa-edit'></i>edit
                    </a>
                </td>
            </tr>
            <tr>
                <td>345</td>
                <td>Ashton Cox</td>
                <td>Junior "Technical" Author</td>
                <td>San Francisco</td>
                <td>
                    <a href="#" 
                       class="btn btn-info btn-circle" 
                       data-toggle="modal" 
                       data-target="#editModal" 
                       data-id="345"
                       data-name="Ashton Cox">
                        <i class='fas fa-edit'></i>edit
                    </a>
                </td>
            </tr>
        </tbody>
    </table>

<!-- Edit Modal-->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="renameModal"
aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="renameModal">Rename Person</h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <label class="control-label" for="oldPersonName">Old Person Name</label>
                <input id="oldPersonName" class="form-control form-control-user" disabled></input><br>
                <label class="control-label" for="newPersonName">New Person Name</label>
                <input id="newPersonName" class="form-control form-control-user" type="text" ></input>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                <a class="btn btn-primary" href="#">Rename</a>
            </div>
        </div>
    </div>
</div>

</div>



</body>
</html>

After that, a further problem may be that you want to actually save your changes and re-display the saved data. If that is the case, then that probably needs a new question where you can show the relevant code/attempt.

Thank you for your answer @andrewjames That's what I needed! — DGVTM, Aug 22 '21 at 06:30

Pass datatable row value to modal

1 Answers1