I am facing an issue with a modal in my Symfony project. For the moment, I have a list of member in a table. For every row, there is a button for actions : view, edit and delete. I am doing this in my twig view :
<a href="{{ path('member_edit', {'id': member.id})}}" class="btn btn-default">
<i class="glyphicon glyphicon-info-sign"></i>
</a>
As you can see, the link is dynamic with the ID of the recod. Now, I want to open a modal for the choosen action. In my example, I need to go to something like /member/edit/IdOfUser
How I can load this view in a modal ? Do I need to create a form template for doing that ? I think I need to use ajax for loading the dynamic view.
I am facing an issue with a modal in my Symfony project. For the moment, I have a list of member in a table. For every row, there is a button for actions : view, edit and delete. I am doing this in my twig view :
<a href="{{ path('member_edit', {'id': member.id})}}" class="btn btn-default">
<i class="glyphicon glyphicon-info-sign"></i>
</a>
As you can see, the link is dynamic with the ID of the recod. Now, I want to open a modal for the choosen action. In my example, I need to go to something like /member/edit/IdOfUser
How I can load this view in a modal ? Do I need to create a form template for doing that ? I think I need to use ajax for loading the dynamic view.
Share Improve this question asked Aug 31, 2015 at 18:42 seb2020seb2020 1253 silver badges10 bronze badges 1-
As far as I remember, doing it via templates is only encouraged way of doing it. Specifying the
hrefand relying onajaxrequest to returnhtmlwhich in turn would be injected into modal was remended long ago... but not anymore. Also, doing it viahrefhas some nasty bugs when it es to loading first modal and then reloading with anotherhref... – Jovan Perovic Commented Aug 31, 2015 at 19:51
1 Answer
Reset to default 7I suggest using modal of bootstrap 3 when you can use the attribute data-XXX (exemple here 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">×</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)
})