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

Question

我在Symfony项目中面临一个模态问题.目前,我有一个表中的成员列表.对于每一行,都有一个操作按钮:查看,编辑和删除.我在我的树枝视图中这样做:

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

如您所见,链接是动态的,带有recod的ID.现在,我想为选择的动作打开一个模态.在我的例子中,我需要去/ member/edit/IdOfUser之类的东西

如何在模态中加载此视图？我是否需要创建表单模板？我想我需要使用ajax来加载动态视图.

Answer 1

当你可以使用属性data-XXX时,我建议使用bootstrap 3的模态(例如这里数据 - 无论如何)

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