Question

I have two tables in a database. One of them contains the users of the application, and the other one keeps some medical reports about them in a ManyToOne relationship, so every user can have a random number of medical reports in the info table.

On the left of the screen I want to display a list of the users’ names, an easy thing to do. Every time I click on the name of one of them, I get to another page that shows the medical data, and I have to go back to get again the list of the users. However, I’d like to have this info in the same view, so every time I click on a name on the left I get his or her data on the right, and when I click on another user, the info of the previous user disappear and the new is shown. I mean, I want a similar behavior that the old HTML iframes had, or the new Android 4 fragments.

Is this possible in Symfony2/Twig?

Answer 1

Twig is just a template engine, it is parsed on the server side and raw HTML/CSS/JS is returned to the browser, you can’t write interactions with the user in Twig.

Symfony is a server-side framework, which means it is parsed on the server side and raw HTML/CSS/JS is returned to the browser, you can’t write interactions with users with Symfony.

You need to use a client side script lanuage, like JavaScript. You can create AJAX requests to solve your problem. AJAX requests a url and displays the content of the url on the page. As AJAX is one of the most not-crossbrowser things in JavaScript, it is recommend to use a library like MooTools or jQuery.

I recommend to create a RESTful API for the AJAX requests. Something like /users/{id} should show the user information. For that, create a controller that shows the user data and map it to the /users/{id} route:

<?php
// src/Acme/DemoBundle/Controller/UserController.php
namespace Acme\DemoBundle\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;

class UserController extends Controller
{
    // ...

    /**
     * @Route("/users/{id}")
     */
    public function showAction($id)
    {
        // select user by id
        $user = ...;

        // renders the user data
        $this->render('AcmeDemoBundle:User:show.html.twig', array('user' => $user));
    }
}

And now you create an AJAX request to that url to get the user data:

<ul> 
    <li><a class="js-show-user" data-id="1">Joren</a></li>
    <li><a class="js-show-user" data-id="2">Wouter</a></li>
    <!-- ... -->
</ul>
<div id="js-user-data"></div>

<!-- ... include jquery -->
<script>
jQuery(function($) {

    var output = $('#js-user-data');

    $('.js-show-user').click(function(e) {
        jQuery.ajax({
            url: '/users/' + $(this).data('id'), // request the correct url
            success: function (result) {
                output.html(result); // output the result
            },
        });
    });

});
</script>