将数据表行值传递给模态

Question

亲爱的，

我试图在单击“编辑”时将一行中的列值传递给模式，但这不起作用。我不确定如何诚实地做到这一点。当我点击编辑时，模式应该打开。我的目标是在禁用字段中显示当前图像名称，让管理员输入新名称重命名。

我的管理模板源 => https://startbootstrap.com/theme/sb-admin-2

数据表代码：

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

模态代码：

<!-- 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代码：

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

我尝试实现的是Passing data to a bootstrap modal中提到的解决方案。但它没有用。你能帮忙解决以上问题吗？

Answer 1

在您的 HTML 中，您正在使用以下属性：

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

然后您似乎试图在您的 JavaScript 中使用以下方式访问它：

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

这里有 3 个问题：

(1) 是 attribute，不是 data

(2) 它的名字是 data-val 而不是 val

(3) 您的函数将事件引用为 e，而不是 event。

因此您需要使用：

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

在那之后，我怀疑你会有一些额外的问题...

上述更改将导致 .$imagesPath[$imageId]. 中的值填充到模式中 - 我认为这不是您想要的。

如何解决这个问题取决于您的问题之外的信息，但是您可以，例如，更改您的 HTML 以包含其他属性 - 例如，如下所示：

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

以上只是一个建议，您可能需要根据自己的需要进行调整。

使用上述更改的演示：

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

在那之后，另一个问题可能是您想要实际保存您的更改并重新显示保存的数据。如果是这样，那么可能需要一个新问题，您可以在其中显示相关的 code/attempt.

将数据表行值传递给模态

Pass datatable row value to modal

php

jquery

modal-dialog

datatables