Symfony 3 modal

Question

私のリンクをクリックすると私のモーダルが表示されないのはなぜですか？ 私はこれが好きで、どこが間違っているのか分かりません。

私のテーブルでは、このテーブルに2つのエンティティが参加しているので、私の編集ボタンはドロップダウンボタンです。私のエンティティの1つを編集したリンクをクリックすると、そのページは消えます。

edit.html.twig

<a data-toggle="modal" href="#edit{{ fruit.id }}"> 
    Edit 
</a> 
<div class="modal" id="edit{{ fruit.id }}"> 
    {{ form_start(edit_form, { 'method' : 'post', 'action': path('fruit_edit', { 'id' : fruit.id }) }) }} 
    <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">Edit</h4> 
     </div> 
     <div class="modal-body"> 
      {{ form_widget(edit_form) }} 
      <input type="submit" value="Edit" /> 
     </div> 
    </div> 
    {{ form_end(edit_form) }} 
</div> 

index.html.twig

<td> 
<div class="dropdown"> 
    <button class="btn btn-info dropdown-toggle btn-xs" type="button" data-toggle="dropdown"> 
     <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> 
    </button> 
    <ul class="dropdown-menu"> 
     <li>{{ render(controller('AppBundle:Fruit:edit', { 'id' : fruit.id })) }}</li> 
     <li>href="#">Categories</a></li> 
    </ul> 
</div> 

コントローラ

public function editAction(Request $request, Fruit $fruit) 
{ 
    $deleteForm = $this->createDeleteForm($fruit); 
    $editForm = $this->createForm('AppBundle\Form\FruitType', $fruit); 
    $editForm->handleRequest($request); 

    if ($editForm->isSubmitted() && $editForm->isValid()) { 
     $this->getDoctrine()->getManager()->flush(); 

     return $this->redirectToRoute('fruit_edit', array('id' => $fruit->getId())); 
    } 

    return $this->render('fruit/edit.html.twig', array(
     'fruit' => $fruit, 
     'edit_form' => $editForm->createView(), 
     'delete_form' => $deleteForm->createView(), 
    )); 
} 

私は何の問題を示すために助けてください、ありがとう！

Answer 1

あなただけ<ul></ul>タグの外にあなたの<div class="modal" ... ></div>コンテナを移動しようとすることができます

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<div class="dropdown"> 
 
    <button class="btn btn-info dropdown-toggle btn-xs" type="button" data-toggle="dropdown"> 
 
     <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> 
 
    </button> 
 
    <ul class="dropdown-menu"> 
 
     <li> 
 
      <a data-toggle="modal" href="#edit5"> 
 
       Edit 
 
      </a> 
 
     </li> 
 
     <li><a href="#">Categories</a></li> 
 
    </ul> 
 
    <div class="modal" id="edit5"> 
 
     <form> 
 
      <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">Edit</h4> 
 
       </div> 
 
       <div class="modal-body"> 
 
        <input> 
 
        <input type="submit" value="Edit" /> 
 
       </div> 
 
      </div> 
 
     </form> 
 
    </div> 
 
</div>

そう...

edit.html.twig

<div class="modal" id="edit{{ fruit.id }}"> 
    {{ form_start(edit_form, { 'method' : 'post', 'action': path('fruit_edit', { 'id' : fruit.id }) }) }} 
    <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">Edit</h4> 
     </div> 
     <div class="modal-body"> 
      {{ form_widget(edit_form) }} 
      <input type="submit" value="Edit" /> 
     </div> 
    </div> 
    {{ form_end(edit_form) }} 
</div> 

にdex.html.twig

<td> 
<div class="dropdown"> 
    <button class="btn btn-info dropdown-toggle btn-xs" type="button" data-toggle="dropdown"> 
     <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> 
    </button> 
    <ul class="dropdown-menu"> 
     <li> 
      <a data-toggle="modal" href="#edit{{ fruit.id }}"> 
       Edit 
      </a> 
     </li> 
     <li>href="#">Categories</a></li> 
    </ul> 
    {{ render(controller('AppBundle:Fruit:edit', { 'id' : fruit.id })) }} 
</div>