2

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.

Blacksad
  • 1,230
  • 1
  • 14
  • 23
  • 1
    No, I believe this actually has very little to do with either `Symfony` or `Twig`. I would turn my attention to some `JS` libraries like `AngularJS` or `Knockout.JS`... – Jovan Perovic May 27 '14 at 12:58

3 Answers3

3

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.

Syjin
  • 2,740
  • 1
  • 27
  • 31
1

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

Bartek
  • 1,349
  • 7
  • 13
  • 1
    Yes, this is favorable way of doing it. However, beware that there is some weird bug in `Bootstrap` what does not allow modal to refresh it's content. It seems to me that initial (static) content gets saved into some structure and is never refreshed... – Jovan Perovic May 27 '14 at 13:00
  • @jperovic I always clear my modal container and then fill it with data. Actually I've never met this bootstrap bug you mentioned... – Bartek May 27 '14 at 13:02
  • Oh, it might be some isolated bug, so I'm not surprised :) – Jovan Perovic May 27 '14 at 13:04
1

The remote option is removed since bootstrap v4.0.

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

kubalobo
  • 11
  • 4