Modal: load content only on click

Question

Using Symfony2, TWIG and Bootstrap, I would like to to display modal windows (as described here).

But I want to load the content of these modal only if the user click on the button to display it, not at the main page's loading.

Context: I have a list of elements on my main page, and I would like to give the possibility to the user to have more information about some particular elements (one at a time). So the user clicks on the element, the modal shows up and details appear. As there are quite a lot of elements and the detailled info are quite heavy to load, I want to load only the necessary ones, on demand.

I know and already use (for other things) TWIG's {% include ... %},{% embed ... %} and {% render ... %}, I know how to display a TB Modal but I didn't find the way to do what I want :(

---

[EDIT] SOLUTION

For later reference. @Syjin's answer put me on the track but some additional details might be useful :-D

In the main Twig page, the one with the list:

<a data-toggle="modal" href="{{ path('MyBundle_MyEntity_seeModal', {'entity_id': entity.id}) }}" data-target="#myModal">Click me</a>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>

Create a new Twig template seeModal.html.twig with the content of the modal, as described in the doc:

  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>

Create the related route and Controller's action.

Solution 1

Actually the answer is right there in the docs.

You can either use the remote option of the modal and specify a path that should be loaded. Or if you are using the data-api you can set the href and the content will be loaded (one time) dynamically.

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

Instead of the remote.html you would specify a route to your rendered modal content.

Solution 2

IMO the best way to accomplish that is to create new action, which returns your heavy data as JSON.

/**
 * @Route("custom/route/{params}", name="your_route", options={"expose": true})
 */
public function getSomething($params)
{
    // your custom logic here...
    return new JsonResponse($data);
}

You will also need some jQuery and get contents using AJAX. To generate routes using jQuery I suggest FOSJsRoutingBundle

Finally, when you get your JSON data, just inject it into your modal-body

Solution 3

The remote option is removed since bootstrap v4.0.

If you use this version here are solutions: Bootstrap 4 with remote Modal