Symfony 3 modal - php

Question

why my modal don't appears when I clik in my link?
I do like this and I don't know where is wrong?
In my table, my Edit button is a dropdown button because I have two Entity joined in this table, so when I click in the link who edited one of my entity the modal don't appears, the page becomes fade only.
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">×</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>
Controller
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(),
));
}
Help me please to show what the problem, thanks!

Answer 1

You can try just move your <div class="modal" ... ></div> container outside the <ul></ul> tag:
<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>Categories</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">×</span>
</button>
<h4 class="modal-title">Edit</h4>
</div>
<div class="modal-body">
<input>
<input type="submit" value="Edit" />
</div>
</div>
</form>
</div>
</div>
So...
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">×</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>
<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>