我在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来加载动态视图。
答案 0 :(得分:6)
当你可以使用属性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">×</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)
})