Открыть modal с динамическим значением с помощью Symfony

Question

У меня возникла проблема с модальным моментом в моем проекте Symfony. На данный момент у меня есть список членов в таблице. Для каждой строки есть кнопка для действий: просмотр, редактирование и удаление. Я делаю это, на мой взгляд веточку:

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

Как вы можете видеть, связь динамична с идентификатором recod. Теперь я хочу открыть модальный для выбранного действия. В моем примере мне нужно перейти к чему-то вроде/member/edit/IdOfUser

Как я могу загрузить этот вид в модальном? Нужно ли создавать шаблон формы для этого? Я думаю, мне нужно использовать ajax для загрузки динамического представления.

Answer 1

Я предлагаю использовать модальный бутстрапе 3, когда вы можете использовать атрибут данных XXX (Exemple здесь данных, что угодно)

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