Generating routes in javascript with Twig and Symfony2

Question

Quite odd problem, sorry for asking, i'm quite new to Symfony/Twig. My route requires a mandatory region_id paramenter:

ajax_provinces_by_region:
  pattern: /ajax/region/{region_id}/provinces
  defaults: {_controller: SWAItaliaInCifreBundle:Ajax:provincesByRegion }
  requirements: {region_in: \d+}

The question is: how can i generate this route based on a select element in javascript (code below)?

The problem is: i can't use path and url helpers from Symfony as they require to specify the region_id parameter (this.value) i can't access because it's a javascript variable (and Twig is compiled server-side).

$(document).ready(function() {
    $('select#regions').change(function(){

        // Make an ajax call to get all region provinces
        $.ajax({
            url: // Generate the route using Twig helper
        });

    });
});

Solution 1

You can use the FOSJsRoutingBundle.

Solution 2

I know it's an old question, but just in case you don't want to install a bundle like FOSJsRoutingBundle, here's a little hack:

var url = '{{ path("yourroute", {'region_id': 'region_id'}) }}'; 
url = url.replace("region_id", this.value);

'region_id' is just used as a placeholder, then you replace it in JS with your actual variable this.value

Solution 3

url:  "{{ path('SampleBundle_route',{'parameter':controller_value}) }}"

Where SampleBundle_route is a valid path defined in routing.yml or annotatins.

For testing, write this in the twig template:

<script>
    var url= "{{ path('SampleBundle_route') }}";
    alert(url);
</script>

Comments

[ZhukV]

This is a good variant, but FOSJsRoutingBundle the best solution.

[dr.scre]

This will escape '&' characters inside url to &

[gkd]

This will not work is my js file is inside asset folder, which is sibling of src folder..

[Geoffrey Hale]

Routing.generate('route_name')

[John the Ripper]

I thought this was the best solution and I've been using it successfully for a while. Where it fails is if you have routing requirements and multiple values. For example I had a route with two variables and both must be digits ("\d+") so for temporary values I was adding a simple integer into the each one then replacing. What eventually caught me is that the id of the real item got replaced on the 2nd url.replace causing an invalid path to be generated.