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

Question

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.

Answer 1

I 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">&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)
})