How to passe javascript variable in parametres of render(controller) Symfony

Question

this is my edit.twig.html

<a href="#" data-toggle="modal" data-target="#myModal{{id}}" class="btn btn-default"><i id="icon" class="fa fa-edit"></i></a><div class="modal fade" id="myModal{{id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
            <form class="formeditcat" action="{{ path(" edit_cat ",{ "id " : id}) }}" class="form-vertical col-md-2" method="post">
                {{ form_row(formedit.name, {"class": "col-md-2"}) }} {{ form_row(formedit.description, {"class": "col-md-2"}) }}
        </div>
        <div class="modal-footer">

            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> {{ form_rest(formedit) }}
            </form>
        </div>
    </div>
</div>

and this my JS i wanna to pass this js variable item.Id like parametre with render(controller) there is any way to do that

 success: function(data) {

            $('.table-striped > tbody > tr').remove();


            $.each(data, function(i, item) {

            var varrender="{{ render(controller('ElearingBundle:Default:edit',{'id': "+item.Id+" })) }}";
            $('.table-striped > tbody').append('<tr class="row'+item.Id+'"><td>'+item.Id+'</td><td>'+item.Name+'</td><td>'+item.Description+'</td><td>'+varrender+'</td><td><a href="#" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal'+item.Id+'"><i id="icon" class="fa fa-trash"></i></a><div class="modal fade" id="deleteModal'+item.Id+'" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"><p><span>Voulez-vous vraiment supprimer <a href="#"></a><strongstyle="background=red"><mark>'+item.Name+'</mark></strong>? </span></p></div> <div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button><a onclick="return DeleteUser('+item.Id+')" data-toggle="modal" class="btn btn-danger" id="lien">Supprimer</a></div> </div></div></div><div class="alert'+item.Id+' alert-success" role="alert"><p><strong>'+item.Name+'</strong> Added successfully</p></div></td></tr>');

            });

        }

Any help

Answer 1

You can't the template is parsed and rendered in the server side and returned as html to the user browser where the javascript is executed.

In the other hand you can use ajax to load the controller response.

$.each(data, function(i, item) {
        var url = '{{ path('controller_path_edit', {'id' : '__ID__'}) }}';
        url = url.replace('__ID__', item.id);
        $.ajax(url, {
            success: function (response) {
                $('.table-striped > tbody').append('<tr class="row' + item.Id + '"><td>' + item.Id + '</td><td>' + item.Name + '</td><td>' + item.Description + '</td><td>' + response + '</td><td><a href="#" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal' + item.Id + '"><i id="icon" class="fa fa-trash"></i></a><div class="modal fade" id="deleteModal' + item.Id + '" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"><p><span>Voulez-vous vraiment supprimer <a href="#"></a><strongstyle="background=red"><mark>' + item.Name + '</mark></strong>? </span></p></div> <div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button><a onclick="return DeleteUser(' + item.Id + ')" data-toggle="modal" class="btn btn-danger" id="lien">Supprimer</a></div> </div></div></div><div class="alert' + item.Id + ' alert-success" role="alert"><p><strong>' + item.Name + '</strong> Added successfully</p></div></td></tr>');
            }
        });
    });

Can also use http://symfony.com/doc/current/bundles/FOSJsRoutingBundle/index.html to generate urls in javascript.