访问Bootstrap表中特定行的对象并传入Modal

问题描述 投票:2回答:1

我有一个表,其中每行是一个对象,并显示某些属性。每行还有一个按钮,用于打开删除模式,该模式将从数据库中删除该行上的对象。模态Twig模板可以访问显示的对象数组,但我需要一种方法来查找要搜索和删除数据库的对象。

这是用于显示数据的树枝模板代码。

{%  for announcement in announcements %}
    <tr>
        <th scope="row">{{ announcement.content }}</th>
        <td>{{ announcement.isDisplayed() }}</td>
        <td style="float:right;">
            <div>
                <button class="btn btn-sm" data-toggle="modal" data-target="#announcementDeleteModal">
                         <span class="fa fa-trash btn-link"></span>
                          Delete announcement
                </button>

模态模板,也有数组announcements的重音

<div class="modal fade" id="announcementDeleteModal" tabindex="-1" role="dialog"  aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">
                <span class="fa fa-cat"></span><div>Srsly delete that?</div>
            </h5>
        </div>
        <div class="modal-body">
            {{ form_start(deleteForm) }}
            {{ form_end(deleteForm) }}
            <span class="fa fa-cat"></span><div>Srsly delete that?</div>
            <button type="button" class="btn btn-secondary" data-dismiss="modal" aria-label="Close">
                Fine. Keep it.
            </button>
        </div>
    </div>
</div>

这是发送ajax请求的jQuery代码。 var id正在捕获正确的数据。我只需要通过控制器访问它。我试过$request->get('id')$request->get('id')

$('.action-button').click(function () {
        alert("ran");
        var id = $(this).data('id');
        alert(id);
        $.ajax({
            url:"/admin/announcements",
            method: "POST",
            cache: false,
            data: { id: id },
            success: function (html) {
                alert("success");
               // $(this).parent().parent().remove();

            }
        });
    });
jquery html5 twitter-bootstrap symfony twig
1个回答
1
投票

实际上我不明白这个问题,但我建议您可以在渲染模板时为每个行元素创建一个模态,或者编写一个自定义JS脚本并通过数据属性传递对象ID并将其存储到一些隐藏字段中。

© www.soinside.com 2019 - 2024. All rights reserved.