Call twig template in JS

Question

I have a json api with symfony2:

return new JsonResponse(array(
    'deliveryRange' => $deliveryRange,
    'html' => $this->render(':App:Command/deliveryRange.html.twig'),
));

The delivery range is an Array, the html variable send me back my twig template.

Here is my JS:

callDeliveryRange: function(){
    $.ajax({
        type: "POST",
        url: Command.routeApiRange,
        cache: false,
        data: {},

        success: function (data, status) {
            Command.htmlDeliveryRange(data);
        },
    })
},

htmlDeliveryRange: function(data){
    $('#content-delivery-range').html(data.html);
},

In the htmlDeliveryRange function I would like to append the twig template in my new twig file.

But nothing is happening.

And I would like also to use the variable of data.deliveryRange in the template.

Is it possible?

Answer 1

Use $this->renderView() instead of render() method. renderView() returns content of twig template as string, while render() returns Response object.

Answer 2

Try just:

return new JsonResponse([
   'deliveryRange' => $deliveryRange,
   'html'          => $this->renderView(':App:Command/deliveryRange.html.twig'),
]);

Answer 3

You need to do:

$lReturn['html'] = $this->renderView(':App:Command/deliveryRange.html.twig');
$lReturn['deliveryRange'] = $deliveryRange;

return new Response(json_encode($lReturn), 200, array('Content-Type'=>'application/json'));