How to set a Symfony2 path to Jeditable plugin

Question

I'm trying to use Jeditable plugin for javascript. Here is the code (I took it from here):

In a .js file:

 $('.edit').editable(function (value, settings) {
        var data = {};
        data[this.id] = value;
        data["_token"] = "{{form._token.vars.value}}";
        $.post("{{ path('edit_category', { 'id': cat.id}) }}", data);
        return(value);
        }, {
            indicator:'Saving...',
            tooltip:'Click to edit',
            cancel:'Cancel',
            submit:'Save'
        });

This isn't working, it says that

No route found for "POST /{{ path('edit_category', { 'id': cat.id}) }}"

which I understand, because I have no idea how to pass the id parameter to the path (cat.id).

This is the way I'd do the edit only with Symfony in a template file:

<a href="{{ path('edit_category', { 'id': cat.id}) }}">
    <i class="icon-pencil right-spacer"></i>
</a>

Any help will be appreciated! Thanks in advance!

Answer 1

The expression {{ path() }} is a twig expression, so it must be parsed by the twig template parser. Javascript files are usually not parsed.

You have some options on how to work around this. One idea is to inline your javascript code into your twig template. Of course that's not suitable for big code blocks and not very clean.

A better approach is to store the pathes in a variable in your layout twig template:

<script>
    var token = "{{form._token.vars.value}}";
    var path = "{{ path('edit_category', { 'id': cat.id}) }}";
</script>

In your js file, you only use the variables:

data["_token"] = token;
$.post(path, data);

Of course you might need to tweek that code if you have many pathes or variables.