CODEWITHSUNDEEP
phptwitter-bootstrapsymfony
user8537601
user8537601

Reputation:

Symfony 3 modal

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">&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>

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!

Upvotes: 1

Views: 2471

Answers (1)

Snegirekk
Snegirekk

Reputation: 734

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

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">&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>
            <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>

Upvotes: 1

Related Questions