javascript - 使用 Symfony 打开具有动态值的模态

Question

我在我的 Symfony 项目中遇到了模态问题。目前，我在表中有一个成员列表。对于每一行，都有一个用于操作的按钮:查看、编辑和删除。我在我的 Twig View 中这样做:

 <a href="{{ path('member_edit', {'id': member.id})}}" class="btn btn-default">
                                            <i class="glyphicon glyphicon-info-sign"></i>
                                        </a>

如您所见，链接是动态的，带有记录的 ID。现在，我想为所选操作打开一个模式。在我的示例中，我需要转到类似/member/edit/IdOfUser

如何在模式中加载此 View ？我是否需要为此创建一个表单模板？我想我需要使用 ajax 来加载动态 View 。

Answer 1

我建议在可以使用属性 data-XXX 时使用 bootstrap 3 的模态(这里的例子是 data-whatever)

HTML

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="{{ member.id }}">
    <i class="glyphicon glyphicon-info-sign"></i>
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">Demo</h4>
            </div>
            <div class="modal-body">
                Body modal
                <input type="text" name="id" class="modal-body input"/>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Javascript

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var id= button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('The ID is: ' + id)
  modal.find('.modal-body input').val(id)
})